-
要做到多维度第一个满足的条件是数据要灵活，不能将数据放到echarts的options中 。
-
要理解options中哪些数据是用于展示的；先看一个echarts官网的例子
-
首先附上官网的例子
-
option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '邮件营销', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] };效果展示
![]()
-
修改后的代码,有echarts的js可以直接运行
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts/echarts.min.js"></script> <style type="text/css"> #main { margin: 0 auto; } </style> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 1600px;height:700px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // var ls = ['温度1', '温度2', '温度3']; // 指定图表的配置项和数据 var option = { // 给echarts图设置背景色 backgroundColor: '#999', // -----------> // 给echarts图设置背景色 textStyle:{fontWeight:'bold'}, title: { text: '18401646121' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data:[] , textStyle:{fontSize:18}, position: 'bottom' }, calculable: true, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', // boundaryGap: false, data: [] }], yAxis: [{ type: 'value' }], series:[], }; function ta(){ var yyy1 = [[120, 132, 101, 134, 90, 280, 210,160],[63, 34, 47, 20, 30, 31, 20, 48],[60, 30, 40, 20, 30, 30, 20, 40]]; var xxx1 = [1,2,3,4,5,6,7,8]; var ls = ['温度1', '温度2', '温度3']; var series = []; for (i=0;i < ls.length;i++){ series.push({ name:ls[i], type:'line', data:yyy1[i] , // stack: '值', areaStyle: {}, label: { normal: { show: true, textStyle:{fontSize:14}, position: 'bottom' } } }) } return {'series':series,'xxx1':xxx1,'ls':ls} } data1 = ta() option.series = data1['series'] option.legend.data = data1['ls'] option.xAxis[0].data = data1['xxx1'] // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.onresize = function () { myChart.resize();} window.onresize = function () { myChart.resize(); // 根据页面大小重新定义图形大小 }; </script> </body> </html> -
效果图展示
![]()
有啥不懂的欢迎在下面评论提问
