千家信息网

vue中使用词云图的实现方法

发表于:2024-11-23 作者:千家信息网编辑
千家信息网最后更新 2024年11月23日,这篇文章将为大家详细讲解有关vue中使用词云图的实现方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在vue中, 查找到有两种方法来实现词云图, 分
千家信息网最后更新 2024年11月23日vue中使用词云图的实现方法

这篇文章将为大家详细讲解有关vue中使用词云图的实现方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

在vue中, 查找到有两种方法来实现词云图, 分别是echarts 和 highcharts

Echarts:

注意,wordcloud对应的echarts版本有要求:echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4

需要下载echartsjs 和 wordcloud, 全局注册引用echarts

       npm install echarts@5        npm install echarts-wordcloud@2

无遮罩层的词云图↑

有遮罩层的词云图↑

Highcharts

下载包

npm install highcharts@7.2.1

echarts 和 highcharts 都可以在vue中实现词云图. 但是如果使用echarts的话, 需要当前的echarts进行升级或降级才能实现字体多颜色, 而highcharts则不需要. 自定义形状highcharts暂时还没探究, 需要的可以自行查找。

关于vue中使用词云图的实现方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

0