echarts 词云无法正常显示问题

原创 于 2024-10-24 10:46:08 发布 · 637 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
笔记

当前文章被收录于：

笔记
6 篇文章 0 人学习
订阅专栏 查看详情

百度了好多，很多文章都没解决我这个问题，不过了解到部分原因和很多解决方式，以下是我的问题解决办法

  1. 解决的时候首先确定自己的 echarts 版本，之后对应还得下echarts-wordcloud一个依赖
    echarts4x 使用echarts-wordcloud@1x版本
    echarts5x 使用echarts-wordcloud@2x版本

  2. 还没解决的话试试跟我一样的解决方式
    在 main.js 文件里引入 import ‘echarts-wordcloud’

    欢迎在评论里补充别的解决方式

标签
#1024程序员节 #echarts
echarts 5.x 版本词云无法正常显示问题
Cahier
03-26 2926
将echarts版本设置为5.01 echarts-wordCloud 版本使用2.0 设置颜色的时候去掉normal ps: "textStyle": { "color": "#5b9bd5" }
Echarts—词云库（echarts-wordcloud）配置详解和使用（可自定义形状）
前端探险家的博客
06-14 4万+
我们经常会看到一些网站或者页面有一堆五颜六色的词汇的聚在一块，有大有小的散落着，看着挺好看的；也许项目中也会涉及到显示一些关键词之类的需求，这个时候也可以用词云库（echarts-wordcloud）来实现；echarts-wordcloud是基于echarts的一个词云库，但是在echart官网中的配置相中却没有关于他的介绍，下面我们就来一起慢慢探索并能手到擒来的使用它；1.下载图片首先要找到一张图片，为了成功率较高，随意对图片也是有要求的，图片一定要是矢量图，并且最好为黑色填充，当然其他颜色也行。
echarts 简单词云制作，自定义图案词云echarts-wordcloud.js
唐策的博客
07-19 3万+
第一种、简单 一、html <div id='patent-hot-word1'></div> <script src="public/echarts/echarts.js"></script> <script src="public/echarts/echarts-wordcloud.js"></script> 二、js...
Vue使用echarts-wordcloud生成词云
孔彬的技术专栏
10-17 2万+
介绍 Echarts词云控件，可方便的对词组进行可视化的显示。 源码工程地址：WordCloud 安装 npm install echarts npm install echarts-wordcloud 使用方式 let echarts = require('echarts/lib/echarts') require('echarts-wordcloud'); import 'echarts/t...
Echarts词云wordcloud实践
ssjdoudou的博客
02-06 1万+
官方地址https://github.com/ecomfe/echarts-wordcloud demo展示地址https://www.guanacossj.com/JiaBlog/contact-us/ 效果 引用 <script src="..echarts-wordcloud.js"></script> <script src="..echarts...
使用echarts词云
xy405580364的博客
03-10 2351
参考： echarts-wordcloud.min.js引入 option参考 引入 <script type="text/javascript" src="/js/echarts/echarts.min.js"></script> <script type="text/javascript" src="/js/echarts/echarts-wordcloud...
eechart echarts-wordcloud 生成人物词云图 词云 词少、形状问题、 解决办法
热门推荐
csy_119的博客
03-26 7万+
1. git官方地址： https://github.com/ecomfe/echarts-wordcloud 2. 需要 下载echarts包 和 echarts-wordcloud包 【npm install echarts 、npm install echarts-wordcloud】 const treeDataURI = ''; // 这里是图片的base64格式，为了方便阅读。我...
echarts的词云图表类型有哪些_echarts实现词云图表
weixin_42165018的博客
01-17 1103
前段时间在开发过程中用 echarts 开发了一些图表，当做到词云的时候发觉 echarts-wordcloud 插件的颜色配置项不生效。在网上查了不少资料，好多人说 echarts4 和 echarts-wordcloud 插件不兼容了，然后还提供了一些优雅降级方案，让 echarts3 和 echarts4 同时在项目里运行。但是后来我研究发现其实 echarts4 是可以完美兼容 echar...
Python数据可视化——Python创建词云创建心形词云（MacWindows都可以运行）
alike_u的博客
04-04 2101
词云是一种流行的可视化技术，用于显示文本数据中最常出现的词。在词云中，词的大小与其在文本中出现的频率成正比。词云通常用于分析和展示文本数据，例如社交媒体、新闻报道或文学作品中的关键词。形状词云是一种特殊类型的词云，它可以根据指定的形状生成。这种类型的词云非常有趣且具有吸引力，可以为您的数据可视化项目增添趣味。炫酷程度Max：形状词云简直就是时尚达人的最爱，各种创意形状让你的文本信息看起来更有吸引力，简直让人无法抗拒！专业逼格：形状词云可以用与数据集相关的形状来增强主题，让你的词云逼格瞬间翻倍。
echarts实现词云图表，及参数配置详解
m0_67403272的博客
08-01 5657
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。最近，公司要实现一个关键词的统计显示，于是想起了词云图，记录一下，效果图如下所示。也可以直接去我的博客下载打包好的所有脚本和html。...
echarts字符云（词云）
xiaojing的博客
10-21 5万+
下面是一个小鸟形状的词云，可以在iconfont中下载（最好是填充的）图案，转为base64，就可以用来生成有图案的词云了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WordCloud Demo</title&gt...
echarts词云
19年8月小结
08-05 1895
<script> // import echarts from 'echarts'; var echarts = require('echarts'); require('echarts-wordcloud');//引入词云 import store from "../../../store/store.js"; import { mapMutations } from 'v...
echarts 实现词云效果(worldcloud)
洋气人小屋
09-11 5693
工作中需要展示一些节目名的频次分布，思考后决定使用词云这种形式。而现在echarts官网示例中已经找不到worldcloud的示例了，网上找到的基本也不能使用，最后还是从git上找到可以使用的，记录一下。 词云效果 会将所有传出的词按照频次越高字体越大这种形式展现，一目了然。 代码展示 引入指定worldcloud和echarts文件 <script src='./echarts.simple.js'></script> <script src='./echarts
Vue3 echarts tooltip 无法正常显示
黄彪博客
03-17 2934
在开发可视化项目的时候，使用的是 Vue2 自定义的组件（只需要传入 echarts options）就可以联动产生效果，但是，在开发项目使用的是 vue3+vite 技术栈，反复比对 options 没有问题，但是就是没有效果。最终，将自定义组件改为 Vue3的模式，就正常了代码中的备注方便以后自己理解
产品经理：你能不能让词云动起来？
快跑啊小卢的博客
09-28 6219
☀️ 前言 事情是这样的，前段时间拿到公司的数据大屏原型图让我一天内把一整个页面做出来。 简单看了看，就是一个3840 * 1840的大屏然后几个列表几个图例看起来也没有多复杂。 唰！很快啊加了一会班把整个页面调整好了信心十足拿给产品经理看。 产品经理皱了皱眉头：你这词云不会动啊？？ ????️ 之前的效果 听到这话我发现情况不对，我寻思着这原型图的词云也看不出他要没要求我动啊，而且明明我做的是会动的呀！ ???? 关系图 一开始我用的是echarts的graph关系图，这种图的特点是一开始会因
基于echarts的词云
楚雁潮prince
12-28 3万+
基于echarts的词云 内容摘要：基于echarts3的词云。 效果图： 词云是基于echarts的扩展，我默认你了解熟悉echarts的格式和实例化方法。 代码如下： series: [ { type: 'wordCloud', gridSize: 2, sizeRange: [12, 50], rotati
echarts本地调试调用JSON地图无法显示问题处理
lbyyy的专栏
07-04 5953
echarts本地调试调用JSON地图无法显示问题处理本地测试调用JS的MAP都能正常显示，但调用JSON的MAP文件，却无法显示，页面一片空白。一阵代码纠结后，才发现，把代码放WWW服务器上，地图立马显示出来。代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;&lt;head&gt; &lt;meta http-equiv="content-type"...
【echarts】02、echarts-wordcloud实现字符云、词云的效果
汪同学丶的博客
12-02 3032
1、echarts4.x + echarts-wordcloud1.x版本环境下的实现方式 2、echarts5.x + echarts-wordcloud2.x版本环境下的实现方式 开始 一、echarts4.x + echarts-wordcloud1.x 1、实现效果 2、前置资源获取 h
echarts 词云
weixin_43856422的博客
11-20 2795
由于echarts2以后的版本中都没有字符云，所以在使用的时候需要先把字符云组件引入 首先下载字符云 cnpm install echarts-wordcloud //添加字符云，前提要有echarts import 'echarts-wordcloud/dist/echarts-wordcloud' import 'echarts-wordcloud/dist/echarts-wordclou...
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例水泵自动保护电路
最新发布
08-02
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例水泵自动保护电路
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值