首页echarts心形词云图代码

echarts心形词云图代码

时间: 2023-06-22 19:28:55 浏览: 171

下面是一个简单的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文件中运行，即可看到一个简单的心形词云图。

阅读全文