echart

 關於 chart的 面積圖使用心得:

function(chartOption){
   
    chartOption = $nps$.deepCopyTo({}, chartOption);
    var chartDataList = this.__portal.componentItemMap.root.ChartDataList || [];
    // 根據圖標類型 改變趨勢圖
    var chartType = this.__portal.componentItemMap.bar.sourceConfig.type || this.__portal.componentItemMap.line.sourceConfig.type;
   
    // 判斷x軸時間是否一個粒度
    var xTime = [];
    chartDataList.forEach(function(item) {
        if(item.region == '所有') {
            xTime.push(item.time);
        }
    });
    xTime = $nps$.unique(xTime);
    if (xTime.length == 1) {
        chartType = 'bar'
    };
    // 根據指標名稱顯示對應的數據
    var yCategory = this.__portal.componentItemMap.className.getRawValue();
    var timeAry = [],timeAryData = [];
    var xAxisData = [],yAxisData = [];
   
     // 過濾出x軸時間列
    chartDataList.forEach(function(item) {
       xAxisData.push(item.time);
    })
    //   時間去重
    xAxisData = $nps$.unique(xAxisData);
   
    // 取出全部的地市 或者區縣
    var chartCfg = [];
    chartDataList.forEach(function(item) {
        if (xAxisData[0] == item.time) {
            if(item.region != '所有') {
                var obj = {};
                obj['name'] = item.region;
                chartCfg.push(obj);
            }
        }
    });
    var chartMapData = {};
    chartCfg.forEach(function(item) {
        chartMapData[item.name] = [];
    })
    // 填充每一個地市中不一樣時間段的數據
    for (var k in chartMapData) {
       xAxisData.forEach(function(item2) {
                // 填充每一個地市 不一樣時間的數據
            chartDataList.forEach(function(item3) {
                if(k == item3.region) {
                    if (item2 == item3.time ) {
                        // 根據不一樣指標填充不一樣的數據
                        switch (yCategory) {
                            case '總用戶數':
                                chartMapData[k].push(item3.totalCount);
                                break;
                            case '無線用戶數':
                                chartMapData[k].push(item3.wifiCount);
                                break;
                            case '有線用戶數':
                                chartMapData[k].push(item3.nonwifiCount);
                                break;
                            case '活躍用戶數':
                                chartMapData[k].push(item3.hourUsers || item3.minuteUsers || item3.todayUsers);
                                break;
                            case '開機用戶數':
                                chartMapData[k].push(item3.hourBootUsers || item3.minuteBootUsers || item3.todayBootUsers);
                                break;
                            case '播放用戶數':
                                chartMapData[k].push(item3.hourPlayUsers || item3.minutePlayUsers || item3.tadayPlayUsers);
                                break;
                            case '卡頓用戶數':
                                chartMapData[k].push(item3.hourStutterUsers || item3.minuteStutterUsers || item3.todayStutterUsers);
                                break;
                            case '告警用戶數':
                                chartMapData[k].push(item3.hourAlarmUsers || item3.minuteAlarmUsers || item3.todayAlarmUsers);
                                break;
                        }
                    }
                }
            })
        })
    }
    // 判斷用戶點擊是 柱 仍是 線
    if (chartType == 'line') {
        // 以時間爲x軸  "type": "scroll",
        chartOption.series[0].type = 'line';
        chartOption.legend.type = 'scroll';
        chartOption.xAxis[0].boundaryGap = false; // 數據是否從0 開始排列x軸
       
        var firstSeries = chartOption.series[0];
        var chartSeries = [];
        chartOption.legend.selected = {};
        for (var i = 0; i < chartCfg.length; i ++) {
            var cfgItem = chartCfg[i];

　　// 右邊紅框 legend 初始顯示 5個 其他默認不選中
            if(i > 4)  {
                chartOption.legend.selected[cfgItem.name] = false;
            }
            var serieItem = $nps$.applyIf({
                name: cfgItem.name,
                // stack: '總量',
                smooth:true,
                data: chartMapData[cfgItem.name] || []
            }, firstSeries);
            // delete serieItem.areaStyle;
            chartSeries.push(serieItem);
        }
        // 折線圖填充 chartOption
        var xAxisData1 = [];
        chartDataList.forEach(function (item,index) {
                if (item.region == '所有') {
                     xAxisData1.push($nps$.utils.dateTimeRenderer(item.time,'d H:i'));
                }
            });
        chartOption.series = chartSeries;
        chartOption.xAxis[0].data = xAxisData1;
        // 浮窗顯示
        chartOption.tooltip.formatter = function(options) {
            
         if (!options.length) return;
        
         var htmls = [
             '<p>'+options[0].name+'</p>',
             '<table>',
         ];
         for (var i = 0; i < options.length; i +=3) {
             htmls.push('<tr>');
             htmls.push('<td>'+
                 '<span style="width:10px;height:10px;display:inline-block;margin-right:5px;border-radius:5px;"></span>'+
                 options[i].seriesName+': '+options[i].value+
                 '</td>'
             );
             if (options[i+1]) {
                 htmls.push('<td style="padding-left:10px;">'+
                     '<span style="width:10px;height:10px;display:inline-block;margin-right:5px;border-radius:5px;"></span>'+
                     options[i+1].seriesName+': '+options[i+1].value+
                     '</td>'
                 );
             } else {
                 htmls.push('<td></td>');
             }
             if (options[i+2]) {
                 htmls.push('<td style="padding-left:10px;">'+
                     '<span style="width:10px;height:10px;display:inline-block;margin-right:5px;border-radius:5px;"></span>'+
                     options[i+2].seriesName+': '+options[i+2].value+
                     '</td>'
                 );
             } else {
                 htmls.push('<td></td>');
             }
             htmls.push('</tr>');
         }
         htmls.push('</table>');

      return htmls.join('');
     };
       
    } else {
        // 當時間粒度只有1個
        if (xTime.length == 1) {
            //---------
             // 處理數據 以地市爲x軸 各個地市數據求和
            chartOption.series[0].type = 'bar';
            chartOption.xAxis[0].boundaryGap = true;
            chartDataList.forEach(function (item,index) {
                if (item.region == '所有') {
                     timeAry.push($nps$.utils.dateTimeRenderer(item.time,'d H:i'));
                }
            });
            timeAry.forEach(function (item) {
                var ary = [];
                ary.push(item);
                ary.unshift(item);
                timeAryData.push(ary);
            });
            // 時間段下拉框設置
            this.__portal.componentItemMap.timeGun.setSource({matrix: timeAryData});
            // 首次變成柱狀圖 初始設置
            if (!this.__portal.componentItemMap.timeGun.getValue()) {
                this.__portal.componentItemMap.timeGun.setValue(timeAryData[0][0]);
            }
            // debugger
            var timekey =  this.__portal.componentItemMap.timeGun.getValue();
            // 顯示對應y軸數據
            chartDataList.forEach(function (item) {
                var datatime = $nps$.utils.dateTimeRenderer(item.time,'d H:i');
                if(timekey == datatime) {
                    xAxisData.push(item.region || '未知');
                    switch (yCategory) {
                        case '總用戶數':
                            yAxisData.push(item.totalCount);
                            break;
                        case '無線用戶數':
                            yAxisData.push(item.wifiCount);
                            break;
                        case '有線用戶數':
                            yAxisData.push(item.nonwifiCount);
                            break;
                        case '活躍用戶數':
                            yAxisData.push(item.hourUsers || item.minuteUsers || item.todayUsers);
                            break;
                        case '開機用戶數':
                            yAxisData.push(item.hourBootUsers || item.minuteBootUsers || item.todayBootUsers);
                            break;
                        case '播放用戶數':
                            yAxisData.push(item.hourPlayUsers || item.minutePlayUsers || item.tadayPlayUsers);
                            break;
                        case '卡頓用戶數':
                            yAxisData.push(item.hourStutterUsers || item.minuteStutterUsers || item.todayStutterUsers);
                            break;
                        case '告警用戶數':
                            yAxisData.push(item.hourAlarmUsers || item.minuteAlarmUsers || item.todayAlarmUsers);
                            break;
                    }
                }
            })
             xAxisData.shift();
            //柱狀圖 填充chartOption
            chartOption.series[0].data = yAxisData;
            chartOption.series[0].color = '#47C2C3';
            chartOption.xAxis[0].data = xAxisData;
            chartOption.yAxis[0].data = yAxisData;
           
        } else {
            // 以時間爲x軸  "type": "scroll",
            chartOption.series[0].type = 'bar';
            chartOption.legend.type = 'scroll';
            chartOption.xAxis[0].boundaryGap = true; // 數據是否從0 開始排列x軸
           
            var firstSeries = chartOption.series[0];
            var chartSeries = [];
            chartOption.legend.selected = {};
            for (var i = 0; i < chartCfg.length; i ++) {
                var cfgItem = chartCfg[i];
                if(i > 4)  {
                    chartOption.legend.selected[cfgItem.name] = false;
                }
                var serieItem = $nps$.applyIf({
                    name: cfgItem.name,
                    // stack: '總量',
                    data: chartMapData[cfgItem.name] || []
                }, firstSeries);
                chartSeries.push(serieItem);
            }
            // 折線圖填充 chartOption
            var xAxisData1 = [];
            chartDataList.forEach(function (item,index) {
                    if (item.region == '所有') {
                         xAxisData1.push($nps$.utils.dateTimeRenderer(item.time,'d H:i'));
                    }
                });
            chartOption.series = chartSeries;
            chartOption.xAxis[0].data = xAxisData1;
        }
    }
     // tooltip浮窗未知
    chartOption.tooltip.position = function(point, params, dom, rect, size){
     var pos = [point[0]-10, point[1]+10];
     var contentSize = size.contentSize, viewSize = size.viewSize;
     pos[0] = Math.min(viewSize[0]-contentSize[0], pos[0]);
     pos[1] = Math.min(viewSize[1]-contentSize[1], pos[1]);
    
     return pos;
 };
    // 標題
    // chartOption.title.text = "{icon|} "+ yCategory + '(個)';
    chartOption.title.textStyle.rich = {
  icon: {
   backgroundColor: '#3c8cd0',
   width: 2,
   height: 15
  }
 };
    return chartOption;
}

// 返回數據格式