V-Charts中使用extend属性定制词云图

[本文出自天外归云的博客园]

简介

在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属性定制词云图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。