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学习笔记4 Eval函数
Jan 11 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
在vue中读取本地Json文件的方法
Sep 06 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下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python 字典中取值的两种方法小结
2018/08/02 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python脚本开机自启的实现方法
2019/06/28 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
启动仪式策划方案
2014/06/14 职场文书
经典禁毒标语
2014/06/16 职场文书
北京故宫导游词
2015/01/31 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python