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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 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代码把全角数字转为半角数字
2007/12/10 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
jQuery 阴影插件代码分享
2012/01/09 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
工程技术员岗位职责
2014/03/02 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
灰雀教学反思
2014/04/28 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
九华山导游词
2015/02/03 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
致青春观后感
2015/06/09 职场文书