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 相关文章推荐
jquery固定底网站底部菜单效果
Aug 13 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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注入详解及防范
2013/11/12 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python科学计算之narray对象用法
2019/11/25 Python
如何给Python代码进行加密
2020/01/10 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
python遍历路径破解表单的示例
2020/11/21 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
茶叶生产计划书
2014/01/10 职场文书
机械个人求职信范文
2014/01/24 职场文书
运动会标语
2014/06/21 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
python实现进度条的多种实现
2021/04/29 Python