echarts词云代码
时间: 2024-05-24 20:08:47 浏览: 91
ECharts 是百度开源的一个数据可视化库,提供了很多实用的图表类型,包括词云。下面是一个简单的 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>
<!-- 为 echarts 准备一个具备大小(宽高)的 DOM -->
<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',
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: 'CSDN',
value: 10000,
},
{
name: 'Python',
value: 6181,
},
{
name: 'Java',
value: 4386,
},
{
name: 'JavaScript',
value: 4055,
},
{
name: 'PHP',
value: 2467,
},
{
name: 'Ruby',
value: 2244,
},
{
name: 'C++',
value: 1898,
},
{
name: 'C#',
value: 1484,
},
{
name: 'Go',
value: 1112,
},
{
name: 'Swift',
value: 965,
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
在这个例子中,我们使用了 ECharts 的 `wordCloud` 类型来绘制词云图,并通过 `data` 属性指定了词云中的数据。同时,我们还可以通过 `textStyle` 属性设置词云中文本的样式,例如字体、颜色等。当然,还有很多其他的配置项可以使用,如果您有兴趣可以去查看 ECharts 的文档。
阅读全文