echarts词云图配置
时间: 2024-06-12 22:02:15 浏览: 106
ECharts是一个基于JavaScript的开源可视化库,提供了多种数据可视化方式,其中包括词云图。下面是一个基本的echarts词云图的配置示例:
首先,需要在HTML文件中引入echarts库:
```
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
```
然后,可以通过以下代码创建一个基本的词云图:
```
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
series: [{
type: 'wordCloud',
shape: 'circle',
left: 'center',
top: 'center',
width: '70%',
height: '80%',
right: null,
bottom: null,
sizeRange: [12, 50],
rotationRange: [-90, 90],
rotationStep: 45,
gridSize: 8,
drawOutOfBound: false,
textStyle: {
normal: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [{
name: 'echarts',
value: 10000
}, {
name: 'wordcloud',
value: 6181
}, {
name: '可视化',
value: 4386
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
以上代码中的option对象是该词云图的配置项。其中,type属性为'wordCloud'表示该图表类型为词云图。通过调整其他属性,可以实现不同的词云效果。
阅读全文