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 相关文章推荐
accesskey 提交
Jun 26 Javascript
Javascript 错误处理的几种方法
Jun 13 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
微信小程序如何实现在线客服功能
Oct 16 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
PHP类的反射用法实例
2014/11/03 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
$()JS小技巧
2007/07/21 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JS模板实现方法
2013/04/03 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
python获得图片base64编码示例
2014/01/16 Python
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
详解Python正则表达式re模块
2019/03/19 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
分层教学实施方案
2014/03/19 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
MBA推荐信怎么写
2015/03/25 职场文书