vue项目中引入echarts图表问题

215 阅读1分钟

1、下载echarts及echarts-wordcloud

1、需要先下载echarts,其次下载echarts-wordcloud

补充:(1版本的echarts-wordcloud需要和4版本的echarts进行匹配,2版本的echarts-wordcloud要和5版本的echarts匹配,实际项目中5版本的echarts词云图渲染不出来)

以项目中为例: npm/cnpm install echarts@3.7.2 -S
             npm/cnpm install echarts-wordcloud@1.1.3 -S

image.png

2、在需要引入echarts图表的文件中引入echarts文件

1.目前知道的是词云图需要另外引入echarts-wordcloud文件,其他图表只需引入这一个文件

image.png

2.词云图需再额外引入echarts-wordcloud文件

image.png

3、渲染图表

1.data中放置词云图数据

image.png

2.methods中初始化图表

image.png

3.mounted中调用方法(在DOM元素挂在完成后调用)

image.png