-
要做到多維度第一個滿足的條件是數據要靈活,不能將數據放到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>
-
效果圖展示
有啥不懂的歡迎在下面評論提問