博客

要想实现词云图表需单独下载echarts-wordcloud

效果如图

1. 安装

npm install echarts
npm install echarts-wordcloud

2. main.js引入

import echarts from "echarts"
Vue.prototype.$echarts = echarts

3. 使用

<template>
    <div class="container">
      <div id="wordCloudChart" style="height: 500px; "></div>
    </div>
</template>
<script>
import * as echarts from "echarts"
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'
  export default {
    name: 'WordCloudChart',
    components: {},
  
    data() {
      return {
        seriesData: [
          { name: '穿越火线', value: 11, content: '穿越火线------------' },
          { name: '地下城与勇士', value: 3, content: '地下城与勇士------------' },
          { name: '生死狙击', value: 3, content: '生死狙击------------' },
          { name: '王者荣耀', value: 30, content: '王者荣耀------------' },
          { name: '和平精英', value: 28, content: '和平精英------------' },
          { name: '逆战', value: 18, content: '逆战------------' },
          { name: '天涯明月刀', value: 5, content: '天涯明月刀------------' },
          { name: 'QQ飞车', value: 7, content: 'QQ飞车------------' },
        ],
        wordChart: {},
      }
    },
    methods: {
      setWordCloud() {
        this.seriesData.forEach((e,i)=>{
            this.seriesData[i].textStyle = {
             normal:{
                  color: 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                    ].join(',') + ')'
                }
             }
        })
        const wordOpt = {
          tooltip: {
            formatter: function (p) {
              return `${p.data.name} ${p.data.value}`
            },
          },
          series: [
            {
              type: 'wordCloud',
              shape: 'circle',
              left: 'center',
              top: 0,
              width: '50%',
              height: '100%',
              sizeRange: [20, 40],
              rotationRange: [0, 0],
              gridSize: 16,
              drawOutOfBound: false,
              data: this.seriesData,
            },
          ],
          backgroundColor: '#fff',
        }
        this.wordChart = echarts.init(
          document.getElementById('wordCloudChart')
        )
        this.wordChart.setOption(wordOpt)
      },
    },
    mounted() {
      this.setWordCloud()
    },
    
  }
  </script>