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 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
vue之nextTick全面解析
May 17 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
图片按比例缩放函数
2006/06/26 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python调用微信公众平台接口操作示例
2017/07/08 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python3.7 的新特性详解
2019/07/25 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书