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 研究心得 取得属性的值
Nov 30 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
ES6 Promise对象的应用实例分析
Jun 27 Javascript
JS实现简易留言板特效
Dec 23 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 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/01/03 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
详解JS函数重载
2014/12/04 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
实用的Vue开发技巧
2019/05/30 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
python传递参数方式小结
2015/04/17 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python处理PDF与CDF实例
2020/02/26 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python celery原理及运行流程解析
2020/06/13 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
委托书模板
2014/04/04 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
python基础之爬虫入门
2021/05/10 Python
如何使用pdb进行Python调试
2021/06/30 Python
mysql 排序失效
2022/05/20 MySQL