189 8069 5689
今天就跟大家聊聊有关怎么在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
}]
});看完上述内容，你们对怎么在vue项目中使用ECharts实现异步更新有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。