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函数内部this指针指向的三种方法
Apr 23 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
浅谈javascript中return语句
Jul 15 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
canvas实现探照灯效果
Feb 07 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 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
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Django 外键的使用方法详解
2019/07/19 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
自主招生自荐信
2013/12/08 职场文书
大学毕业感言
2014/01/10 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
群众路线调研报告范文
2014/11/03 职场文书
青春雷锋观后感
2015/06/10 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技