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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 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
xajax写的留言本
2006/11/25 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python中实现的RC4算法
2015/02/14 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
社会实践感言
2014/01/25 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
婚庆答谢词大全
2015/09/29 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle