echarts-wordcloud热词组件

1.在vue中安装echarts和echarts-wordcloud

npm install echarts
/*注意版本号，echarts5.0.0对应的echarts-woedcloud2.0.0版本*/
npm install echarts-wordcloud@2.0.0

2.在main.js引入

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

2.创建子组件wordcloud.vue

<template>
    <div id="mywordcloud_positive" :style="{width: '28vw', height: '28vh'}" :data="worddata"></div>
</template>

<script>
  import echarts from "echarts";
  import "echarts-wordcloud/dist/echarts-wordcloud";
  import "echarts-wordcloud/dist/echarts-wordcloud.min";
    export default {
      name: "wordcloud",
      data () {
        return {
          msg: '',
          worddata: [
            {
              name: "富强",
              value: 1
            },
            {
              name: "民主",
              value: 2
            },{
              name: "文明",
              value: 3
            },
            {
              name: "和谐",
              value: 4
            },
            {
              name: "自由",
              value: 5
            },
            {
              name: "平等",
              value: 6
            },
            {
              name: "公正",
              value: 7
            },
            {
              name: "法治",
              value: 8
            }
          ]
        }
      },
      mounted(){
        this.initChart();
      },
      methods: {
        initChart() {
          const option = {
            title: {
              text: "正面关键词",
              x: "10%"
            },
             /*背景色*/
            backgroundColor: "",
            series: [
              {
                type: "wordCloud",
                //用来调整词之间的距离
                gridSize: 10,
                //用来调整字的大小范围
                sizeRange: [14, 60],
                rotationRange: [0, 0],
                //随机生成字体颜色
                // maskImage: maskImage, //字体以图片形状分布，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                shape: "circle",   //固定的形状
                textStyle: {
                  normal: {
                    color: function() {
                      return (
                        "rgb(" +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ", " +
                        Math.round(Math.random() * 255) +
                        ")"
                      );
                    }
                  }
                },
                left: "left",
                top: "center",
                right: null,
                bottom: null,
                width: "100%",
                height: "100%",
                //数据
                data: this.worddata
              }
            ]
          };
         //初始化echarts实例
      	var myChart = echarts.init(document.getElementById("mywordcloud_positive"));
      	//使用制定的配置项和数据显示图表
     	 myChart.setOption(option);
     	 window.onresize = function() {
        	myChart.resize();
      	  };
        },
      }
    }
</script>

3.在父组件引入

/*调用*/
<my-wordcloud></my-wordcloud>
/*引入*/
import wordcloud from "@/comments/echart/wordcloud.vue"
/*声明*/
components: {
    "my-wordcloud": wordcloud,
  },