基于echarts做词云图
时间: 2023-10-03 22:04:10 浏览: 116
echarts-词云图
可以使用 echarts-wordcloud 插件来实现基于 echarts 的词云图。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基于echarts做词云图</title>
<!-- 引入echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入echarts-wordcloud插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="myChart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 配置项
var option = {
series: [{
type: 'wordCloud',
shape: 'circle',
left: 'center',
top: 'center',
width: '80%',
height: '80%',
textStyle: {
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(',') + ')';
}
},
data: [
{
name: 'JavaScript',
value: 10000,
textStyle: {
fontSize: 30
}
},
{
name: 'HTML',
value: 8000,
textStyle: {
fontSize: 24
}
},
{
name: 'CSS',
value: 6000,
textStyle: {
fontSize: 18
}
},
{
name: 'Python',
value: 5000,
textStyle: {
fontSize: 16
}
},
{
name: 'Java',
value: 4000,
textStyle: {
fontSize: 14
}
},
{
name: 'C++',
value: 3000,
textStyle: {
fontSize: 12
}
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
在这个示例中,我们引入了 echarts 和 echarts-wordcloud 的 JavaScript 文件,并创建了一个 `div` 元素作为 echarts 图表的容器。接着,我们使用 `echarts.init` 方法初始化 echarts 实例,并使用 `option` 对象配置了词云图的样式、字体、数据等属性。最后,使用 `myChart.setOption` 方法将配置项应用到 echarts 实例中并显示图表。
你可以根据自己的需求修改配置项,例如调整词云图的大小、形状、字体、数据等。
阅读全文