vue+echarts实现动态绘制图表及异步加载数据的方法


Posted in Javascript onOctober 17, 2018

前言

背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的。

安装

cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度)

实例化

   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西。

官方文档:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

不废话,贴代码

1.在需要用图表的地方引入 例如:hello.js

    import echarts from 'echarts'

2.hello.vue  中写个容器

<div id='myChart' style='width:600px;height:600px'>
</div>

3.在hello.js

export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 mounted(){
  this.drawLine();
 },
 methods: {
  drawLine(){
    // 基于准备好的dom,初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
      title: { text: '在Vue中使用echarts' },
      tooltip: {},
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
  }
 }
}

    这样就调用好了视力了,在页面刷新就可以了

效果如图:

vue+echarts实现动态绘制图表及异步加载数据的方法

这样是很简单的方法,嗯重点来了,我的数据又不是写死的~数据都是后台给我的呀(官方,还真的没有怎么说,示例也是ajax异步请求的)

项目一开始是有完整的一个表格数据,也就是我要把表格数据绘制成图表,还有一堆的筛选条件,有点懵逼~

感觉问题很多啊,给我五分钟,分析分析,分解分解一下

1.数据我都是有的,我需要绘制四条折线,表格数据循环复制给新的四个数组(筛选条件一变,四组数据也跟着变)

2.横坐标也是动态,项目是时间(刚开始我还想偏了,自动填充日期的那种),表格的第一行就是日期,同样用新数组储存

3.数据重新请求了,我的图表也要跟着变才对呀(图表重新绘制)

再次贴代码(废话再多,不如一行代码)

1.在调用筛选条件的方法那里,创建五个新的数组(四条折线),横坐标(日期)

    这里没有代码

2.横坐标动态的:

xAxis: {
     type: 'category',
     boundaryGap: false,
     data: this.xData, //xData 就是日期这个数组
   },

3.series (四条折线的数据)

series : [{

name:this.tooltipData[0],


type:'line',


stack: '总量',


data:this.new_userData,

},

{


name:this.tooltipData[1],


type:'line',


stack: '总量',


data:this.new_deviceData,

},

{


name:this.tooltipData[2],


type:'line',


stack: '总量',
 

data:this.active_userData,

},

{


name:this.tooltipData[3],


type:'line',


stack: '总量',


data:this.active_deviceData,

}]

4.随着筛选数据,重新绘制图表

    调用筛选条件方法的时候再调用这个实例化 drawline 方法就可以了

    this.drawLine();

总结

以上所述是小编给大家介绍的vue+echarts实现动态绘制图表及异步加载数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
原生js实现放大镜特效
Mar 08 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
js中!和!!的区别与用法
May 09 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 #Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 #Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 #Javascript
vue实现循环切换动画
Oct 17 #Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
You might like
我的论坛源代码(三)
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php基础学习之变量的使用
2011/06/09 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
js实现漫天星星效果
2017/01/19 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
vue路由懒加载的实现方法
2018/03/12 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python奇偶行分开存储实现代码
2018/03/19 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python日志模块logbook使用方法
2019/09/19 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
长青弘远的面试题
2012/06/09 面试题
小班重阳节活动方案
2014/02/08 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
python实现批量移动文件
2021/04/05 Python