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 相关文章推荐
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
JS查看对象功能代码
2008/04/25 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
vuejs指令详解
2017/02/07 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
keras之权重初始化方式
2020/05/21 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
数控技术应届生求职信
2013/11/13 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
村道德模范事迹材料
2014/08/28 职场文书
护士节活动总结
2014/08/29 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Vue和Flask通信的实现
2021/05/19 Vue.js
python 进阶学习之python装饰器小结
2021/09/04 Python
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL