在这个示例中，我们将使用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>
我们可以通过点击按钮，切换柱状图和折线图。
