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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
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根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python计算方程式根的方法
2015/05/07 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python-split()函数实例用法讲解
2020/12/18 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
期末总结的个人自我评价
2013/11/02 职场文书
本科毕业生自荐信
2014/06/02 职场文书
骨干教师事迹材料
2014/12/17 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
老干部座谈会主持词
2015/07/03 职场文书
2016新年感言
2015/08/03 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书