echarts --- 词云图

最新推荐文章于 2024-07-24 14:12:36 发布

Hyit_ZY

最新推荐文章于 2024-07-24 14:12:36 发布

阅读量1.1k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Hyit_ZY/article/details/131044155

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在AngularCLI8项目集成Echarts4时，处理词云图的绘制问题。由于新版本不直接支持wordCloud类型，需要额外安装echarts-wordcloud插件。配置包括sizeRange、rotationRange等参数，并提供了示例代码展示词云图的生成方法。

摘要由CSDN通过智能技术生成

上周做数据统计的大屏展示，其中涉及到词云图。

词云图：由词标签/维度和词大小/度量组成。

angular cli8 + echarts4 (这是之前的项目了)。

只安装echarts，中已经不可以直接用 type: 'wordCloud' 去绘制词云图了，需要额外安装echarts-wordcloud 这里选择适合自己的版本安装就可以了。

需要引用：

import * as echarts from 'echarts';

import "echarts-wordcloud/src/wordCloud.js";

options的配置项可以按文档和自己本身的需求进行设置。

这边直接贴上我自己的代码。

let option =  {
          series: [{
            type: 'wordCloud',
            sizeRange: [15, 80],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 8,
            shape: 'pentagon',
            width: '100%',
            height: '100%',
              textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 256),
                            Math.round(Math.random() * 256),
                            Math.round(Math.random() * 256)
                        ].join(',') + ')';
                    },
                    fontFamily: 'sans-serif',
                    fontWeight: 'normal'
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: this.wordcloudData
          }]
 }

效果图：