配置依赖
- 未安装淘宝镜像
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>