当前位置: 首页>前端>正文

ACCESS echarts动态数据 echarts动态加载数据库数据 vue

刚接触echarts只是知道他能辅助前端做数据展示,但是他的demo数据都是写死的,而正常数据都是通过axios请求服务器动态填充获取的啊,为此还一顿研究.....(真是傻了)。因为它本身是很简单的,echarts就是通过option进行无脑堆叠的,option本身就是json,你可以随意设置,设置好了之后重新刷新就行了啊。。。。。。。。。。下面简单说一下我的程序吧。


 动态数据基本分三步:

①在data中定义空的option:{}

②在created中为option图表设置赋值(数据项可为null)

③mounted中setoption展示图表的同时为option数据赋值(series中data数据赋值,legend图例数据赋值等)

具体请看下面

目录

1.引入图表

2.数据更改为动态获取

3.效果图--动态填充数据总览页


1.引入图表

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

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_数据可视化,第1张

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_js_02,第2张

2.数据更改为动态获取

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

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_vue_03,第3张

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

option如何设置很无脑(真的很方便),可以直接参考echarts官网:

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

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_vue_04,第4张

之后就是关键的setOption了,使用刚指定的配置项和数据,显示图表。这里我完全定义成一个方法了。方便多处调用【mounted初始化,新数据刷新等】。

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_可视化_05,第5张

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_vue_06,第6张

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

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_js_07,第7张

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

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_可视化_08,第8张

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

之后如果有新数据来了,就可以btnRefreshNanding方法就ok了,其本质还是重新setoption是 this.chartPie.setOption(this.optionNanding);

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_数据可视化_09,第9张

3.效果图--动态填充数据总览页

ACCESS echarts动态数据 echarts动态加载数据库数据 vue,ACCESS echarts动态数据 echarts动态加载数据库数据 vue_ACCESS echarts动态数据_10,第10张


https://www.xamrdz.com/web/2jq1939915.html

相关文章: