echars vue 添加数据没更新_vue使用ECharts时的异步更新与数据加载

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

使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面)

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器

初始化一个 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}
{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

}]

});

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