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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 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连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
django 简单实现登录验证给你
2019/11/06 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
道路建设实施方案
2014/03/18 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
医德医风演讲稿
2014/05/20 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
周一问候语大全
2015/11/10 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
《我是什么》教学反思
2016/02/16 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript