ECharts词云图(案例一)+配置项详解

ECharts词云图(案例一)+配置项详解

ECharts 是一款由百度团队开发的基于 JavaScript 的开源可视化图表库,它提供了丰富的图表类型,包括常见的折线图、柱状图、饼图等,以及一些较为特殊的图表,如词云图。从版本 5.0 开始,ECharts 引入了对词云图的支持,通过 echarts-wordcloud 插件来实现。本篇博客将详细讲解 ECharts 词云图的配置项。

引入依赖

首先,确保你的页面引入了 ECharts 的主文件和词云图插件文件。以下是 HTML 页面的基本结构:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ECharts 词云图示例</title><link rel="stylesheet" href="../reset.css"><style>.EChartBox {width: 500px;height: 300px;}</style>
</head>
<body>
<!-- 词云图容器 -->
<div id="ECharts" class="EChartBox"></div><!-- 引入 jQuery,ECharts 和词云图插件 -->
<script src="../jquery.min.js"></script>
<script src="../echarts.js"></script>
<script src="../echarts-wordcloud.js"></script>
<script src="index001.js"></script>
</body>
</html>

请注意,这里使用的 ECharts 版本是 5.2.0,词云图插件版本是 2.0。

配置项详解

在 JavaScript 中,我们通过配置项来定义词云图的各项属性。以下是一些主要的配置项:

1. tooltip

  • show: 是否显示提示框。
  • borderColor: 提示框边框颜色。
  • borderWidth: 提示框边框宽度。
  • padding: 提示框内边距。
  • confine: 是否将提示框限定在图表区域内。
  • backgroundColor: 提示框背景色。
  • textStyle: 提示框文字样式。

2. series

  • type: 系列类型,对于词云图,应设置为 'wordCloud'
  • shape: 词云形状,可以是 'circle'(圆形)、'cardioid'(心形)、'diamond'(菱形)、'pentagon'(五边形)等。
  • left, top, right, bottom, width, height: 控制词云图在容器内的位置和大小。
  • sizeRange: 文字大小范围。
  • rotationRange: 文字旋转角度范围。
  • gridSize: 网格大小,影响词间距。
  • drawOutOfBound: 是否允许词超出画布范围。
  • layoutAnimation: 是否启用布局动画。
  • textStyle: 全局文本样式,包括字体、颜色等。
  • data: 词云数据,每个数据项应包含 name(词云中显示的文字)和 value(影响文字大小的值)。

示例代码

./index.js

