Vue项目 使用echarts实现词云图

配置依赖

• 未安装淘宝镜像

npm install echarts-wordcloud --save

• 安装淘宝镜像

cnpm install echarts-wordcloud --save

默认加载的是最新版本依赖"echarts-wordcloud": "^2.0.0"，需要echarts更新到 5.0.1+ 的版本。我一开始使用了4.9.0版本的echarts，报错：...createTextStyle is not a function，所以版本不匹配需要进行更改。

方法一：更新echarts版本

cnpm install [email protected] --save

方法二：更新word-cloud版本

cnpm install [email protected] --save

封装组件

<template>
	<!-- 词云图 -->
	<div ref="echart" class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts';
	import resize from './mixins/resize'
	import "echarts-wordcloud/dist/echarts-wordcloud";
	import "echarts-wordcloud/dist/echarts-wordcloud.min";
	const animationDuration = 1000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '400px'
			},
			height: {
				type: String,
				default: '400px'
			},
			chartData: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$refs.echart);
				this.setOptions(this.chartData)
			},
			setOptions(data) {
				this.chart.setOption({
					grid: {
						width: 'auto',
						height: 'auto',
						top: "10px",
						left: "10px",
						right: "10px",
						bottom: "10px"
					},
					series: [{
						type: 'wordCloud',
						//用来调整字的大小范围
						sizeRange: [15, 30],
						//用来调整词的旋转方向
						rotationRange: [0, 0],
						rotationStep: 60,
						//用来调整词之间的距离
						gridSize: 15,
						shape: 'diamond',

						//随机生成字体颜色
						//echarts5.x 使用echarts-wordcloud2版本 textStyle 设置随机色时，不用加normal，否则会出不了颜色
						textStyle: {
							color: function () {
							  // Random color
							  return 'rgb(' + [
								Math.round(Math.random() * 256),
								Math.round(Math.random() * 256),
								Math.round(Math.random() * 256)
							  ].join(',') + ')';
							},
							emphasis: {
								shadowBlur: 10,
								shadowColor: '#333'
							}
						},
						data: this.chartData
					}]
				})
			},
		}
	}
</script>

父组件引用（传入chartData即可）

<template>
	<el-row style="padding-top: 10px;">
		<data-words :chartData="tagList" :width="'100%'" :height="'200px'"></data-words>
	</el-row>
</template>
<script>
	import DataWords from '../../../components/echarts/keywords'
	import {getTagWordle} from '@/api/home/assetList'
	export default {
		data() {
			return {
				tagList:[]
			}
		},
		components: {
			DataWords
		},
		created() {
			this.getTagWordle()
		},
		methods: {
			getTagWordle() {
				getTagWordle().then(response => {
					this.tagList = response.data.data
				})
			}
		}
	}
</script>