基於echarts異步加載數據之多個series加載實例

時間 2019-11-21

標籤基於 echarts 異步加載數據多個 series 實例欄目應用數學简体版

原文原文鏈接

前言

基於本人最近在參與研究公司echarts報表部分的功能，其中遇到了很多的坑，這裏將echarts異步加載json數據中涉及到的多個series加載實例問題解決方案作一個共享。json

問題描述

咱們在加載echarts複雜圖形時，好比說折線圖和柱狀圖結合，會涉及到多個series樣式，給個例子, bash

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function(params, ticket, callback) {

            var res = params[0].name;

            for (var i = 0, l = params.length; i < l; i++) {
                if (params[i].seriesType === 'line') {
                    res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + 'h';
                } else {
                    res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '個';
                }
            }
            return res;

        }
    },
    grid: {
        containLabel: true
    },
    legend: {
        data: ['時間', '人均個數', '整體個數']
    },
    xAxis: [{
        type: 'category',
        axisTick: {
            alignWithLabel: true
        },
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    }],
    dataZoom: [{
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'empty',
        start: 0,
        end: 100
    }, {
        type: 'slider',
        yAxisIndex: 0,
        filterMode: 'empty',
        start: 0,
        end: 100
    }, {
        type: 'inside',
        xAxisIndex: 0,
        filterMode: 'empty',
        start: 0,
        end: 100
    }, {
        type: 'inside',
        yAxisIndex: 0,
        filterMode: 'empty',
        start: 0,
        end: 100
    }],
    yAxis: [{
        type: 'value',
        name: '時間',
        min: 0,
        position: 'left',
        axisLabel: {
            formatter: '{value} h'
        }
    }, {
        type: 'value',
        name: '個數',
        min: 0,
        position: 'right',
        axisLabel: {
            formatter: '{value} 個'
        }
    }],
    series: [{
        name: '時間',
        type: 'line',
        label: {
            normal: {
                show: true,
                position: 'top',
            }
        },
        lineStyle: {
            normal: {
                width: 3,
                shadowColor: 'rgba(0,0,0,0.4)',
                shadowBlur: 10,
                shadowOffsetY: 10
            }
        },
        data: [1, 13, 37, 35, 15, 13, 25, 21, 6, 45, 32, 2]
    }, {
        name: '人均個數',
        type: 'bar',
        yAxisIndex: 1,
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        data: [22, 22, 23, 77, 24, 55, 55, 89, 98, 164, 106, 224]
    }, {
        name: '整體個數',
        type: 'bar',
        yAxisIndex: 1,
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        data: [201, 222, 223, 777, 244, 255, 555, 879, 938, 1364, 1806, 2324]
    }]
};
   
複製代碼

咱們發現這個echarts圖表是雙y軸而且由柱狀圖和折線圖組成。時間是用折線圖表示的，人均個數和整體個數是由柱狀圖表示的。而且這是寫死的樣例，那麼咱們實際應用中的數據確定是用異步加載的方式加載數據的，json串的數據格式是同樣的，這種不一樣的series如何用json串異步加載呢？echarts

實際解決方案

這裏，樓主用本身所作的項目爲例，貼出核心代碼。首先，獲取到的json串格式如圖。total的數據格式頭是data。即：data:{total:{date:...}}dom

var option = {
    title: {
            text: '交易量統計趨勢圖'
        },
    tooltip: {
            trigger: 'axis',
            axisPointer: { // 座標軸指示器，座標軸觸發有效
                type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
            },
   formatter: function (params, ticket,callback){
                var res = params[0].name;

                for (var i = 0, l = params.length; i < l; i++) {
                    if (params[i].seriesType === 'line') {
                        res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '元';
                    } else {
                        res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '元';
                    }
                }
                return res;
            }
        },
        legend: {
            data: [],
            align: 'right',
            right: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: []
        }],
        yAxis: [{
            type: 'value',
            name: '總價(元)',
            axisLabel: {
                formatter: '{value}'
            }
        }],
        series: []
    };
複製代碼

其次，須要加載數據的3個地方legend(表示圖例組件),xAxis(表示x軸數據),series(圖表類型和樣式等)所有設置爲默認，前期的準備工做就這樣作好了。而後，咱們的核心代碼來了，最終咱們要實現的效果是讓series有2個不一樣的圖表類型。那麼，這裏咱們分別定義2個不一樣的圖表類型，即折線和柱狀，即：異步

//表示折線圖
   var ItemLine = function () {
        return {
            name: '',
            type: 'line',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                }
            },
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
            data: []
        }
    };
    //表示柱狀圖
    var ItemBar = function () {
        return {
            name: '',
            type: 'bar',
            data: []
        }

    }
複製代碼

定義3個變量分別存儲legend,xAxis，series的值。ide

var legends=[];
var xDateArr=[];
var SeriesTotal=[];
複製代碼

將json串賦值給3個變量。這裏十分重要！十分重要！十分重要！（重要的事情說3遍）。回到咱們剛纔的json串，注意，是以data爲頭的。咱們遍歷這個json串：ui

//給x軸賦值
xDataArr=data.total.date;
for (var k in data.total.element) {
 //給legend賦值
 lengends.push(data.total.element[k].name);
     //核心，給series賦值，分開包裝的思想。
        if (k == 0) {
            var itemLine = new ItemLine();
            itemLine.name = data.total.element[k].name;
            itemLine.data = data.total.element[k].value;
            SeriesTotal.push(itemLine);
        } else {
            var itemBar = new ItemBar();
            itemBar.name = data.total.element[k].name;
            itemBar.data = data.total.element[k].value;
            SeriesTotal.push(itemBar);
        }
    }
複製代碼

固然，我這裏是用下標作分割的，小夥伴們也能夠用json頭等作標誌分割2個不一樣的series，主要思想是分次包裝，這樣就能實現series多個系列的數據異步加載了。哪怕3個，4個圖例都so easy了~~~ 最後，再把這3個變量賦值給option,並將option加載到dom容器中便可。spa

var myChartTransactionTotal = echarts.init(document.getElementById('main_chart_transaction_total'));
    option.legend.data = lengends;
    //注意這裏是xAxis[0],若是直接寫xAxis會報錯，由於x軸默認有2個，上半年軸和下半軸。
    option.xAxis[0].data = data.total.date;
    option.series = SeriesTotal;
    //這裏最好加上true參數，不然會出現切換圖表時前面數據不會清除掉的狀況。
myChartTransactionTotal.setOption(option, true);
複製代碼

讓咱們來看下實際效果，是否是很簡單有木有。若是有問題歡迎你們一塊兒交流討論哦！code