vue在使用ECharts时的异步更新和数据加载详解


Posted in Javascript onNovember 22, 2017

前言

最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:https://3water.com/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

 }]

});

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 #Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 #Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 #Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 #Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
js实现拖拽效果
2015/02/12 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
vue 页面加载进度条组件实例
2018/02/05 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
结构工程研究生求职信
2013/10/13 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
租房安全协议书
2014/08/20 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python