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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
ajax与302响应代码测试
Oct 23 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
老生常谈js中的MVC
Jul 25 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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分割合并两个字符串的函数实例
2015/06/19 PHP
php商品对比功能代码分享
2015/09/24 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript中的this实例分析
2011/04/28 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
AngularJS 异步解决实现方法
2017/06/12 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python模块包中__init__.py文件功能分析
2016/06/14 Python
10款最好的Python开发编辑器
2019/07/03 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python实现超市商品销售管理系统
2019/10/25 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
会计电算化专业毕业生推荐信
2013/12/24 职场文书
运动会通讯稿400字
2014/01/28 职场文书
征兵宣传标语
2014/06/20 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
Python中三种花式打印的示例详解
2022/03/19 Python
python中redis包操作数据库的教程
2022/04/19 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL