vue-element-template图表动态数据获取渲染页面

清疚 2022-03-14 14:30 421阅读 0赞

首先按照官方文档提供的例子先走一遍，成功显示之后就开始在原基础上去修改代码，来达到异步加载的效果；

官方文档的链接：[https://echarts.baidu.com/tutorial.html\#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0][https_echarts.baidu.com_tutorial.html_E5_BC_82_E6_AD_A5_E6_95_B0_E6_8D_AE_E5_8A_A0_E8_BD_BD_E5_92_8C_E6_9B_B4_E6_96_B0]

![20190306162829417.png][]

npm一下jquery，因为vue-element-template模板里面是没有加载的（注意：我的用的是vue-element-template模板进行二次开发的）

npm操作:npm install jquery --save

然后就开始修改代码：我就直接上截图了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 2][]

vue-从接口请求数据不会的，可以参考她的博客：[https://www.cnblogs.com/kymming/p/6484626.html][https_www.cnblogs.com_kymming_p_6484626.html]

[https_echarts.baidu.com_tutorial.html_E5_BC_82_E6_AD_A5_E6_95_B0_E6_8D_AE_E5_8A_A0_E8_BD_BD_E5_92_8C_E6_9B_B4_E6_96_B0]: https://echarts.baidu.com/tutorial.html#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD%E5%92%8C%E6%9B%B4%E6%96%B0
[20190306162829417.png]: /images/20220312/7d6a6dcaf221465a98a412a939820dfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]: /images/20220312/245c4c5819c942349869c866f9dfaf24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1]: /images/20220312/4590097bad1d429896751a8bd3296ac2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 2]: /images/20220312/93cd5c964b1f45ccbccb327f62095777.png
[https_www.cnblogs.com_kymming_p_6484626.html]: https://www.cnblogs.com/kymming/p/6484626.html