vue+echarts循环生成相同的图表

在公司接触到数据可视化大屏,以前一直是用的原生js或者jq结合echarts写的项目,用vue+echarts积累了一些经验.记录一下

需要的效果图:

 1.作为一个前端小白,开始的时候,对这些相同的li标签,还只会一直复制粘贴(需要几个复制几个).后来发现,vue的v-for对于html标签也是可以循环的,得以节省很多冗余的代码.

2.多个图标循环,也是为难了我一阵,一直是个笨思路,想着有几个图标,就初始化几次.看大一篇文章,才知道这些相同的图表也是可以循环实现的.

定义好dom:

 获取,并初始化:

 具体实现方法,参见:

https://blog.csdn.net/ZYS10000/article/details/106018117/?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%20%E5%BE%AA%E7%8E%AF%E7%94%9F%E6%88%90%E5%A4%9A%E4%B8%AAecharts&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-106018117.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4187 感谢大神文章!