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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
javascript插入样式实现代码
Feb 22 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery 选择器详解
Jan 19 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python基础之文件读取的讲解
2019/02/16 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
素质教育标语
2014/06/27 职场文书
亮剑观后感
2015/06/05 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书