echarts实现词云图表

8次阅读

共计 1822 个字符，预计需要花费 5 分钟才能阅读完成。

前段时间在开发过程中用 echarts 开发了一些图表，当做到词云的时候发觉 echarts-wordcloud 插件的颜色配置项不生效。在网上查了不少资料，好多人说 echarts4 和 echarts-wordcloud 插件不兼容了，然后还提供了一些优雅降级方案，让 echarts3 和 echarts4 同时在项目里运行。但是后来我研究发现其实 echarts4 是可以完美兼容 echarts-wordcloud 的 ，只是网上提供的配置方法有问题而已。

下载最新版本的 echarts 4.8.0 和 echarts-wordcloud 1.13

在 html 中创建一个渲染图表的 div，引入插件和数据：

<div id="chart" style="width: 600px;height: 600px;"></div>
<script src="echarts.js"></script>
<script src="echarts-wordcloud.js"></script>
<script src="data.js"></script>

我的数据格式是：

const originData = [{ name: '基因编辑', value: 1228},
  {name: '婴儿', value: 981},
  {name: '贺建奎', value: 363},
  ……
]

初始数据不用非要这种格式，只要最终格式化成这样就可以。

声明一个可以创建随机颜色的函数，用来给词云加颜色：

function randomColor() {
    return 'rgb(' + [Math.round(Math.random() * 160),
      Math.round(Math.random() * 160),
      Math.round(Math.random() * 160)
    ].join(',') + ')';
  }

格式化数据：

const data = originData.map(val => ({
    ...val,
    textStyle: {
      normal: {color: randomColor()
      }
    }
  }));

我在每个数据后面添加了 textStyle 属性，并给了一个随机的颜色，这也是本文最重要的地方。好多人说词云改不了颜色是因为颜色配置错了位置。

配置 options：

chart.setOption({
    series: [{
      type: 'wordCloud',
      shape: 'diamond',
      left: 'center',
      top: 'center',
      right: null,
      bottom: null,
      width: '70%',
      height: '80%',
      sizeRange: [12, 60],
      rotationRange: [-90, 90],
      rotationStep: 45,
      gridSize: 8,
      drawOutOfBound: false,
      textStyle: {
        normal: {
          fontFamily: 'sans-serif',
          fontWeight: 'normal'
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data
    }]
  });

我会一一解析这些配置的作用：

shape：词云的形状，默认是 circle，可选的参数有 cardioid、diamond、triangle-forward、triangle、star。
left top right bottom：词云的位置，默认是 center center。
width height：词云的宽高，默认是 75% 80%。
sizeRange：词云的文字字号范围，默认是 [12, 60]，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例，value 最小的渲染为 12px，最大的渲染为 60px，中间的值按比例计算相应的数值。
rotationRange rotationStep：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep，这个值越小，词云里出现的角度种类就越多。以上面参数为例，可能旋转的角度就是 -90 -45 0 45 90。
gridSize：词云中每个词的间距。
drawOutOfBound：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
textStyle：词云中文字的样式，normal 是初始的样式，emphasis 是鼠标移到文字上的样式。