echars vue 添加数据没更新_vue在使用ECharts时的异步更新和数据加载详解
前言
最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:下面话不多说了,来一起看看详细的介绍吧。
使用方法
使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面)
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
初始化一个 echarts 实例并通过 setOption 方法生成一个你想要的图表类型,
首先先把,echarts里setOption的option,单独领出来,初始化放在data里
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里初始化的一个方法,
this.lineChartOrder = echarts.init(document.getElementById('lineChartOrder'));
this.lineChartOrder.setOption(this.getSetOption);
},
然后在mounted里调用这个方法
接下来就就是数据异步加载与更新了。
以下的代码是本地的json类型,异步加载数据时只要填入数据,然后在series里根据名字对应到相应的系列就可以了。
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
}]
});
只需要将数据填充进入就可以了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。
echars vue 添加数据没更新_vue在使用ECharts时的异步更新和数据加载详解相关推荐
- vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中 ...
- Linux I/O操作fsync后数据就安全了么(fsync、fwrite、fflush、mmap、write barriers详解)
系列文章 Linux I/O操作fsync后数据就安全了么(fsync.fwrite.fflush.mmap.write barriers详解) Linux I/O系列之直接内存(Direct IO) ...
- Unity 工具类 之 WWW/UnityWebRequest 下载压缩文件(zip),解压到本地且加载使用解压数据的简单案例(内也含压缩文件例子)
Unity 工具类 之 WWW/UnityWebRequest 网络下载压缩文件(zip),解压到本地,且加载使用解压数据的简单案例(内也含压缩文件例子) 目录 Unity 工具类 之 WWW/Uni ...
- 全民大数据时代已来 阿里数加平台详解
文章讲的是全民大数据时代已来 阿里数加平台详解,业界流行一种说法,云计算与大数据就是一枚硬币的两面,相生相惜,不可分割.在当下互联网时代,数据的价值越来越受到社会的认可,并在今天,已然成为一种普惠资源 ...
- vue 多个回调_Vue 进阶面试必问,异步更新机制和 nextTick 原理
vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和讨论中汲取了一 ...
- vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
- Vue + Element 实现请求加载数据时显示动效( Loading 加载 )
一.版本说明,参考 Element 官网 "vue": "^2.5.2", "axios": "^0.18.1", &q ...
- 大数据WEB阶段(十三)JSP(一)JSP基础、JSP指令详解、四大域九大隐式对象总结
JSP基础.指令.四大作用域九大隐式对象总结 (一)JSP基础 一.JSP概述 jsp其实是java动态页面技术 HTML可以用来组织页面但是HTML是一种静态web资源技术无法嵌入动态数据. Ser ...
- 判断数组中某个元素除自身外是否和其他数据不同_算法工程师要懂的3种算法数据结构:线性表详解...
算法思想有很多,业界公认的常用算法思想有8种,分别是枚举.递推.递归.分治.贪心.试探法.动态迭代和模拟.当然8种只是一个大概的划分,是一个"仁者见仁.智者见智"的问题. 其实这些 ...
最新文章
- golang beego 配置
- jstat_使用jstat报告自定义JVM指标集
- Django连接mysql数据库浅析
- LeetCode-剑指 Offer 03. 数组中重复的数字
- Extjs4 MVC 添加view层
- Digital River拉来Netconcepts站台 亚太营销服务升级
- (C++)浅谈using namespace std
- LeetCode-105:从前序与中序遍历序列构造二叉树
- 【BZOJ3601】一个人的数论,莫比乌斯反演+高斯消元
- WSFC CLUSDB
- input 属性开启手机前置摄像头拍照
- MySQL批量创建测试数据脚本
- linux上运行gfortran,linux下gfortran 生成so文件
- Quartus II IP生成报错
- 那些你不知道的RK3288人脸识别方案
- python计算乘积_python中矩阵运算(乘法和数量积)
- 用opencv-python建立纯色图
- eclipse项目感叹号
- 复旦大学李孝男博士:结合词典的中文命名实体识别
- ubantu 安装显卡
热门文章
- 深入剖析Android音频之AudioPolicyService
- 20分钟理解React Native For Android原理
- ios ffmpeg+libx264
- 代码上传到github上
- c++堆内存默认大小_Java 自动内存管理
- gom引擎登录器_GOM传奇引擎微端配置详细架设语音教程
- linux centos history 查看命令历史 显示时间戳
- unix到底有啥用_微信新上线的「拍拍」到底有啥用?
- python定义test方法_关于python:使用pytest测试类方法
- linux系统安装klocwork,linux下klocwork的使用