工作中需要展示一些节目名的频次分布,思考后决定使用词云这种形式。而现在echarts官网示例中已经找不到worldcloud的示例了,网上找到的基本也不能使用,最后还是从git上找到可以使用的,记录一下。

词云效果

会将所有传出的词按照频次越高字体越大这种形式展现,一目了然。
demo效果

代码展示

引入指定worldcloud和echarts文件

	<script src='./echarts.simple.js'></script>
    <script src='./echarts-wordcloud.js'></script>

worldcloud实现

   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() * 160),
                           Math.round(Math.random() * 160),
                           Math.round(Math.random() * 160)
                       ].join(',') + ')';
                   }
               },
               emphasis: {
                   shadowBlur: 10,
                   shadowColor: '#333'
               }
           },
           data: data
       } ]
   };

   chart.setOption(option);

   window.onresize = chart.resize;

示例demo下载地址

demo下载地址

git地址

echarts-worldcloud girhub地址

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