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],
           '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是官网上给出的标准设置插槽位对应的变量值