当前位置： 首页 > news >正文

数据可视化-ECharts Html项目实战（11）

news 2025/7/8 3:24:05

在之前的文章中，我们学习了如何在ECharts中特殊图表的双y图以及自定义形状词云图。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。

数据可视化-ECharts Html项目实战（10）-CSDN博客文章浏览阅读775次，点赞20次，收藏16次。今天的文章，会带着大家深入学习ECharts特殊图表中的双y图以及自定义形状词云图。希望我的文章能帮助到正在学习的你，也欢迎各位来本篇文章下一起交流学习，共同进步。https://blog.csdn.net/qq_49513817/article/details/137527485今天的文章，会带着大家深入学习ECharts特殊图表中的矩形树图以及Echarts中高级功能的多图表联动。希望你能在本篇文章中有所收获。 

目录

一、知识回顾

二、矩形树图

三、多图表联动

一、知识回顾

在之前的文章中我们学习了ECharts特殊图表中的双y图以及自定义形状词云图。

双y图的配置并不复杂，只需要记住图片中这几点就行

 在配置的时，只需要将两条y轴配置项分开写，数据对应好就行，如图：

自定义形状词云图就有点复杂了

我们需要将我们所需形状的图片转化为base64格式

 只会就能编写我们的代码进行操作

现在，开始今天的学习吧 

二、矩形树图

在ECharts中编写矩形树图（Tree Graph）的配置项时，有几个关键的注意事项需要我们牢记：

  • 数据结构准备：首先，我们需要确保提供的数据结构是适合树图展示的。树图通常需要一个层级结构的数据，其中每个节点都包含其子节点的信息。我们需要确保数据格式正确，并且遵循ECharts所期望的格式。
  • 配置选项：树图的配置项非常丰富，我们需要根据具体需求进行配置。例如，我们可以设置series下的type为'tree'来指定绘制树图，然后利用data字段来传入你的树形数据。同时，我们还可以配置节点的样式（如symbolSize）、标签的显示方式（如label字段下的position、fontSize等）、提示框的触发方式（如tooltip字段）等。
  • 布局与方向：树图有多种布局方式，比如水平布局和垂直布局。我们可以通过配置orient字段来指定布局方向，比如'TB'表示从上到下垂直布局，'LR'表示从左到右水平布局。

现在，分析我们的代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js"></script>
</head><body><div id="main" style="width: 800px; height: 400px"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"));function getLevelOption(){return[{itemStyle:{borderWidth:0,gapWidth:5}},{itemStyle:{gapWidth:1}},{colorSaturation:[0.7,0.2],itemStyle:{gapWidth:1,borderColorSaturation:0.5}}];}var option = {title: {text: '矩形树图',left:"270",top:15,textStyle:{color:'green'}},series: [{name:'全部',type:'treemap',levels:getLevelOption(),data:[{name:'陈大姐',value:52,children:[{name:'神小龙',value:17},{name:'赣小许',value:13},{name:'常小君',value:15},{name:'娄小青',value:7}]},{name:'吴二姐',value:39,children:[{name:'林慕慕',value:22},{name:'杨株洲',value:17}]},{name:'林三妹',value:38,children:[{name:'魏芷兰',value:19},{name:'高常德',value:11},{name:'桂尧尧',value:8}]},]}]};myChart.setOption(option);</script>
</body></html>

在我们的代码中，我创建了一个getLevelOption()函数。返回函数中数组里的每个元素代表一个层级的样式配置。每个层级配置对象包含itemStyle属性，用于设置节点的样式，比如边框宽度(borderWidth)和间隙宽度(gapWidth)。第三个层级配置还包含了颜色饱和度(colorSaturation)和边框颜色饱和度(borderColorSaturation)的设置，这些用于控制节点颜色的深浅 。

再将类型设置为"treemap"，最后填写数据

现在，运行代码，查看效果：

 

 可以看到我们预期的矩形树图效果出现了

三、多图表联动

这里我使用童年游戏洛克王国一个宠物的数值以及登场率作为数据可视化例子为大家讲解。 