$(function () {// 初始化 ECharts 图表var myChart = echarts.init(document.getElementById('ECharts'));// 定义词云数据const list = [{value: 50, // 值,将影响词云中文字的大小name: '企联网', // 词云中显示的文字// 定义文本样式,如阴影效果和颜色textStyle: {shadowBlur: 4,shadowColor: '#ECEFFF',shadowOffsetY: 14,color: '#73DDFF',},}, // 50{value: '30', name: '智农通'},{value: '29', name: 'OPPO'},{value: '28', name: 'HONOR'},{value: '27', name: '红米'},{value: '26', name: '小米'},{value: '25', name: '美图'},{value: '24', name: 'ONEPLUS'},{value: '23', name: '魅族'},{value: '22', name: '红手指'},{value: '21', name: 'SAMSUNG'},{value: '20', name: '金立'},{value: '16', name: 'BLACKBERRY'},{value: '15', name: '诺基亚'},{value: '14', name: '锤子'},{value: '13', name: '大疆'},{value: '12', name: '361'},{value: '11', name: '摩托罗拉'},{value: '10', name: '联想'},{value: '9', name: '玩家国度'},]option = {tooltip: {show: true, // 显示提示框// 配置提示框的样式borderColor: '#fe9a8bb3',borderWidth: 1,padding: [10, 15, 10, 15],confine: true,backgroundColor: 'rgba(255, 255, 255, .9)',textStyle: {color: 'hotpink', // 提示框文字颜色lineHeight: 22, // 文字行高},// 额外的 CSS 样式extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'},series: [{type: 'wordCloud', // 系列类型为词云图shape: 'pentagon', // 词云形状为五边形left: 'center', // 词云水平居中top: 'center', // 词云垂直居中width: '100%', // 词云宽度height: '100%', // 词云高度// 定义词云中文字大小的范围sizeRange: [14, 50],// 定义词云中文字的旋转范围rotationRange: [0, 0],rotationStep: 0,gridSize: 25, // 网格大小drawOutOfBound: false, // 不允许词超出画布范围layoutAnimation: true, // 启用布局动画textStyle: {fontFamily: 'PingFangSC-Semibold', // 字体fontWeight: 600, // 字重// 定义文字颜色的回调函数,随机选择颜色color: function () {let colors = ['#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#73DDFF', '#58D5FF'];return colors[parseInt(Math.random() * colors.length)];},},emphasis: {focus: 'none', // 高亮状态下不聚焦任何词},data: list, // 词云数据},],};myChart.setOption(option);});

完整代码和依赖

点我下载完整代码和依赖

结语

ECharts 的词云图配置项非常灵活,可以满足各种个性化的展示需求。通过调整不同的配置项,你可以创建出既美观又具有表现力的词云图。本文以 ECharts 5.2.0 版本为例,不同版本的配置项可能略有差异,建议参考对应版本的官方文档。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32512.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

带百分比的进度条控件(ProgressBar)源码

带百分比的进度条控件&#xff08;ProgressBar&#xff09;&#xff1a; 源码下载地址&#xff1a;https://download.csdn.net/download/wgxds/89472915

打破数据分析壁垒:SPSS复习必备(六)

一、数据的报表呈现 1.报表概述 (1).SPSS中的报表功能 1&#xff09;Base 模块 2&#xff09;Custom Tables 模块 3) Original Tables 模块 (2).报表的基本绘制步骤 步骤一:确定基本结构 步骤二:使用对话框绘制表格的基本结构 步骤三:完善细节 步骤四:添加其余变…

Javase.图书管理系统基本框架

图书管理系统基本框架 1.核心类介绍2. book包详解2.1 Book 类2.1.2 代码展示2.1.2 代码解析 2.2 BookList 类2.2.2 代码展示2.2.2 代码解析 2.3Book类和BookList类的联系 3. 用户角色与管理3.1 User 类3.1.1 代码展示3.1.2 代码解析 3.2 adminUser 类3.2.1 代码展示3.2.2代码解…

我做了个Hexo博客

最近花了两个周末的时间边学变做Hexo博客&#xff0c;最终成品地址如下&#xff1a; https://blog.mybatis.io 下面先说说做博客的经过&#xff0c;想做Hexo博客一开始是因为看到了 hexo-theme-icarus 主题&#xff0c;这个主题样式如下&#xff1a; 首页 内容页 这个主题是…

KEIL5软件仿真观察PIN脚电平(软件仿真逻辑分析仪的使用)

仿真前的调整&#xff1a; 例&#xff1a;STM32F103C8T6 &#xff08;如果是F4的板子稍微对着修改一下&#xff09; 逻辑分析仪的使用 输入 PORTA.6( PORAT(哪一组).(哪一个引脚) )

通过rpm命令查看特定rpm包的安装时间

通过rpm命令查看特定rpm包的安装时间 命令解读 [aqjgmaster ~]$ rpm -q --qf "%{INSTALLTIME}\n" kernel 1681468253 [aqjgmaster ~]$ [aqjgmaster ~]$ date -d rpm -q --qf "%{INSTALLTIME}\n" kernel Fri Apr 14 18:30:53 CST 2023 [aqjgmaster ~]$ [a…

已解决java.rmi.AlreadyBoundException异常的正确解决方法,亲测有效!!!

已解决java.rmi.AlreadyBoundException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查重复绑定情况 解除已有的绑定 优化代码逻辑 使用同步机制 总结 …

基于格网的边缘点检测(python)

1、背景介绍 前文已介绍对点云进行格网处理&#xff0c;可以计算平面点云面积、格网拓扑关系构建&#xff0c;相关博客如下&#xff1a; &#xff08;1&#xff09;点云格网过程可视化&#xff08;C PCL&#xff09;-CSDN博客 &#xff08;2&#xff09;平面点云格网过程及可…

Kimichat使用案例026:AI翻译英语PDF文档的3种方法

文章目录 一、介绍二、腾讯交互翻译TranSmart https://transmart.qq.com/三、沉浸式翻译三、谷歌网页翻译一、介绍 短的文章,直接丢进kimichat、ChatGPT里面很快就可以翻译完成,而且效果很佳。但是,很长的PDF文档整篇需要翻译,怎么办呢? 二、腾讯交互翻译TranSmart https…

VScode如何调节编辑器字体大小

首先&#xff0c;在vscode界面&#xff0c;依照顺序输入“Ctrlk”、“Ctrls”&#xff0c;即可进入键盘快捷方式设定界面。&#xff08;如下图所示&#xff09; 其次&#xff0c;在搜索框中输入“缩小”或者“放大”&#xff0c;就会出现对应的“缩小编辑器字体”或者“放大编…

算法刷题总结

1. 排序算法 1.1 快速排序算法 public abstract class Sort<T extends Comparable<T>> {public abstract void sort(T[] array);protected boolean less(T first, T two) {return first.compareTo(two) < 0;}protected void swap(T[] array, int i, int j) {T…

Python数据分析-糖尿病数据集数据分析

一、研究背景介绍 糖尿病是美国最普遍的慢性病之一&#xff0c;每年影响数百万美国人&#xff0c;并对经济造成重大的经济负担。糖尿病是一种严重的慢性疾病&#xff0c;其中个体失去有效调节血液中葡萄糖水平的能力&#xff0c;并可能导致生活质量和预期寿命下降。。。。糖尿…

CentOS系统查看版本的各个命令

cat /etc/centos-release 查看CentOS版本 uname -a 命令的结果分别代表&#xff1a;当前系统的内核名称、主机名、内核发型版本、节点名、系统时间、硬件名称、硬件平台、处理器类型以及操作系统名称 cat /proc/version 命令用于查看Linux内核的版本信息。执行该命令后&#xf…

Springboot整合MinIO实现系统文件的便捷式管理实例

一、MinIO简介 1.基础描述 MinIO 是一个高性能的对象存储系统&#xff0c;用于存储大量非结构化数据。它以简洁、高效、可靠和高扩展性著称&#xff0c;能够胜任各种数据密集型任务。MinIO 采用了与 Amazon S3 兼容的 API&#xff0c;使得用户无需额外学习即可上手使用。下面…

DNF手游攻略:云手机辅助流光星陨刀详细攻略大全!

DNF手游中&#xff0c;流光星陨刀是鬼剑士的专属神器之一&#xff0c;拥有快速的攻击速度和优秀的物理与法术攻击属性&#xff0c;因其出色的性能和未来升级的潜力&#xff0c;成为广大玩家关注的焦点。 流光星陨刀的背景与起源 流光星陨刀作为鬼剑士的标志性武器之一&#xf…

STM32单片机开发入门(十)SSCOM串口通信助手软件安装及使用提供软件网盘链接

文章目录 一.概要二.SSCOM软件下载安装三.串口通讯配置及应用实例1.串口通讯基本配置2.字符串数据发送和接收的配置操作3.16进制数据发送和接收的配置操作4.定时自动发送数据配置操作5.wifi模块AT指令调试配置操作6.用串口烧录STM32单片机代码配置操作 四.以太网TCP服务器端配置…

【0-1系列】从0-1快速了解搜索引擎Scope以及如何快速安装使用(下)

前言 近日&#xff0c;社区版家族正式发布V2024.5版本&#xff0c;其中&#xff0c;社区开发版系列重磅发布Scope开发版以及StellarDB开发版。 为了可以让大家更进一步了解产品&#xff0c;本系列文章从背景概念开始介绍&#xff0c;深入浅出的为读者介绍Scope的优势以及能力…

工业数字孪生:智能制造的新引擎

数字孪生技术&#xff1a;智能制造的新引擎 一、数字孪生技术的基本概念与工业应用 1.1 数字孪生的定义与原理 数字孪生技术是一种先进的集成技术&#xff0c;它通过在数字空间创建一个精准物理对象的虚拟模型&#xff0c;使得我们可以在数字空间中模拟、分析和预测物理实体…

如何在 Mac 上清空硬盘后恢复丢失的数据?

如果您不小心从 Mac 硬盘上删除了重要文件&#xff0c;您可能会感到非常沮丧。但您仍然可以找回丢失的信息。将 Mac 想象成一个大盒子&#xff0c;里面装着所有东西。丢弃某样东西就像撕掉盒子上的标签&#xff1a;房间现在可以放新东西了&#xff0c;但旧东西仍然在那里&#…

JAVA期末复习题1

目录 Java 填空题整理及解析 1. 说出Java的特点&#xff1a; 2. Java的运行机制是先编译再解释运行。 3. 请按照以下分类补全对应的数据类型&#xff1a; 4. 在有限次数循环时&#xff0c;一般选择for循环结构&#xff1b;未知循环次数时&#xff0c;可以选择while循环结构…