Vue+词云图版本问题解决

最新推荐文章于 2024-07-26 08:30:00 发布

chuan6752

最新推荐文章于 2024-07-26 08:30:00 发布

阅读量731

点赞数 1

分类专栏：开发笔记文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/chuan6752/article/details/113416401

版权

在做一个方案用到词云图，期间查询相关资料，发现均会遇到版本问题导致词云图不能有效展示，今天有完成特做一个汇总。

一、安装echarts 和 echarts-wordcloud，注意安装版本

npm install echarts@4.9.0

npm install echars-wordcloud@1.1.3

二、在main.js 或对应的js 文件下引入echarts 包

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

三、HTML 里的代码如下：

<div id="char2" :style="{width: '100%', height: '78%'}"></div>

四、JS如下，注意最后的 data 数据，this.worddata 是引作 data 里的数据，这样方便从后端实时更新数据。

initCharts() 函数【注意下文会用到】

initCharts(){
		let myChart2 = this.$echarts.init(document.getElementById('char2'));

		myChart2.setOption({
                        title: {
                            //text: "center"
                        },
						backgroundColor: "#E6E6FA",
						tooltip: {},