首页echarts词云图简单代码

echarts词云图简单代码

时间: 2023-07-09 16:23:24 浏览: 84

以下是一个基本的 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)` 方法来渲染图表。

阅读全文