介绍

根据自己定义Echarts词云图背景图,词云图可方便的对词组进行可视化的显示。

效果图

一 安装

npm install echarts-wordcloud

注意Echarts5.0的版本要对应echarts-wordcloud的2.0版本,注意Echarts4.0的版本要对应echarts-wordcloud的1.0版本。

二 使用

        1. 引入

                import "echarts-wordcloud/dist/echarts-wordcloud";

2. 代码实现

// 初始化echartsinitEcharts(arr) {let symbolUrl = 'data:image/png;base64,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';let myChart = this.$echarts.init(document.getElementById('cytEcharts'));let data = [];for(let i in arr) {let item = arr[i];data.push({name: item.jg || item.nation,value: item.perNum})}const colorList = ['#3a96f5','#5faaf7','#78bafe','#1563f2','#add2f8','#e24bf4','#1acaff','#ffde00','#89fda5'];var maskImage = new Image();maskImage.src = symbolUrl;let option = {// backgroundColor: '#0A2E5D',tooltip: {show: true},grid: {left: 0,bottom: 0,top: 0,right: 0,},xAxis: {type: "category",show: false},yAxis: {max: 100,show: false},series: [{zlevel: -1,type: 'pictorialBar',name: 'pictorial',silent: true,symbol: 'image://' + symbolUrl, //按背景渲染云词symbolSize: ['95.2%', '100%'],symbolPosition: 'center',barWidth: '100%',barMaxWidth: '100%',itemStyle: {normal: {opacity: 0 //自己项目中这里可以设置0全透明,然后可以写一个div背景加载一个美化过的云图片,重合放在这个图表下面。}},data: [{value: 100}]},{type: 'wordCloud',sizeRange: [12, 42],rotationRange: [0, 0],maskImage: maskImage,textPadding: 0,gridSize: 10, //用于标记画布可用性的网格大小(以像素为单位)//字距越大,字距越大。width: '95%',height: '99.8%',left: 'center',top: 'center',drawOutOfBound: false,textStyle: {normal: {fontFamily: "sans-serif",color: function() {let index = Math.floor(Math.random() * colorList.length);return colorList[index];}}},data: data},]}myChart.setOption(option);this.myChart = myChart;setTimeout(() => {window.addEventListener("resize", () => myChart.resize());}, 200);},

3. 注意点

a. 背景图必须是黑色的 这个只是限制文字的显示位置

b. 背景色可以不显示

itemStyle: {normal: {opacity: 0 //自己项目中这里可以设置0全透明,然后可以写一个div背景加载一个美化过的云图片,重合放在这个图表下面。}
},

c. 加上自己的图片 设置背景就行

<div class="fxypContent"v-loading="jzrsffxLoading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"
><div class="echartsbox"><div id="cytEcharts" style="width: 100%; height: 100%;"></div></div>
</div><style scoped>
.echartsbox {width: 100%;height: 100%;background: url('../../../../assets/img/jzrsffx.png') no-repeat center center;background-size: 90% 90%;
}</style>

echarts 词云图使用 + vue相关推荐

  1. 关于Echarts词云图自定义形状如何实现

    关于Echarts词云图如何实现自定义形状 文章目录 关于Echarts词云图如何实现自定义形状 前言 一.前期准备 二.形成步骤 1.转化图片为base64 2.填入代码,实现形状 前言 因为这段时 ...

  2. Echarts词云图

    水果店词云图 <!DOCTYPE html> <html> <head><meta charset="utf-8"><titl ...

  3. echarts词云图形状_使用pyecharts绘制词云图-淘宝商品评论展示

    一.什么是词云图? 词云图是一种用来展现高频关键词的可视化表达,通过文字.色彩.图形的搭配,产生有冲击力地视觉效果,而且能够传达有价值的信息. 制作词云图的网站有很多,简单方便,适合小批量操作. BI ...

  4. echarts词云图实现

    先看效果 先装所需的依赖 npm i echarts npm i echarts-wordcloud 这里我写成了一个组件,在项目多个地方使用 <template> <div> ...

  5. echarts词云图形状_怎么用Python画出好看的词云图?

    相信很多人在第一眼看到下面这些图时,都会被其牛逼的视觉效应所吸引,这篇文章就教大家怎么用Python画出这种图. 前期准备 上面的这种图叫做词云图,主要用途是将文本数据中出现频率较高的关键词以可视化的 ...

  6. echarts词云图形状_用Wordcloud生成指定形状的词云图

    wordcloud是Python扩展库中一种将词语用图片表达出来的一种形式,通过词云生成的图片,我们可以更加直观的看出某篇文章的故事梗概. 首先贴出一张词云图(以哈利波特小说为例): 在生成词云图之前 ...

  7. echarts词云图形状_用Python 3.8绘制词云图就这么20行代码

    艾莎为了寻找父母遇难的真相,以及自己魔力的来源,她与安娜.克斯托夫.驯鹿斯特与雪宝一行远走阿伦戴尔王国,去北方寻找这两个问题的答案,途中发生了一些冒险故事-- 电影<冰雪奇缘2>无论是美轮 ...

  8. echarts词云图形状_词云图在自然语言中的应用,可以如此炫酷!

    词云图,也叫文字云,是对文本中出现频率较高的"关键词"予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨. 一.在线生成词云图 1 ...

  9. vue实现echarts词云图业务【详细配置版】

最新文章

  1. LeetCode Python题解(二)----排序
  2. Cissp-【第3章 安全工程】-2021-2-20(248页-268页)
  3. [Android]用架构师角度看插件化(2)-Replugin 唯一hook点
  4. Qt 解决MySQL 中文乱码问题
  5. 针对Selenium环境搭建的一些小解说
  6. ThreadPool的使用
  7. ATM + 购物商城程序
  8. 数字图像处理--图像梯度的基本原理
  9. by group 累加中文字段_EF 求和 GroupBy多个字段
  10. 程序员养生(01) -- 心态
  11. mysql 分库分表 后怎么操作,MySQL要分表分库怎么进行数据切分?
  12. 应用程序拒绝访问_让你的ASP.NET Core应用程序更安全
  13. linux中iptables乱码,xshell连接CentOS6.5 iptables或ls 输出乱码-Go语言中文社区
  14. domain or business logic
  15. Java前端和后端的区别
  16. 转载+收藏 数理化地生常用软件
  17. 微软官方office教程和微软官方office模板
  18. 使用URLOS在linux系统中极速部署NFS共享存储服务
  19. 2019年中国大学生计算机设计大赛--心得总结
  20. shape用法的详细举例

热门文章

  1. 基于LBS的六边形热力图算法
  2. 微信分享解决wx not defined
  3. 哈工大的计算机考研分数线,哈尔滨工业大学2009年计算机考研复试分数线
  4. 升压减压以及充电电路设计
  5. Java基于Redis实现“附近的人”(含源码下载)
  6. 基于机器视觉的移动消防机器人(一)--功能设计
  7. 【第三章】MCS-51指令系统
  8. 8分频verilog线_任意分数分频Verilog实现
  9. python 可视化 ploty 画3dmesh网格图
  10. 改善网站安全性的5种方法