首页echarts词云图代码

echarts词云图代码

时间: 2023-06-22 10:28:55 浏览: 110

echarts中词云图js

这个js是配着我的博客来的，教大家怎么在新版echarts下构建自己的词云图

以下是一个简单的 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:400px;"></div>  <script type="text/javascript"> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('wordcloud')); // 指定图表的配置项和数据 var option = { series: [{ type: 'wordCloud', // 词云图的位置和大小 left: 'center', top: 'center', width: '80%', height: '80%', // 词云图的形状 shape: 'circle', // 词云图中的文字 text: [ {name: 'JavaScript', value: 100}, {name: 'Python', value: 80}, {name: 'Java', value: 70}, {name: 'C++', value: 50}, {name: 'PHP', value: 40}, {name: 'Ruby', value: 30}, {name: 'Go', value: 20}, {name: 'Swift', value: 10}, ], // 词云图中文字的样式 textStyle: { fontFamily: 'sans-serif', fontWeight: 'bold', fontSize: function (value) { return value.value / 2; } } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 运行以上代码，即可在浏览器中看到一个简单的 echarts 词云图。需要注意的是，以上代码中的 `text` 数组中每一项都是一个对象，其中 `name` 属性表示文字的内容，`value` 属性表示该文字在词云图中的权重大小。

阅读全文