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链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
vue实现简易音乐播放器
Aug 14 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模板函数 正则实现代码
2012/10/15 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
JavaScript静态的动态
2006/09/18 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
Vue表单实例代码
2016/09/05 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python3 与python2 异常处理的区别与联系
2016/06/19 Python
名片管理系统python版
2018/01/11 Python
Python subprocess模块详细解读
2018/01/29 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
python中time tzset()函数实例用法
2021/02/18 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
某科技软件测试面试题
2013/05/19 面试题
教你打造完美的创业计划书
2014/01/06 职场文书
入股协议书
2014/04/14 职场文书
大学活动总结范文
2014/04/29 职场文书
岳庙导游词
2015/02/04 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
python中的被动信息搜集
2021/04/29 Python
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server