<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>echarts图表</title> </head> <body style="height: 100%; margin: 0"> <div id="containerZ" style="height: 340px"></div> <button id='aaa' onclick="onLoadA()">AAAAA</button> <button id='bbb' onclick="onLoadB()">BBBBB</button> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <script type="text/javascript"> var domZ = document.getElementById("containerZ"); var myChartZ = echarts.init(domZ); var app = {}; var a = [ {product: '江西分平台', '任务总金额': 43.3, '服务总金额': 93.7}, {product: '湖南分平台', '任务总金额': 83.1, '服务总金额': 55.1}, {product: '莱西分平台', '任务总金额': 86.4, '服务总金额': 82.5}, ]; var b = [ {product: '江西分平台', '任务总金额': 3.3, '服务总金额': 3.7}, {product: '湖南分平台', '任务总金额': 3.1, '服务总金额': 5.1}, {product: '莱西分平台', '任务总金额': 6.4, '服务总金额': 2.5}, ]; var optionZ; optionZ = { title: { text: '折线图堆叠', left: '10%' //可以定义 }, legend: { right: '10%' }, tooltip: {}, dataset: { dimensions: ['product', '任务总金额', '服务总金额'], source: a }, xAxis: {type: 'category'}, yAxis: {}, // Declare several bar series, each will be mapped // to a column of dataset.source by default. series: [ { type: 'bar', color: '#169687' //可以改变颜色 }, { type: 'bar', color: '#FCB72B' //可以改变颜色 } ] }; if (optionZ && typeof optionZ === 'object') { myChartZ.setOption(optionZ); } function onLoadA() { optionZ.dataset.source = a; myChartZ.setOption(optionZ); } function onLoadB() { optionZ.dataset.source = b; myChartZ.setOption(optionZ); } </script> </body> </html>
