[本文出自天外歸云的博客園]

簡介

在Vue中使用E-Charts可以用V-Charts，詞云圖在V-Charts官網中介紹比較簡單，如果想更多定制的話，官網上說要在extend屬性中進行擴展。

V-Charts官網關于V-Charts中詞云圖相關的介紹

Echart官網Echarts github中關于詞云圖相關的介紹

V-Charts官網關于extend配置項的介紹

使用示例

以下是擴展后的樣子：

<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 = thislet projectId = _this.myProjectIdlet startTime = _this.startTimelet endTime = _this.endTimelet clientVersion = _this.versionSelectedlet origin = _this.platformSelectedif (origin === 'all') {origin = -1}getFeedbackWordCloud(projectId, startTime, endTime, clientVersion, origin).then(data => {_this.showChart = true_this.chartData.rows = dataif (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 = thislet 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是官網上給出的標準設置插槽位對應的變量值

轉載于:https://www.cnblogs.com/LanTianYou/p/10152893.html

總結

以上是生活随笔為你收集整理的V-Charts中使用extend属性定制词云图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。