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

簡(jiǎn)介

在Vue中使用E-Charts可以用V-Charts，詞云圖在V-Charts官網(wǎng)中介紹比較簡(jiǎn)單，如果想更多定制的話，官網(wǎng)上說(shuō)要在extend屬性中進(jìn)行擴(kuò)展。

V-Charts官網(wǎng)關(guān)于V-Charts中詞云圖相關(guān)的介紹

Echart官網(wǎng)Echarts github中關(guān)于詞云圖相關(guān)的介紹

V-Charts官網(wǎng)關(guān)于extend配置項(xiàng)的介紹

使用示例

以下是擴(kuò)展后的樣子：

<template><div><el-row><h3 class="float-left"><i class="el-icon-check"></i> 分詞統(tǒng)計(jì)</h3></el-row><el-row :gutter="20"><el-col :span="3"><SelectOption :selected.sync="versionSelected":options="versionOptions"placeholder="請(qǐng)選擇版本"></SelectOption></el-col><el-col :span="3"><SelectOption :selected.sync="platformSelected":options="platformOptions"placeholder="請(qǐng)選擇平臺(tái)"></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>沒(méi)數(shù)據(jù)</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源代碼即可知此函數(shù)是必須的*/showTimes (val1, val2) {for (var i in val2.data) {if (val2.data[i]['text'] === val1) {var tip = '"' + val1 + '" 分詞統(tǒng)計(jì)次數(shù)：' + 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>

上面是我使用詞云圖所在的整個(gè)單文件組件，其中詞云圖使用相關(guān)只需要關(guān)注以下三點(diǎn)：

1.變量chartExtend在ve-wordcloud標(biāo)簽中對(duì)應(yīng)的插槽位

2.我是全局引入的ve-wordcloud，所以如果你沒(méi)有全局引入，一定要在組件中import下：

// import wordcloud from 'vue-wordcloud'

3.變量chartSettings是官網(wǎng)上給出的標(biāo)準(zhǔn)設(shè)置插槽位對(duì)應(yīng)的變量值

轉(zhuǎn)載于:https://www.cnblogs.com/LanTianYou/p/10152893.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。