大屏展示中某一模块需要实现词云效果
此处默认已经安装echarts
echarts配置项为
options: {
series: [
{
type: 'wordCloud',
// left: '-5%', // X轴偏移量
top: '5%', // Y轴偏移量
bottom: '5%',
width: '100%', // canvas宽度大小
height: '100%', // canvas高度大小
sizeRange: [12, 22], // 词典字体大小范围配置
rotationRange: [0, 0], // 词典字体旋转角度配置,默认不旋转
gridSize: 20, // 词典字体间距配置
layoutAnimation: true, // 为false词典过度会阻塞
textStyle: { // 单独配置某个词典样式
color: 'rgba(255, 255, 255, 0.6)'
},
// 渲染词典数据
data: [
{
value: '12', // 词典大小配置
name: '90%流动人口', // 词典名称配置
textStyle: { // 单独配置某个词典样式
shadowBlur: 4,
shadowOffsetY: 14,
color: '#ffffff'
}
},
{ value: '3', name: '商业形态复杂' },
{ value: '9', name: '建筑不规范' },
{
value: '7',
name: '拆迁安置小区',
textStyle: { // 单独配置某个词典样式
color: '#ffffff'
}
},
{ value: '6', name: '2004年建' },
{ value: '8', name: '设施老旧' },
{ value: '5', name: '商住一体' },
{ value: '4', name: '人员密集' },
{ value: '3', name: '消防设施不足' }]
}
]
}
此时并不会生效,只会显示标题
这个时候需要安装wordCloud的依赖,先查看自己的echarts版本
如果大于5.0则npm install echarts-wordcloud
安装(默认安装2.0的)
如果是4.x版本的就需要 npm install echarts-wordcloud@1
然后main.js 注入
import 'echarts-wordcloud'
配置完后重新跑一遍项目