echarts循环数据实列

如下图表的循环简单方法

 


1
echarts循环试列
data为后台获取数据 类型为 List<Map>

 1 getroeadSectionChartsOption: function (data) {
 2         var me = this;
 3         var xAxisData = [], seriesData = [],
 4             legendData = ["PCI", "RQI", "RDI", "SIR", "PQI", "SCI", "BCI", "TCI", "MQI", "PSSI"];
 5         var currentYear = new Date().getFullYear();
 6         for (var i = currentYear - 4; i <= currentYear; i++) {
 7             xAxisData.push(i + '年')
 8         }
 9         // debugger
10         // 的到年份
11         legendData.forEach(function (item) {
12             seriesData.push({
13                 name: item,
14                 type: 'line',
15                 stack: '总量',
16                 data: getData(item.toLocaleLowerCase())
17             });
18         });
19         function getData(item) {
20             var d = []
21             xAxisData.forEach(function (year, i) {
22                 data.baseCheckDto.forEach(function (dto, j) {
23                     if (year.indexOf(dto.checkYear) > -1) {
24                         if (!dto[item]) {
25                             d.push(0);
26                         } else {
27                             d.push(dto[item])
28                         }
29                     }
30                 })
31                 if (typeof(d[i]) == 'undefined') {
32                     d.push(0);
33                 }
34             })
35             return d
36         }
37 
38 
39         /* data.baseCheckDto.forEach(function (item, i) {
40          xAxisData.forEach(function (year) {
41          if(){
42 
43          }
44          })
45          seriesData.forEach(function (val, j) {
46          seriesData[j].data[j] = item[val.name.toLocaleLowerCase()]
47          })
48          })*/
49         var option = {
50             title: {
51                 text: '近五年检测数据'
52             },
53             tooltip: {
54                 trigger: 'axis'
55             },
56             legend: {
57                 data: legendData
58             },
59             grid: {
60                 left: '3%',
61                 right: '4%',
62                 bottom: '3%',
63                 containLabel: true
64             },
65             toolbox: {
66                 feature: {
67                     saveAsImage: {}
68                 }
69             },
70             xAxis: {
71                 type: 'category',
72                 boundaryGap: false,
73                 data: xAxisData
74             },
75             yAxis: {
76                 type: 'value'
77             },
78             series: seriesData
79             /*[
80              {
81              name: '邮件营销',
82              type: 'line',
83              stack: '总量',
84              data: [120, 132, 101, 134, 90, 230, 210]
85              },
86 
87              {
88              name: '搜索引擎',
89              type: 'line',
90              stack: '总量',
91              data: [820, 932, 901, 934, 1290, 1330, 1320]
92              }
93              ]*/
94         };
95         return option;
96 
97     }

 

 

 

posted @ 2019-06-13 15:39    阅读(683)  评论(0编辑  收藏  举报