首页 > 其他分享 >Vue3动态填充Echars5数据(柱形图为例)

Vue3动态填充Echars5数据(柱形图为例)

时间:2024-10-21 14:49:30浏览次数:9  
标签:echars 为例 代码 onMounted 柱形图 api Vue3 数据

1.Echars的安装

Vue3项目终端输入命令npm install echarts

2.在vue项目中引入

3.echars三步走

96行 获取实例

97~125行 样式设置及数据(那么需要动态的获取api接口请求来的数据而不是写死的数据,这里再116行进行设置)

126行 设置数据

注:该方法需要在onMounted()方法中挂载

5.Api请求的数据代码

ref中的数据

6.效果

7.总结

1.安装echars

2.引入echars

3.template写div代码

4.script 写三步走基础代码

5.方法填入onMounted

6.获取api请求的数据修改echars中关于数据的值(修改完后需要重新调用该(echars)方法)

标签:echars,为例,代码,onMounted,柱形图,api,Vue3,数据
From: https://blog.csdn.net/2401_86261141/article/details/142951029

相关文章