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 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
页面使用密码保护代码
Apr 10 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
JavaScript中string对象
Jun 12 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
es6数据变更同步到视图层的方法
Mar 04 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
会计专业推荐信
2013/10/29 职场文书
中专毕业生自荐信
2013/11/16 职场文书
自荐信的基本格式
2014/02/22 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
党员民主评议个人总结
2014/10/20 职场文书
辞职信范文大全
2015/03/02 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Java设计模式之代理模式
2022/04/22 Java/Android