接觸echarts 大半年了,從不會到熟練也做過不少的圖表，隔了一段時間沒使用這玩意，好多東西真心容易忘了。在接觸echarts這期間也沒有總結什麼東西，今天我就來總結一下如何在echart中非同步載入資料，在實際的工作的中對資料的刷選非常常見，比如在下拉框中選擇，時間選擇等的一些事件中非同步載入資料。一個很常見的篩選如圖：

下面我就直接用程式碼來實現怎樣在事件刷選中非同步重新整理資料

 //路徑配置
    require.config({
        paths: {
            echarts: "/Scripts/echarts-2.2.7/build/dist"
        }
    });
    var MYCHART;  //宣告一個大寫的全域性變數，能不用全域性的儘量就不要用全域性變數
    //使用
    require(['echarts',      
        'echarts/chart/bar'],  //按需載入
        function (ec)
        {
            //例項dom
             MYCHART = ec.init(document.getElementById("main"));
            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data: ['得分']
                },
                xAxis: [
                    {
                        type: "category",
                        data:['']
                      //  data:["科比", "歐文", "詹姆斯", "庫裡", '杜蘭特', '威少', '韋德']
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        "name": "得分",
                        "type": "bar",
                         data:['']
                         //data:[20102, 2000, 1200, 1002, 1204, 4545, 7878]
                    }
                ]
            }
            console.info(MYCHART);
            //位echart物件載入資料
            MYCHART.setOption(option,true);
            loadOption(2011);//使用ajax同步載入資料
        }
    )
 

其實我也很納悶了,這個xAxis中data屬性是一個數組,series中data也是一個數組,如果直接不寫任何資料,在loadOption方法中，再獲取MACHAT.option中會找不到series,xAxis ，option倒是能獲取到，但是這個物件是空的。這讓我很奇怪，所以只能先寫一個空字串了。

    //ajax 非同步載入配置資料項
    function loadOption(year)
    {
        $.ajax({
            url: '/Home/GetJson?year='+year,
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (result) {
                if (result)
                {
                    var option = MYCHART._option;  //e2中感覺這個命名十分奇怪，居然要這樣獲取，必須先設定才有這個屬性
                    debugger
                    if (result.seriesData == null) {
                        option.series[0].data = [''];
                        option.xAxis[0].data = ['']
                    }
                    else {
                        option.series[0].data = result.seriesData;
                        option.xAxis[0].data = result.xAxisData;
                    }
                    MYCHART.setOption(option,true);
                }
            },
            error: function ()
            {
                alert("不好意思請求失敗了");
            }
        })
    }
 

要注意這兩點

1.剛開始的時候我也很奇怪，獲取option 屬性居然有這樣獲取MYCHART._option 。在e3直接MYCHART.getOption()就可以獲取到。

2.echarts圖表動態重新整理資料不能清空資料，這是因為多次呼叫option預設是合併的Merge ,文件裡說設定第二個引數為true就ok ，如上MYCHART.setOption(option,true)

下拉框選擇年份事件：

    function yearChange(selectObj)
    {
        var year = $(selectObj).val();
        loadOption(year);
    }
 

實際執行的效果圖如下：

echarts圖表中值得注意兩點上面已經說了，一個數據動態載入資料沒有清除資料，一個獲取option必須先setOption才能獲取到。但是我鬱悶的是如果不給series 中data屬性設值，xAxis中data屬性設值獲取到的option是一個空的object。雖然實現整個下拉選擇事件動態載入資料的功能，但是程式碼還是得優化一下。

整個思路就是同步執行ajax載入資料，設定option中的屬性。還是要注意方法呼叫的循序。經常會underfined地報錯，debugger的時候看的很清楚。

作者：張林

轉載隨意註明出處

有興趣的可以關注一下我的公眾號，每天分享一篇it技術、面試技巧、技術感想的文章