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 原型模式实现OOP的再研究
Apr 09 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
vue实现图片懒加载的方法分析
Feb 05 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与SQL注入攻击[一]
2007/04/17 PHP
php 信息采集程序代码
2009/03/17 PHP
关于页面优化和伪静态
2009/10/11 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
django query模块
2019/04/20 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
Python用户自定义异常的实现
2020/12/25 Python
Python中Qslider控件实操详解
2021/02/20 Python
冰淇淋店创业计划书范文
2013/12/27 职场文书
敬老模范事迹
2014/05/21 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
安全教育日主题班会
2015/08/13 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python