echars画折线图的一种数据处理方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>echars画折线图的一种数据处理方式</title> </head> <script src="js/jquery.js"></script> <script src="js/echarts.js"></script> <body> <!--默认状态下 x轴显示间隔是跟 div的宽度 width 有关自动调整的--> <div id="main" style=" 600px;height:400px;"></div> </body> <script type="text/javascript"> /** * 这种处理数据方式的好处是：后台只需要把（每条记录）每个对象需要展示的属性封装成一个list数组即可 * 而不用遍历数据对象集合进行复杂的拼接 */ $(function() { /* 月份 全国 城市 农村*/ var seriesData = [ ["2018年01月",1,2,3], ["2018年02月",2,2,3], ["2018年03月",5,2,3], ["2018年04月",9,2,3], ["2018年05月",4,2,3], ["2018年06月",3,2,3], ]; var title = "中国居民消费价格指数"; // console.log("k+1= "+(Number(k)+1)); var legend = ['全国','城市','农村']; //后台拼接好charData对象（只需要把每条记录的时间和要展示成图表的属性一起拼接成 List， //再把他们放入一个大List再和legend、title一起封装成charData对象传到前台即可） var charData = { "title":title, "legend":legend, "seriesData":seriesData }; drawChart(charData); }); //画折线图 function drawChart(charData) { var title = charData.title; var legend = charData.legend; var xA = charData.seriesData.map(function (item) {return item[0];}); console.log("xA= "+xA);//xA= 2018年01月,2018年02月,2018年03月,2018年04月,2018年05月,2018年06月 var ss = []; //决定画出几条折线 for(var i=0;i<legend.length;i++){ var s = { name: legend[i], type: 'line', data: charData.seriesData.map(function (item) { return item[i+1];//从seriesData中数组元素的第二个元素角标1的开始拼接数据 }), }; ss.push(s); } console.log("ss= "+JSON.stringify(ss)); /* ss= [ {"name":"全国","type":"line","data":[1,2,5,9,4,3]}, {"name":"城市","type":"line","data":[2,2,2,2,2,2]}, {"name":"农村","type":"line","data":[3,3,3,3,3,3]}] */ var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: title }, tooltip: { trigger: 'axis' }, legend: { y: 'bottom' ,//图例显示在图表底部 data: legend/*['全国','城市','农村']*/ }, xAxis:{ data: xA/*data.map(function (item) { return item[0]; })*/ }, yAxis: { type:'value' }, series: ss /*[ { name: '全国', type: 'line', data: data.map(function (item) { return item[1]; }), }, { name: '城市', type: 'line', data: data.map(function (item) { return item[2]; }), }, { name: '农村', type: 'line', data: data.map(function (item) { return item[3]; }), }, ]*/ }; myChart.setOption(option); } </script> </html>