echarts-wordcloud 热词云使用

1.安装

npm install echarts

npm install echarts-wordcloud

注意版本：echarts版本5只能和wordcloud版本2的一起使用 ；echarts版本4只能和wordcloud版本1的一起使用

2.在main.js引入

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
require('echarts-wordcloud')

3.使用

<template>
    <div id="echartsWordcloud" style="width:200px;height:200px;background-color:#0d071f"></div>
</template>
<script>
var run = 999
 var createRandomItemStyle2 = function () {
    var colorArr = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
    var flag = parseInt(Math.random() * 10);
    return {
        normal: {
            fontFamily: '微软雅黑',
            color:colorArr[flag]
        }
    };
}
var createRandomItemStyle1 = function (params) {　　　　//此方法与下方配置中的第一个textStle下的color等同
    var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
    return colors[parseInt(Math.random() * 10)];
}
export default{
  data() {
    return {
      data : [{name: "小区",value: "283"},{name: "留言板",value: "101"},{name: "业主",value: "148"},
      {name: "同学",value: "283"},{name: "老师",value: "101"},{name: "话痨",value: "148"}
      ]
    }
  },
  mounted(){
    this.initEcharts(this.data)
  },
  methods:{
    initEcharts(data){
        let echartsWordcloud = this.$echarts.init(document.getElementById("echartsWordcloud"));
        let option = {
          title: {
            text: "标题",
            x: "center"
          },
          // backgroundColor: "#fff",
          series: [
            {
              type: "wordCloud",
              //用来调整词之间的距离
              gridSize: 10,
              //用来调整字的大小范围
              sizeRange: [14, 26],
              rotationRange: [0, 0],
              //随机生成字体颜色
              // textStyle: {
              //     fontFamily: 'sans-serif',
              //     // fontWeight: 'bold',
              //     // Color can be a callback function or a color string
              //     color: function () {
              //         // Random color
              //         return 'rgb(' + [
              //             Math.round(Math.random() * 160),
              //             Math.round(Math.random() * 160),
              //             Math.round(Math.random() * 160)
              //         ].join(',') + ')';
              //     }
              // },
              // 也可以自己定制颜色
              textStyle: {
                  fontFamily: '微软雅黑',
                  color: function () {
                      var colors = ['#fda67e', '#81cacc', '#cca8ba', "#88cc81", "#82a0c5", '#fddb7e', '#735ba1', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
                      return colors[parseInt(Math.random() * 10)];
                  }
                },
              // textStyle: {
              //     color: function() {
              //       return (
              //         "rgb(" +
              //         Math.round(Math.random() * 255) +
              //         ", " +
              //         Math.round(Math.random() * 255) +
              //         ", " +
              //         Math.round(Math.random() * 255) +
              //         ")"
              //       );
              //     }
              // },
              //位置相关设置
              left: "center",
              top: "center",
              right: null,
              bottom: null,
              width: "100%",
              height: "100%",
              //数据
              data: data
            }
          ]
        };
        echartsWordcloud.setOption(option);
        //点击事件
        echartsWordcloud.on("click",function(e){
          alert(e)
        })
    }
  }
}
</script>

效果图：

插件地址：echarts-wordcloud