echarts心形词云图代码
时间: 2023-06-22 07:28:55 浏览: 166
echarts中词云图js
下面是一个简单的echarts心形词云图的代码示例,您可以根据自己的需求进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 心形词云图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 心形词云图数据
var data = [
{name: '爱', value: 100},
{name: '善', value: 80},
{name: '慈', value: 60},
{name: '恕', value: 50},
{name: '智', value: 40},
{name: '忍', value: 30},
{name: '勇', value: 20}
];
// 心形词云图配置
var option = {
series: [{
type: 'wordCloud',
shape: 'heart',
gridSize: 10,
sizeRange: [12, 50],
rotationRange: [-90, 90],
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: data
}]
};
// 初始化心形词云图
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
</script>
</body>
</html>
```
您可以将上述代码复制到本地的HTML文件中运行,即可看到一个简单的心形词云图。
阅读全文