Echarts 词云图 自定义形状

起因

• 项目中需要用到词云图实现一个需求 但是项目中需要实现一个类似盾牌形状的词云图

• 在网上找了一下之后 有各种实现方式 但是cv大法之后发现不能满足自己的需求

• 实现的形状如下图

  

• 数据太少的时候，形状很难看出来 所以增加一个灰色的边框来让形状更加明显

• 找了很多都没有 具体如何做 最后是用一张图片去覆盖上去

实现逻辑

• 准备两张图片 第一张为黑色填充或者深色填充 作为词云图显示的形状 第一张图片如下

  

• 然后准备第二张图片 作为云图的边框

  

代码实现

            // 创建一张Image对象
            var maskImage = new Image();

            var option = {
             // 绘制 边框图片
              graphic: [{
                  type: 'group',
                  bounding: 'raw',
                  children: [
                  {
                      type: 'image', // 设置类型为image
                      left: 0, // image的位置
                      top: 0,  // image的位置
                      z: 100,
                      style: {
                          image: '边框图', // 图片的src 可以设为base64
                          width: width, // 图片的宽 （宽高应根据echrats大小设置）
                          height: height, // 图片的高
                      }
                  },
                  ]
              },],
              // 词云图设置
              series: [ {
                  type: 'wordCloud',
                  sizeRange: [10, 60],
                  rotationRange: [-90, 90],
                  rotationStep: 45,
                  gridSize: 2,
                  shape: 'cicle',
                  left: 10,
                  right: 10,
                  top: 0,
                  // bottom: 0,
                  width: width - 10,
                  height: height,
                  maskImage: maskImage,
                  drawOutOfBound: false,
                  textStyle: {
                      normal: {
                          color: function () {
                              return 'rgb(' + [
                                  Math.round(Math.random() * 160),
                                  Math.round(Math.random() * 160),
                                  Math.round(Math.random() * 160)
                              ].join(',') + ')';
                          }
                      },
                      emphasis: {
                          color: 'red'
                      }
                  },
                  data: data.sort(function (a, b) {
                      return b.value  - a.value;
                  })
              }
              ]
          };
           maskImage.onload = function () {
                option.series[0].maskImage
                chart.setOption(option);
            }

            maskImage.src = '背景图的src'

结束

• 这样就可以实现一个盾牌形状的词云图了 也可以变换成 其他形状