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扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
初学者AngularJS的环境搭建过程
Oct 27 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 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技巧小贴士之下篇
2007/03/22 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
JS的反射问题
2010/04/07 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
Python self用法详解
2020/11/28 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年党建工作总结
2014/11/11 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang