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 相关文章推荐
js window.print实现打印特定控件或内容
Sep 16 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
第六章 php目录与文件操作
2011/12/30 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
python正则表达式match和search用法实例
2015/03/26 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
详解python:time模块用法
2019/03/25 Python
Python  Django 母版和继承解析
2019/08/09 Python
详解Python中import机制
2020/09/11 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
机电工程专业应届生求职信
2013/10/03 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
纠风工作实施方案
2014/03/15 职场文书
幼儿教师求职信
2014/05/24 职场文书
大学入学感言
2015/08/01 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript