vue使用ECharts時的異步更新與數據加載

vue使用ECharts時的異步更新與數據加載

使用Echarts首先得先把Echarts.js引進來（放在文件的入口html文件裏面）

 

<script src="public/js/echarts.common.min.js"></script>

 

在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器

 

<div id="main" style="width: 600px;height:400px;"></div>

 

初始化一個 echarts 實例並經過 setOption 方法生成一個你想要的圖表類型,

首先先把，echarts裏setOption的option,單獨領出來，初始化放在data裏

data() { return { 

　　　　

getSetOption: {//折線圖

                title: {

                    text: null

                },

                tooltip: {

                    trigger: 'axis'

                },

                grid: {

                    left: '3%',

                    right: '4%',

                    bottom: '3%',

                    containLabel: true

                },

                yAxis: {

                    type: 'value'

                },

                legend: {

                    data: []

                },

 

                xAxis: {

                    type: 'category',

                    data: []

                },

 

                series: [

                    {

                        name: null,

                        type: 'line',

                        stack: '總人數',

                        data: []

                    }

                ]

            },

 

            getPieOption: {//餅圖

                title: { 

                    text: null 

                },

 

                tooltip: {

                    tooltip: 'item',

                    formatter: "{a} <br/> {b} : {c} ({d}%)"

                },

                series : [

                    {

                        type: 'pie',

                        radius: '55%',

                        data:[

                        ].sort(function(a,b){return a.value - b.value;}),

                        roseType: 'angle',

                    }

                ]

            },

　　}

}

 

 

 

下面是在methods裏初始化的一個方法，

 

drawLineChart() {

           this.lineChartOrder = echarts.init(document.getElementById('lineChartOrder'));

            this.lineChartOrder.setOption(this.getSetOption); 

        },

 

        而後在mounted裏調用這個方法

 

        this.drawLineChart(),

 

        接下來就就是數據異步加載與更新了。

        如下的代碼是本地的json類型，異步加載數據時只要填入數據，而後在series里根據名字對應到相應的系列就能夠了。

 

           getOrderTotal(){//獲取一段時間內的訂單統計

            api.getOrderStatistical(this.begin, this.end,this.kId)

            .then(res => {

                if (res.data.ok && res.data.r.length) {

 

                    const

                        results = res.data.r, 

                        legends = results.map(item => ({

                            name: item.channelName,

                            data: item.dateStatisticals

                        }))

                    

                    this.lineChartOrder.setOption({

                        title: {

                            text: '訂單統計'

                        },

                        legend: {

                            data: legends.map(item => item.name)

                        },

 

                        xAxis: {

                            data: legends[0].data.map(item => item.date)

                        },

 

                        series: legends.map(item => {

                            return {

                                type: 'line',

                                name: item.name,

                                data: item.data.map(item => item.count)

                            }

                        })

                    })

                }

            }).catch(err => {

                // console.log(err)

            })

可是，echarts的數據是直接merge的，因此當出現多條折線時，若是當天的數據爲0，或者後臺傳過來的數據爲空的時候，setOption的值根本就沒有更新，而是直接merge了，因此這個問題就頭大了。

對於這個問題的解決方法是

     用getOption取到已經存在的option, 而後用this.lineChartOrder.setOption.clear()，清空option，最後this.lineChartOrder.setOption(option, false, false)。

這樣就能夠清掉了。

 

            如下是官網異步數據加載與更新的方法，會相對簡單些。

 

            // 異步加載數據

 $.get('data.json').done(function (data) {

// 填入數據

 

myChart.setOption({

 

    xAxis: {

        data: data.categories

    },

    series: [{

        // 根據名字對應到相應的系列

        name: '銷量',

        data: data.data

    }]

});

 

只須要將數據填充進入就能夠了。