zoukankan      html  css  js  c++  java
  • 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     }
    
    
    
     
  • 相关阅读:
    [读书笔记]捉虫日记
    花生壳建站全过程
    (step4.3.9)hdu 1584(蜘蛛牌——DFS)
    鼠标移到导航上面 当前的LI变色 处于当前的位置
    JavaScript学习笔记
    由Maximum Gap,对话桶排序,基数排序和统计排序
    安德鲁斯Launcher得到的装在手机的应用程序列表
    broadAnywhere:Broadcast组件权限绕过漏洞(Bug: 17356824)
    Ubuntu logomaker sh: 1: pngtopnm: not found 解决方案
    HDU 1598 find the most comfortable road (罗列+Kruskal) 并检查集合
  • 原文地址:https://www.cnblogs.com/MythLeige/p/11016844.html
Copyright © 2011-2022 走看看