我使用了ECharts库来创建两个图表：一个饼图和一个雷达图。

  • 初始化图表：
    • echarts.init()：用于初始化图表实例，传入一个DOM元素作为图表的容器。
  • 饼图（myChart1）：
    • 标题 (title)：设置了图表的标题为“巴哈姆特天梯赛登场占比”。
    • 提示框 (tooltip)：定义了当鼠标悬停在数据项上时显示的提示框内容。
    • 图例 (legend)：展示了饼图的图例，包括“巴哈姆特”、“其他年费”、“精灵王”、“奉神”和“活动宠”。
    • 系列 (series)：定义了饼图的数据系列，包括数据类型（pie）、半径、数据项（包括值和名称）以及高亮状态下的样式。
  • 雷达图（myChart2）：
    • 颜色 (color)：为雷达图的各个系列设置了颜色数组。
    • 背景色 (backgroundColor)：设置了图表的背景色，这里使用了带有透明度的灰色。
    • 标题 (title)：设置了雷达图的标题为“巴哈姆特数值”。
    • 提示框 (tooltip)：tooltip。
    • 雷达指示器 (radar.indicator)：定义了雷达图的各个指示器（如“精力”、“攻击”等）及其最大值。
    • 系列 (series)：定义了雷达图的数据系列，包括数据类型（radar）。

那么我们如何把他们放到一起呢？

  • 设置图表选项：
    • myChart1.setOption(option1); 和 myChart2.setOption(option2);：这两行代码将之前定义的配置选项应用到各自的图表实例上。这会导致图表根据配置选项进行渲染和展示。
  • 添加自定义属性 group：
    • myChart1.group = 'group1'; 和 myChart2.group = 'group1';：这里，我为两个图表实例添加了一个自定义属性 group，并将它们的值都设置为 'group1'。这本身并不会影响ECharts图表的渲染或行为，但它是一个自定义属性，用于后面的图表联动操作。
  • 连接图表：
    • echarts.connect('group1');：这行代码是ECharts中实现多图表联动的关键。echarts.connect 方法用于将多个图表实例连接到一个组中，以实现它们之间的联动。当图表被连接到一个组后，用户在一个图表上的交互（如点击、鼠标悬停等）会触发该组中所有其他图表的相应事件。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/echarts.js"></script><style>   #main1, #main2 {  position: relative;  }  #main1::before, #main2::before {  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height:100%;  background-image: url('image/3.png'); /* 图片路径 */  background-size: cover; /* 根据容器大小调整图片大小 */  opacity: 0.3; /* 设置图片透明度为30% */  z-index: -1; /* 确保背景图在图表之下 */  }  </style>  
