首页echarts云图自定义样式

echarts云图自定义样式

时间: 2023-11-12 14:00:26 浏览: 99

您可以通过以下步骤来自定义 echarts 云图的样式： 1. 在 echarts 官网下载 echarts.min.js 文件，并在 HTML 文件中引入该文件。 2. 创建一个 div 元素作为 echarts 图表的容器。 3. 使用 echarts.init() 方法初始化图表实例。 4. 使用 setOption() 方法设置图表的配置项和数据。 5. 在配置项中设置 series 中的 wordCloud 属性，通过 textStyle 属性来设置字体样式，通过 shape 属性来设置词云形状，通过 gridSize 属性来设置网格大小等。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts 云图自定义样式</title> <script src="echarts.min.js"></script> </head> <body> <div id="wordCloud" style="width: 600px; height: 400px;"></div> <script> var myChart = echarts.init(document.getElementById('wordCloud')); var option = { series: [{ type: 'wordCloud', shape: 'circle', 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(',') + ')'; } } }, data: [ { name: 'JavaScript', value: 100 }, { name: 'HTML', value: 80 }, { name: 'CSS', value: 70 }, { name: 'Python', value: 60 }, { name: 'Java', value: 50 }, { name: 'C++', value: 40 }, { name: 'PHP', value: 30 }, { name: 'Ruby', value: 20 }, { name: 'Swift', value: 10 } ] }] }; myChart.setOption(option); </script> </body> </html> ```

阅读全文