实际上是基于echarts散点图实现的,并非真正的词云图(有轮廓形状)。适用于词语较少的情况,其中字体的大小和颜色,也可以根据提供的类别value值自行设置(本文代码是写死的)。
option = {
grid: {
left: '10%',
top: 5,
right: '10%',
bottom: 5,
},
itemStyle: {
color: 'rgba(255,255,255,0)',
},
tooltip: {
show: true,
trigger: 'item',
},
series: [
{
type: 'graph',
layout: 'force', //引导布局
label: {
show: true,
color: 'auto',
},
data: [{ name: '年久失修', size: 18, color: '#3B8BFF', x: 60, y: 32 },
{ name: 'xxx1', size: 16, color: '#70aeb4', x: 30, y: 50 },
{ name: '开发过度', size: 18, color: '#3059F7', x: 50, y: 80 },
{ name: 'xxx2', size: 14, color: '#559399', x: 104, y: 86 },
{ name: '泥头车过重', size: 22, color: '#B4FFFC', x: 90, y: 54 },
{ name: '地形原因', size: 17, color: '#C36D6D', x: 120, y: 70 },
{ name: '天气原因', size: 16, color: '#77BFFF', x: 164, y: 48 },
{ name: 'xxx3', size: 16, color: '#3059F7', x: 174, y: 75 },
{ name: '质量管控', size: 20, color: '#FCD67A', x: 156, y: 30 },
{ name: 'xxx4', size: 15, color: '#3059F7', x: 112, y: 24 }].map((item) => ({
name: item.name,
// draggable: false,
itemStyle: {
color: 'rgba(255,255,255,0)',
},
value: item.val,
x: item.x,
y: item.y,
fixed: true,
label: {
color: item.color,
fontSize: item.size,
},
})),
},
],
};