echarts词云图简单代码
时间: 2023-07-09 07:23:22 浏览: 48
以下是一个简单的 echarts 词云图代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 词云图示例</title>
<!-- 引入 echarts.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 在这里添加一个具有一定宽高的 DOM 元素,用于显示图表 -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '词云图示例'
},
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() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')';
}
},
data: [
{
name: 'ECharts',
value: 10000
},
{
name: 'JavaScript',
value: 6181
},
{
name: '数据可视化',
value: 4386
},
{
name: '可视化',
value: 4055
},
{
name: '图表',
value: 2467
},
{
name: '图形',
value: 2244
},
{
name: '图像',
value: 1898
}
]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
在这个示例中,我们使用了 echarts.js 库,并创建了一个具有一定宽高的 DOM 元素来显示词云图。然后,我们使用 `echarts.init` 方法创建了一个 echarts 实例,并使用 `setOption` 方法设置了图表的配置项和数据。在这个示例中,我们绘制了一个词云图,用于展示不同词语的出现频率。词云图的样式可以通过 `textStyle` 属性进行设置,例如设置字体、字号、字体颜色等。