vue使用ECharts时的异步更新与数据加载 - Mona-雅

时间:2024-03-12 18:26:14

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

    }]

});

 

只需要将数据填充进入就可以了。