[本文出自天外归云的博客园]
简介
在Vue中使用E-Charts可以用V-Charts，词云图在V-Charts官网中介绍比较简单，如果想更多定制的话，官网上说要在extend属性中进行扩展。
Echart官网Echarts github中关于词云图相关的介绍
使用示例
以下是扩展后的样子：
<template>
<div>
<el-row>
<h3 class="float-left"><i class="el-icon-check"></i> 分词统计</h3>
</el-row>
<el-row :gutter="20">
<el-col :span="3">
<SelectOption :selected.sync="versionSelected"
:options="versionOptions"
placeholder="请选择版本"></SelectOption>
</el-col>
<el-col :span="3">
<SelectOption :selected.sync="platformSelected"
:options="platformOptions"
placeholder="请选择平台"></SelectOption>
</el-col>
<el-col :span="6">
<DateTimePicker :dateValue.sync="dateValue"></DateTimePicker>
</el-col>
</el-row>
<!-- <div id="wordCloud">
<wordcloud :rotate="{from: -5, to: 5, numOfOrientation: 5 }"
fontScale="n"
spiral="rectangular"
:data="cloudWords"
nameKey="word"
valueKey="cou"
:wordClick="showTimes">
</wordcloud>
</div> -->
<ve-wordcloud v-if="showChart"
width="100%"
height="700px"
:data="chartData"
:extend="chartExtend"
:settings="chartSettings"></ve-wordcloud>
<div style="text-align:left;margin-left:10px"
v-else>没数据</div>
</div>
</template>
<style>
</style>
<script>
import { SelectOption, DateTimePicker } from '@/components/common'
import { getFeedbackWordCloud } from '@/api/feedbacks'
import { EventBus } from '@/bus.js'
// import wordcloud from 'vue-wordcloud'
export default {
name: 'wordCloud',
components: {
// wordcloud,
SelectOption,
DateTimePicker
},
data () {
return {
showChart: true,
chartSettings: {
color: ['#4876FF', '#87CEFA', '#98F5FF', '#BBFFFF']
},
chartExtend: {
series: {
rotationRange: [0, 0],
sizeRange: [50, 150],
width: '100%',
height: '100%',
drawOutOfBound: true,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
}
}
},
chartData: {
columns: ['word', 'cou'],
rows: []
},
version: [],
versionSelected: 'all',
versionOptions: [],
platform: [],
platformSelected: 'all',
platformOptions: [],
myProjectId: this.$route.query.feedbackProject,
dateValue: [new Date(2018, 9, 1, 0, 0), new Date(2018, 9, 8, 0, 0)]
}
},
methods: {
/**
* 阅读vue-wordcloud
* WordCloud.vue源代码即可知此函数是必须的
*/
showTimes (val1, val2) {
for (var i in val2.data) {
if (val2.data[i]['text'] === val1) {
var tip = '"' + val1 + '" 分词统计次数：' + val2.data[i]['cou']
this.$alert(tip, '', {})
}
}
},
getFbWordCloud () {
let _this = this
let projectId = _this.myProjectId
let startTime = _this.startTime
let endTime = _this.endTime
let clientVersion = _this.versionSelected
let origin = _this.platformSelected
if (origin === 'all') {
origin = -1
}
getFeedbackWordCloud(projectId, startTime, endTime, clientVersion, origin).then(data => {
_this.showChart = true
_this.chartData.rows = data
if (data === undefined || data.length === 0) {
_this.showChart = false
}
})
},
initVersion () {
let _this = this
// Version Select Options
_this.versionOptions = []
for (let index = 0; index < _this.version.length; index++) {
_this.versionOptions.push({
'id': (_this.version)[index].name,
'label': (_this.version)[index].name,
'value': (_this.version)[index].name
})
}
_this.versionSelected = 'all'
},
initPlatform () {
let _this = this
// Platform Select Options
_this.platformOptions = []
for (let index = 0; index < _this.platform.length; index++) {
_this.platformOptions.push({
'id': (_this.platform)[index].id,
'label': (_this.platform)[index].name,
'value': (_this.platform)[index].id
})
}
_this.platformSelected = 'all'
},
setDateValue () {
let _this = this
let sDate = _this.dateValue[0]
let eDate = _this.dateValue[1]
_this.startTime = sDate.getFullYear() + '-' + (sDate.getMonth() + 1) + '-' + sDate.getDate() + ' 00:00:00'
_this.endTime = eDate.getFullYear() + '-' + (eDate.getMonth() + 1) + '-' + eDate.getDate() + ' 00:00:00'
// console.log(_this.startTime)
// console.log(_this.endTime)
}
},
created () {
let _this = this
_this.setDateValue()
// Get projectId
EventBus.$on('projectId', projectId => {
// console.log('[WordCloud下车]projectId')
_this.myProjectId = projectId
})
// Get version
EventBus.$on('version', version => {
// console.log('[WordCloud下车]version')
_this.version = version
_this.initVersion()
})
// Get origin
EventBus.$on('origin', origin => {
// console.log('[WordCloud下车]origin')
_this.platform = origin
_this.initPlatform()
})
},
mounted () {
this.getFbWordCloud()
},
watch: {
versionSelected: {
immediate: false,
handler: function () {
this.getFbWordCloud()
}
},
platformSelected: {
immediate: false,
handler: function () {
this.getFbWordCloud()
}
},
dateValue: {
immediate: false,
handler: function () {
this.setDateValue()
this.getFbWordCloud()
}
},
version: {
immediate: false,
handler: function () {
this.getFbWordCloud()
}
},
platform: {
immediate: false,
handler: function () {
this.getFbWordCloud()
}
}
}
}
</script>
上面是我使用词云图所在的整个单文件组件，其中词云图使用相关只需要关注以下三点：
1.变量chartExtend在ve-wordcloud标签中对应的插槽位
2.我是全局引入的ve-wordcloud，所以如果你没有全局引入，一定要在组件中import下：
// import wordcloud from 'vue-wordcloud'
3.变量chartSettings是官网上给出的标准设置插槽位对应的变量值