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代码
Mar 07 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
手把手教你写一个微信小程序(推荐)
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验证类的封装与使用方法详解
2019/01/10 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
node.js的事件机制
2017/02/08 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python实现井字棋小游戏
2020/03/04 Python
详解python程序中的多任务
2020/09/16 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
什么是GWT的Module
2013/01/20 面试题
会计系中文个人求职信
2013/12/24 职场文书
给民警的表扬信
2014/01/08 职场文书
金融管理专业求职信
2014/07/10 职场文书
建筑施工安全责任书
2014/07/24 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
高中班主任心得体会
2016/01/07 职场文书
《失物招领》教学反思
2016/02/20 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android