Vue动态加载ECharts图表数据的方式

vue动态加载ECharts图表数据

刚接触echarts只是知道他能辅助前端做数据展示，但是他的demo数据都是写死的，而正常数据都是通过axios请求服务器动态填充获取的啊，为此还一顿研究.....（真是傻了）。

因为它本身是很简单的，echarts就是通过option进行无脑堆叠的，option本身就是json，你可以随意设置，设置好了之后重新刷新就行了啊。

下面简单说一下我的程序吧。

 动态数据基本分三步：

• ①在data中定义空的option：{}
• ②在created中为option图表设置赋值（数据项可为null）
• ③mounted中setoption展示图表的同时为option数据赋值（series中data数据赋值，legend图例数据赋值等）

具体请看下面

1.引入图表

引入常用的条形柱状图和南丁格尔扇形图。

2.数据更改为动态获取

首先在data中定义一个option选项，用来设置echarts所有配置项，这里先让他为空json，随后在create中对其进行赋值。

之后在created钩子函数中对option设置项进行赋值，也就是dom元素还没有挂载的时候就填充设置项及数据（里面的series），到这里你data中的option就已经赋值了。

option如何设置很无脑（真的很方便），可以直接参考echarts官网：

https://echarts.apache.org/examples/zh/index.html#chart-type-bar

之后就是关键的setOption了,使用刚指定的配置项和数据，显示图表。

这里我完全定义成一个方法了。

方便多处调用【mounted初始化，新数据刷新等】。

option设置项ok了，但是数据还没有传进去，所以下一步就是动态填充数据，这里我再data中模拟axios获取的数据【以扇形南丁格尔图说明】

之后在method中定义一个方法，为之前的option中的数据进行填充，因为此前option中涉及的数组都是空的。

之后再mounted中挂载数据。

mounted挂载时候将获取的数据传给option中的数据就万事大吉了！！

之后如果有新数据来了，就可以btnRefreshNanding方法就ok了，其本质还是重新setoption是 

this.chartPie.setOption(this.optionNanding);

3.效果图

动态填充数据总览页

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论