echarts的词云图表类型有哪些_echarts实现词云图表

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

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

我的数据格式是：

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

}]

});

这样echarts就可以渲染出一个词云图表了：

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

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 是鼠标移到文字上的样式。

以上基本为 echarts-wordcloud 所有的配置项，完整示例可以去 我的github 上下载。