vue在使用ECharts时的异步更新和数据加载详解
前言
最近在学习eCharts，学习到了异步更新和数据加载这一块，觉着有必要总结一下，方法以后的时候参考学习，在开始本文之前，对eCharts不熟悉的朋友们可以参考下这篇文章：https://www.jb51.net/article/128790.htm 下面话不多说了，来一起看看详细的介绍吧。
使用方法
使用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
}]
});
只需要将数据填充进入就可以了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了Vue3 实现验证码倒计时功能，倒计时的运用场景是获取手机验证码倒计时、获取邮箱验证码倒计时等场景，本文结合示例代码给大家详细讲解，需要的朋友可以参考下2023-01-01
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
这篇文章主要介绍了vue项目打包后提交到git上为什么没有dist这个文件的解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
Monaco-editor,一个vs code 编辑器,需要将其集成到项目,这篇文章主要介绍了Vue3中如何使用component :is 加载组件,需要的朋友可以参考下2023-11-11
在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具，发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了，今天小编通过本文给大家分享详细过程，感兴趣的朋友跟随小编一起看看吧2023-07-07
今天小编就为大家分享一篇Vuejs2 + Webpack框架里,模拟下载的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家分享了vue全局过滤器概念及注意事项和基本使用方法，下面文字围绕vue全局过滤器的相关资料展开具体的详细内容,需要的朋友可以参考一下，希望对你有所帮助2021-11-11
这篇文章主要介绍了vue使用路由router-view的相关知识,其原理就是采用 SPA(single-page-application) 模式,就是只有一个 Web 页面的应用,通过 router 来控制页面的刷新和迭代,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue 自定义指令directives及其常用钩子函数说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要给大家介绍了关于vue改变数据后数据变化页面不刷新的解决方法,vue比较常见的坑就是数据(后台返回)更新了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
最新评论