首页echarts心形词云图代码

echarts心形词云图代码

时间: 2023-06-22 21:29:10 浏览: 76

以下是使用 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="wordCloud" style="width: 600px;height: 600px;"></div> <script> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('wordCloud')); // 定义词云数据 var data = [ {name: 'love', value: 100}, {name: 'happy', value: 90}, {name: 'smile', value: 80}, {name: 'kiss', value: 70}, {name: 'heart', value: 60}, {name: 'forever', value: 50}, {name: 'together', value: 40}, {name: 'beautiful', value: 30}, {name: 'sweet', value: 20}, {name: 'miss', value: 10}, ]; // 配置 echarts 选项 var option = { series: [{ type: 'wordCloud', gridSize: 2, sizeRange: [20, 80], rotationRange: [-45, 45], shape: 'heart', 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(',') + ')'; } } }, data: data }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 注意，要使用心形词云图，需要在 `series` 中指定 `shape: 'heart'`，同时还可以调整词云的其他参数，如 `gridSize`、`sizeRange`、`rotationRange` 等。另外，可以通过 `textStyle` 属性来设置词云的样式，如字体、字重、颜色等。

阅读全文