<template>
<div id="ciyun-charts" />
</template>const myChart = (this as any).$echarts.init(
document.getElementById('ciyun-charts')
)option处理
gridSize // 用来调整词之间的距离
sizeRange // 用来调整字的大小范围Math.round(Math.random() * 255) // 生成随机颜色 title: {
text: '',
x: 'center'
},
backgroundColor: '#fff',
series: [
{
type: 'wordCloud',
// 用来调整词之间的距离
gridSize: 30,
// 用来调整字的大小范围
sizeRange: [10, 40],
rotationRange: [0, 0],
// 随机生成字体颜色
textStyle: {
normal: {
color: function() {
return (
'rgb(' +
Math.round(Math.random() * 255) +
', ' +
Math.round(Math.random() * 255) +
', ' +
Math.round(Math.random() * 255) +
')'
)
}
}
},
left: 'center',
top: 'center',
right: null,
bottom: null,
// 画布宽
width: '95%',
// 画布高
height: '90%',
// 是否渲染超出画布的文字
drawOutOfBound: false,
// 数据
data: [
{name: '西安',value:12},
{name: '南京',value:34},
{name: '济南',value:20},
{name: '大连',value:18},
{name: '兰州',value:24}
]
}
]如图：
版权声明：本文为m0_60370017原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。