Echarts—词云库（echarts-wordcloud）配置详解和使用（可自定义形状）

Echarts—词云库（echarts-wordcloud）配置详解和使用（可自定义形状）

安装

echarts-wordcloud是基于echarts的一个插件，所以我们要首先安装echarts包，然后再安装echarts-wordcloud的包，这里我的练习项目安装的版本；当然，你可以随意安装你需要的版本；

npm install echarts@5.3.3
npm install echarts-wordcloud@2.0.0

基本配置详解

词库云的使用方式其实跟echart组件是一样的，也是首先需要一个容器，然后对其进行配置，我们先来看一下他的一下配置项，最后我们再把详细的使用方法以及代码展示出来；
echarts-wordcloud官方github地址

<template>
  <div id="container" class="wordcloud-wrapper"></div>
</template>

<script>
  export default {
    data() {
      return {
        fruits: [
          { name: "互联网服务", value: 1000 },
          { name: "交通运输", value: 850 },
          { name: "公司", value: 800 },
          { name: "军工", value: 600 },
          { name: "医药", value: 900 },
          { name: "商务服务", value: 600 },
          { name: "城乡规划", value: 800 },
          { name: "家政服务", value: 400 },
          { name: "安防", value: 850 },
          { name: "医疗服务", value: 200 },
          { name: "电子科技", value: 8000 },
          { name: "航空航天", value: 1500 },
          { name: "食品饮料", value: 1500 },
          { name: "能源", value: 800 },
          { name: "教育培训", value: 200 },
          { name: "金融", value: 100 },
          { name: "文化娱乐", value: 250 },
          { name: "电力", value: 1200 },
          { name: "石油化工", value: 300 },
          { name: "电子商务", value: 900 },
          { name: "建筑", value: 700 },
          { name: "旅游", value: 550 },
          { name: "环保", value: 750 },
          { name: "地产", value: 1100 },
          { name: "体育", value: 300 },
          { name: "通信", value: 950 },
          { name: "科研", value: 1200 },
          { name: "物流", value: 1300 },
          { name: "咨询", value: 600 },
          { name: "游戏", value: 850 },
          { name: "人力资源", value: 500 },
          { name: "水务", value: 300 },
          { name: "舞蹈艺术", value: 150 },
          { name: "汽车制造", value: 1100 },
          { name: "电影制作", value: 350 },
          { name: "游乐园", value: 250 },
          { name: "新能源", value: 900 },
          { name: "服装设计", value: 400 },
          { name: "采矿", value: 700 },
          { name: "信息安全", value: 800 },
          { name: "化妆品", value: 600 },
          { name: "音乐产业", value: 750 },
          { name: "物联网", value: 1200 },
          { name: "绿色建筑", value: 850 },
          { name: "社交媒体", value: 950 },
          { name: "人工智能", value: 1000 },
          { name: "水产养殖", value: 320 },
          { name: "医学研究", value: 1800 },
          { name: "动物保护", value: 130 },
          { name: "航海", value: 1000 }
        ],
        chart: null
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(document.getElementById("container"))
        const maskImage = new Image()
		//自定义形状，矢量图 base64    
		//矢量图可以从iconfont下载  地址：https://www.iconfont.cn/
        maskImage.src =
          "data:image/png;base64,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"
        this.chart.setOption({
          title: {
            text: "",

            link: "http://www.google.com/trends/hottrends"
          },

          tooltip: {
            show: true
          },

          grid: {
            left: "5%",

            right: "5%",

            bottom: "5%",

            top: "5%",

            containLabel: true
          },

          series: [
            {
              type: "wordCloud",

              // maskImage: maskImage, //自定义形状

              gridSize: 8, // 控制词云图的网格大小，值越大词语之间的间距越大

              sizeRange: [10, 80], // 控制词语的大小范围

              rotationRange: [0, 0], // 控制词语的旋转角度范围

              rotationStep: 45, // 控制词语旋转的步长

              shape: "circle", // 控制词云图的形状，可选值为 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'

              drawOutOfBound: false, // 控制词云图是否允许词语超出绘制区域

              // 布局的时候是否有动画

              layoutAnimation: true,

              // 图的位置

              left: "center",

              top: "center",
              // 词汇样式

              textStyle: {
                fontFamily: "sans-serif",

                // fontWeight: 'bold',

                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),

                      Math.round(Math.random() * 160),

                      Math.round(Math.random() * 160)
                    ].join(",") +
                    ")"
                  )
                }
              },

              data: this.fruits,

              emphasis: {
                focus: "self",

                textStyle: {
                  fontSize: 20 // 点击的词放大
                }
              }
            }
          ]
        }),
          // 添加词的点击事件处理函数

          this.chart.on("click", function (data) {
            console.log("click", data)
          })

        // 监听词云图中词语的鼠标移入事件

        this.chart.on("mouseover", function (data) {
          console.log("mouseover", data)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wordcloud-wrapper {
    width: 800px;
    height: 500px;
  }
</style>