- 效果图示
- 下载字符云js链接
- 字符云API详解
-
<html> <head> <meta charset="utf-8"> // echarts CDN <script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script> // 下载wordcloud.js文件 // https://github.com/ecomfe/echarts-wordcloud <script src='./echarts/Wordcloud/echarts-wordcloud.js'></script> </head> <body> <style> html, body{ width: 100%; height: 100%; margin: 0; } #main{ width: 600px; height: 500px; background: rgba(70, 120, 200, 0.2) } </style> <div id='main'></div> <script> var chart = echarts.init(document.getElementById('main')); var option = { tooltip: {}, series: [ { type: 'wordCloud', gridSize: 2, sizeRange: [12, 50], rotationRange: [-90, 90], shape: 'pentagon', width: 600, height: 400, drawOutOfBound: true, textStyle: { normal: { color: function () { return 'rgb(' + [ Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255) ].join(',') + ')'; }, }, emphasis: { shadowBlur: 10, shadowColor: '#333' } }, //数据自己加 data: [ { name: 'Sam S Club', value: 10000, // textStyle: { // normal: { // color: 'black' // }, // emphasis: { // color: 'red' // } // } }, { name: 'Macys', value: 6181 }, { name: 'Amy Schumer', value: 4386 }, ] } ] }; chart.setOption(option); window.onresize = chart.resize; </script> </body> </html>