echarts词云图简单代码
时间: 2023-07-09 08:23:24 浏览: 79
以下是一个基本的 ECharts 词云图的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 词云图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
series: [{
type: 'wordCloud',
gridSize: 20,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'circle',
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
].join(',') + ')';
}
}
},
data: [
{
name: 'JavaScript',
value: 10000
},
{
name: 'Java',
value: 6181
},
{
name: 'Python',
value: 4386
},
{
name: 'PHP',
value: 4055
},
{
name: 'Ruby',
value: 2467
},
{
name: 'C++',
value: 2244
},
{
name: 'C#',
value: 1898
},
{
name: 'HTML',
value: 1484
},
{
name: 'CSS',
value: 1112
},
{
name: 'TypeScript',
value: 965
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
该代码中,我们通过 `echarts.init` 方法来初始化一个 ECharts 实例,然后通过 `option` 对象来配置词云图的样式和数据。其中,`series.type` 属性被设置为 `'wordCloud'`,表示这是一个词云图。`series.data` 数组中的每个元素都是一个对象,代表一个词语及其出现的次数。`textStyle.color` 属性被设置为一个函数,用于为每个词语生成随机的颜色。
在页面加载完毕后,我们调用 `myChart.setOption(option)` 方法来渲染图表。
阅读全文