</head>
<body><div id="main1" style="width: 600px; height: 500px"></div><div id="main2" style="width: 600px; height: 500px"></div><script type="text/javascript">var myChart1 = echarts.init(document.getElementById("main1"));var option1 = {  title: {  text: '巴哈姆特天梯赛登场占比'  },  tooltip: { trigger: 'item',  formatter: '{a} <br/>{b}: {c} ({d}%)' // 格式化提示框内容  },  legend: { // 添加图例组件  orient: 'vertical',  left: 'left',  data: ['巴哈姆特', '其他年费', '精灵王', '奉神', '活动宠'], // 根据你的数据设置图例名称top:'30',},  series: [{  name:'巴哈姆特登场占比',type: 'pie', // 改为饼图类型  radius: '50%', // 饼图的半径，可以是百分比或者具体的像素值  data: [  {value: 68, name: '巴哈姆特'},  {value: 115, name: '其他年费'},  {value: 92.0, name: '精灵王'},  {value: 90, name: '奉神'},  {value: 38, name: '活动宠'}  ],  labelLine: {  show: true  },  emphasis: { // 高亮状态下的样式  label: {  show: true,  fontSize: '30',  fontWeight: 'bold'  }  }  }]  };var myChart2 = echarts.init(document.getElementById("main2"));var option2 = {   color: ['blue',' LimeGreen', 'Darkgreen', 'red', 'Purple'],backgroundColor: 'rgba(128,128,128,0.1)',  title: { text: '巴哈姆特数值', },tooltip: { toolip: { show: true }, },radar: {indicator: [{ name: '精力', max: 200,color:'blue'},{ name: '攻击', max: 200,color:'LimeGreen'},{ name: '防御', max: 200,color:'Darkgreen' },{ name: '魔攻', max: 200,color:'red' },{ name: '魔防', max: 200,color:'Purple' },{ name: '速度', max: 200,color:'yellow'},]series: [{     type: 'radar',   data: [{value: [166,155,141,100,141,139],name:'巴哈姆特数值',}],}]};myChart1.setOption(option1);   myChart2.setOption(option2);   myChart1.group = 'group1';myChart2.group = 'group1';echarts.connect('group1');
</script>
</body>
</html>

现在，运行代码看看效果

可以看到我们预期的多表联动效果呈现了，快去试试吧~ 

相关文章：

数据可视化-ECharts Html项目实战（11）

在之前的文章中&#xff0c;我们学习了如何在ECharts中特殊图表的双y图以及自定义形状词云图。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 数据可视化-ECh…...

编程日记 2024/4/11 14:20:40

【MySQL数据库 | 第二十四篇】Limit语句的性能问题和调优策略

前言&#xff1a; MySQL作为最流行的关系型数据库管理系统之一&#xff0c;被广泛应用于各种规模和类型的应用程序中。其强大的功能和灵活的查询语言使得开发人员能够高效地执行各种数据操作和分析。 然而&#xff0c;在处理大量数据或复杂查询时&#xff0c;一些开发人员可能…...

编程日记 2024/4/11 14:19:39

【数据结构】两两交换链表 复制带随机指针的链表

问题描述1 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 求解 使用一个栈S来存储相邻两个节点即可 /*** Definition for…...

编程日记 2024/4/11 14:18:37

网络安全流量平台_优缺点分析

FlowShadow&#xff08;流影&#xff09;&#xff0c;Ntm&#xff08;派网&#xff09;&#xff0c;Elastiflow。 Arkimesuricata&#xff0c;QNSMsuricata&#xff0c;Malcolm套件。 Malcolm套件优点&#xff1a;支持文件还原反病毒引擎&#xff08;clamav/yara&#xff09;…...

编程日记 2024/4/11 14:17:36

【c语言】自定义类型：结构体详解

目录 自定义类型&#xff1a;结构体 结构体类型的声明 结构体变量的创建和初始化 结构的特殊声明 结构的自引用 结构体内存对齐 对其规则 为什么存在内存对齐&#xff1f; 修改默认对⻬数 结构体传参 结构体实现位段 位段的内存分配 位段的跨平台问题 位段的应用…...

编程日记 2024/4/11 14:16:35

利用AbortController，取消正在发送的请求

参考文章&#xff1a;https://blog.csdn.net/qq_45560350/article/details/130588101 解决问题&#xff1a;再图层中点击仓库的时候&#xff0c;点击后又取消掉&#xff0c;我们希望这个请求可以被取消掉&#xff0c;我们口可以利用AbortController控制器对象 实操&#xff1a…...

编程日记 2024/4/11 14:15:34

dockerhub右键快速搜索脚本

Chrome 浏览器扩展的后台脚本&#xff0c;用于创建右键菜单项&#xff0c;并根据用户的操作在新的标签页中打开 Docker Hub 网站或者进行搜索。 // 创建右键菜单项&#xff0c;用于打开 Docker Hub 网站 chrome.contextMenus.create({id: search-home, // 菜单项的唯一标识符t…...

编程日记 2024/4/11 14:14:32

类似微信的以文搜图功能实现

通过PaddleOCR识别图片中的文字&#xff0c;将识别结果报存到es中&#xff0c;利用es查询语句返回结果图片。 技术逻辑 PaddleOCR部署、es部署创建mapping将PaddleOCR识别结果保存至es通过查询&#xff0c;返回结果 前期准备 PaddleOCR、es部署请参考https://blog.csdn.net…...

编程日记 2024/4/11 14:12:29

Android 13.0 Launcher3定制化之最近任务的全部清除由左边移到下边显示

1.概述 在最近13.0的系统rom产品开发中，在Launcher3的定制化开发中，在最近任务列表中，发现点击recents最近任务键后 显示的全部清除按键在左边 由于是横屏的产品显示在左边不太合理 所以要求显示在下边比较合理，所以要从Launcher3的显示流程来解决这个问题 2. 最近任务全…...

编程日记 2024/4/11 14:11:28

成都数字产业园落地全生命周期服务方案， 让企业对成都发展更有信心

国际数字影像产业园&#xff0c;作为现代科技与文化创意的交汇点&#xff0c;致力于为企业落地全生命周期的服务方案&#xff0c;让企业对成都发展更有信心。该服务模式贯穿了企业的初创期到成熟期的各个阶段&#xff0c;确保每一家入驻园区的企业都能得到全方位的支持和帮助。…...

编程日记 2024/4/11 14:09:25

SpringBoot实现RabbitMQ的通配符交换机(SpringAMQP 实现Topic交换机)

文章目录 pomyml生产者消费者 Topic类型的Exchange与Direct相比&#xff0c;都是可以根据RoutingKey把消息路由到不同的队列。只不过Topic类型Exchange可以让队列在绑定Routing key 的时候使用通配符&#xff01; Routingkey 一般都是有一个或多个单词组成&#xff0c;多个单词…...

编程日记 2024/4/11 14:04:19

opencv图像处理技术（形态学操作）

形态学&#xff08;Morphology&#xff09;是数学中研究形状、结构和变换的分支&#xff0c;而在图像处理中&#xff0c;形态学主要用于描述和分析图像中的形状和结构。形态学操作通常涉及基本的集合运算&#xff0c;如腐蚀、膨胀、开运算、闭运算等&#xff0c;以及与结构元素…...

编程日记 2024/4/11 14:01:15

如何构建数据指标体系

构建一套科学、完备且实用的数据分析指标体系是一项系统性的工程&#xff0c;其核心在于将业务理解、目标设定、度量标准选择、数据采集与整理、数据分析、指标体系构建、持续优化与改进等多个环节有机融合&#xff0c;以实现对业务状况的精准刻画、趋势预测及决策支持。以下是…...

编程日记 2024/4/11 13:56:10

python统计分析——一般线性回归模型

参考资料&#xff1a;python统计分析【托马斯】 当我想用一个或多个其他的变量预测一个变量的时候&#xff0c;我们可以用线性回归的方法。 例如&#xff0c;当我们寻找给定数据集的最佳拟合线的时候&#xff0c;我们是在寻找让下式的残差平方和最小的参数(k,d)&#xff1a; 其…...

编程日记 2024/4/11 13:54:09

【cocos creator】【TS】贝塞尔曲线，地图之间显示曲线

参考&#xff1a; https://blog.csdn.net/Ctrls_/article/details/108731313 https://blog.csdn.net/qq_28299311/article/details/104009804 const { ccclass, property } cc._decorator;ccclass export default class creatPoint extends cc.Component {property(cc.Node)bu…...

编程日记 2024/4/11 13:50:04

COMFYUI换脸ReActor报错Value not in list: face_restore_model: ‘codeformer.pth‘解决

Value not in list: face_restore_model: codeformer.pth not in [none, GFPGANv1.3.pth] 搜了下没找到答案&#xff0c;最后看github官方的指引&#xff1a; You can download models here: https://huggingface.co/datasets/Gourieff/ReActor/tree/main/models/facerestore…...

编程日记 2024/4/11 13:49:02

深入理解Java中的字段与属性的区别

1、Java中的属性和字段有什么区别&#xff1f; 答&#xff1a;Java中的属性(property)&#xff0c;通常可以理解为get和set方法。 而字段(field)&#xff0c;通常叫做“类成员”&#xff0c;或 "类成员变量”&#xff0c;有时也叫“域”&#xff0c;理解为“数据成员”&…...

编程日记 2024/4/11 13:48:01

【Locust分布式压力测试】

Locust分布式压力测试 https://docs.locust.io/en/stable/running-distributed.html Distributed load generation A single process running Locust can simulate a reasonably high throughput. For a simple test plan and small payloads it can make more than a thousan…...

编程日记 2024/4/11 13:43:56

富格林：出金异常警惕黑幕陷阱受骗

富格林悉知&#xff0c;在做单出金时落入黑幕陷阱亏损后&#xff0c;需尽快发现和总结错误&#xff0c;用心筹维权谋安全出金盈利方法并追回亏损。因为黄金市场优势众多&#xff0c;众多的投资者进入市场投资&#xff0c;但因为经验不足&#xff0c;在面对黑幕陷阱是获取无法及…...

编程日记 2024/4/11 13:41:53

Docker - Nginx

博文目录 文章目录 说明命令 说明 Docker Hub Nginx 数据卷数据卷印射在容器内的路径nginx.conf/etc/nginxnginx.html/usr/share/nginx/htmlnginx.log/var/log/nginx 容器内的路径说明/etc/nginx/nginx.conf配置文件/etc/nginx/conf.d配置目录/usr/share/nginx/html静态目录/…...

编程日记 2024/4/11 13:39:51

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/6/21 11:59:52

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/6/21 12:50:31

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/7/6 11:27:02

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/7/6 21:25:50

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/7/5 23:31:25

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/7/7 6:49:47

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/7/3 9:50:42

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/7/6 15:09:10