Vue项目使用echarts实现词云图

蔚落 2023-01-23 09:52 878阅读 0赞

## 配置依赖 ##

*  未安装淘宝镜像

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 echarts@5.0.2 --save

方法二：更新word-cloud版本

cnpm install echarts-wordcloud@1.1.3 --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>