echarts词云用js怎么实现
时间: 2023-06-13 13:06:51 浏览: 263
要使用 ECharts 实现词云,需要先引入 ECharts 库。可以通过以下代码在 HTML 文件中引入 ECharts:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
```
接下来,需要准备一个用于显示词云的 HTML 元素。可以使用以下代码创建一个 div 元素:
```html
<div id="wordcloud" style="width: 600px;height:400px;"></div>
```
然后,在 JavaScript 文件中,可以通过以下代码创建词云:
```javascript
// 创建词云图表
var myChart = echarts.init(document.getElementById('wordcloud'));
// 设置词云的配置项
var option = {
series: [{
type: 'wordCloud',
shape: 'circle',
left: 'center',
top: 'center',
width: '80%',
height: '80%',
right: null,
bottom: null,
sizeRange: [12, 60],
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,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'JavaScript',
value: 6181,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'HTML',
value: 4386,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'CSS',
value: 4055,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'Vue.js',
value: 2467,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'React',
value: 2244,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'AngularJS',
value: 1898,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
},
{
name: 'TypeScript',
value: 1484,
textStyle: {
normal: {
color: 'black'
},
emphasis: {
color: 'red'
}
}
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这里的代码使用 `series` 配置项中的 `type` 属性设置词云类型为 `wordCloud`,然后设置 `data` 属性为显示的数据,包括词语名称和对应的权重值。 `textStyle` 属性设置词语的样式。
词云的其他配置项还包括词语的形状、大小、排列方式、字体等,可以根据需要进行设置。
阅读全文