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函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
Javascript设计模式之原型模式详细
Oct 05 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类的自动加载机制实现方法分析
2019/01/10 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python datetime中strptime用法详解
2019/08/29 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
实习老师离校感言
2014/02/03 职场文书
军训感想500字
2014/02/20 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
家长学校教学计划
2015/01/19 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android