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.效果图
动态填充数据总览页
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vue打包优化之生产环境删除console日志配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue Router是Vue提供的路由管理器,将组件与路由一一对应起来,这种对应关系就路由,这篇文章主要介绍了Vue中vue-router路由使用,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue 中的 render 函数作用，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了Element实现表格分页数据选择+全选所有完善批量操作，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
本文主要介绍了vue中table表头单元格合并(附单行、多级表头代码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要给大家介绍了关于如何使用宝塔部署Vue项目的相关资料,宝塔面板提供了非常方便的方式来部署 Vue 项目,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-08-08
React和Vue在响应式机制上各有特点：Vue通过Proxy或Object.defineProperty自动追踪依赖,支持细粒度更新；React基于不可变数据,通过setState显式触发更新,依赖虚拟DOM的Diff算法批量更新,Vue强调声明式和自动优化,React强调函数式编程和显式控制2025-02-02
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。这篇文章主要介绍了Vue.js快速入门实例教程的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要给大家介绍了关于VUE如何利用vue-print-nb实现打印功能的相关资料,文中还给大家介绍了vue-print-nb使用中的常见问题，如空白页,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Python合成Excel表的实现代码（多sheet）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
最新评论