JS图表生成以及点击修改图表样式

在这个示例中，我们将使用Chart.js库来生成一个简单的柱状图，并且添加按钮来点击时修改图表的样式。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图表练习</title>
        <script src="./js/jquery-3.7.1.min.js"></script>
        <script src="./js/echarts.min.js"></script>
    </head>
    <body>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <button id="Bar">柱状图</button>
        <button id="Line">折线图</button>
        <div id="mains" style="width: 600px;height:400px;"></div>
        <div id="" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            let arr = [{
                    id: 1,
                    name: '衬衫',
                    price: '119',
                    num: 109,
                    income: 152
                },
                {
                    id: 2,
                    name: '西装',
                    price: '159',
                    num: 59,
                    income: 256
                },
                {
                    id: 3,
                    name: '领带',
                    price: '99',
                    num: 200,
                    income: 147
                },
                {
                    id: 4,
                    name: '那不雷斯',
                    price: '169',
                    num: 123,
                    income: 258
                },
                {
                    id: 5,
                    name: '皮鞋',
                    price: '259',
                    num: 144,
                    income: 369
                }
            ];
            let goods = [];
            let quantity = [];
            let surplus = [];
            let price = [];
            for (let i in arr) {
                goods[i] = arr[i].name;
                quantity[i] = arr[i].num;
                surplus[i] = arr[i].income;
                price[i] = arr[i].price;
            }
            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '西装'
                },
                tooltip: {},
                legend: {
                    data: ['销量', '剩余', '价格']
                },
                xAxis: {
                    data: goods
                },
                yAxis: {},
                series: [{
                        name: '销量',
                        type: 'bar',
                        data: quantity,
                    },
                    {
                        name: '剩余',
                        type: 'bar',
                        data: surplus
                    },
                    {
                        name: '价格',
                        type: 'bar',
                        data: price
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            let Bar = document.getElementById('Bar');
            let Line = document.getElementById('Line');
            Line.onclick = function() {
                for(let i = 0 ; i < option.series.length ; i++){
                    option.series[i].type = 'line';
                    myChart.setOption(option);
                }

            }
            Bar.onclick = function() {
                for(let i = 0 ; i < option.series.length ; i++){
                option.series[i].type = 'bar';
                myChart.setOption(option);
                }

            }
        </script>
    </body>
</html>
我们可以通过点击按钮，切换柱状图和折线图。
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/138507140
JS图表生成以及点击修改图表样式

目录
