Echarts简单的多表联动效果和添加水印和按钮切换数据效果

多表联动

多表联动效果指的是在多个表格之间建立一种交互关系，以便它们之间的操作或选择能够相互影响。通常情况下，多表联动效果可以通过以下方式之一实现：

  1. 数据关联： 当在一个表格中选择或操作某些数据时，另一个表格会根据这些选择或操作自动更新显示相关的数据。例如，如果在一个表格中选择了某个地区的销售数据，另一个表格会显示该地区的详细销售信息。

  2. 视觉联动： 当在一个表格中进行视觉操作（如缩放、平移等）时，另一个表格会以相同的方式进行相应的视觉变化。这种方式可以在多个表格之间保持一致的视觉效果，从而提供更好的用户体验。

多表联动效果通常用于数据分析、数据展示等场景，可以帮助用户更轻松地理解数据之间的关系，提高工作效率和数据分析的准确性。、

在这里我做了一个雷达图和饼图来进行联动效果（不会创Echarts的，可以去前面的文章）

一、雷达图和饼图

引入本地js

    <script src="/js/echarts.min.js" ></script><script src="/js/echarts-wordcloud.min.js" ></script>

创建两个 div 元素用于显示图表

<div id="main" style="height: 600px;width: 600px;"></div>
<div id="main1" style="height: 600px;width: 600px;"></div>

初始化 echarts 实例，传入图表要绘制的 DOM 节点

var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));

定义一个数组存储宠物数据和当前数据索引currentIndex

            // 当前数据索引var currentIndex = 0;// 定义一个数组存储宠物数据var data=[['火花',39,52,43,65,60,50],['水蓝蓝',44,48,65,43,50,64],['喵喵',45,49,49,45,65,65],['炎兽',35,60,40,55,58,48],['水神兽',50,45,55,40,48,62],['土巨兽',60,50,70,35,52,55],['风鸟',45,55,50,60,58,45],['雷兽',55,40,65,45,48,60],['冰龙',60,45,50,55,65,40]];

 雷达图的配置项

 // 雷达图的配置项var option = {tooltip: { show: true },title: { text: '洛克王国宠物' }, // 设置标题legend: { data: [currentPet] }, // 设置图例radar: {indicator: [{ name: '精力', max: 100 },{ name: '物攻', max: 100 },{ name: '物防', max: 100 },{ name: '速度', max: 100 },{ name: '魔攻', max: 100 },{ name: '魔抗', max: 100 }]},series: [{name: currentPet,type: 'radar',data: [{ value: data[currentIndex].slice(1) // 使用 slice 方法获取除宠物名称外的数据}]}]};

饼图的配置项

// 饼图的配置项var option1 = {tooltip: { show: true },title: { text: currentPet + '占比图' }, // 设置标题legend: { data: ['精力', '物攻', '物防', '速度', '魔攻', '魔抗'] }, // 设置图例series:[{name: currentPet,type: 'pie',radius: '50%', // 设置饼图半径data: [{ value: data[currentIndex][1], name: '精力' },{ value: data[currentIndex][2], name: '物攻' },{ value: data[currentIndex][3], name: '物防' },{ value: data[currentIndex][4], name: '速度' },{ value: data[currentIndex][5], name: '魔攻' },{ value: data[currentIndex][6], name: '魔抗' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};

二、 将两个图表实例连接起来，以实现联动效果

    // 设置第一个图表的配置选项并渲染myChart.setOption(option);// 设置第二个图表的配置选项并渲染myChart1.setOption(option1);// 将两个图表实例连接起来，以实现联动效果echarts.connect([myChart, myChart1]);

--联动效果--

三、制作一个按钮把数据循环显示，这样课更详细的显示效果

1、添加一个按钮，点击按钮可以切换数据

        <!-- 添加一个按钮，点击按钮可以切换数据 --><button id="changeButton" onclick="changeData()">切换数据</button>

2、切换数据的函数

            // 切换数据的函数function changeData() {currentIndex = (currentIndex + 1) % data.length; // 循环更新索引updateCharts(); // 更新图表}

3、用 updateCharts() 更新图表

4、更新按钮的文字为当前宠物的名称

                // 更新按钮的文字为当前宠物的名称document.getElementById("changeButton").innerText = "当前宠物：" + currentPet;

四、添加水印

1、设置效果

        var waterMarkText= '洛克王国';  //设置水印的字符var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');canvas.width = canvas.height = 100;ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.globalAlpha = 0.08;ctx.font = '20px Microsoft Yahei';  //设置水印文字的字体ctx.translate(50, 50);  //设置水印文字的偏转值ctx.rotate(-Math.PI / 4);  //设置水印旋转的角度ctx.fillText(waterMarkText, 0, 1);  //设置填充水印

   2、调用修改为背景

                    //水印backgroundColor:{image:canvas,},

五、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态图</title><script src="/js/echarts.min.js" ></script><script src="/js/echarts-wordcloud.min.js" ></script>
</head>
<style>/* 添加自定义样式 */#changeButton {position: absolute; /* 设置按钮的定位方式为绝对定位 */top: 20px; /* 设置按钮距离页面顶部的距离 */right: 20px; /* 设置按钮距离页面右侧的距离 */z-index: 999; /* 设置按钮的层级，使其在最上层 */}
</style>
<body><!-- 创建两个 div 元素用于显示图表 --><div id="main" style="height: 600px;width: 600px;"></div><div id="main1" style="height: 600px;width: 600px;"></div><!-- 添加一个按钮，点击按钮可以切换数据 --><button id="changeButton" onclick="changeData()">切换数据</button> <script>// 初始化 echarts 实例，传入图表要绘制的 DOM 节点var myChart = echarts.init(document.getElementById('main'));var myChart1 = echarts.init(document.getElementById('main1'));var waterMarkText= '洛克王国';  //设置水印的字符var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');canvas.width = canvas.height = 100;ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.globalAlpha = 0.08;ctx.font = '20px Microsoft Yahei';  //设置水印文字的字体ctx.translate(50, 50);  //设置水印文字的偏转值ctx.rotate(-Math.PI / 4);  //设置水印旋转的角度ctx.fillText(waterMarkText, 0, 1);  //设置填充水印// 当前数据索引var currentIndex = 0;// 定义一个数组存储宠物数据var data=[['火花',39,52,43,65,60,50],['水蓝蓝',44,48,65,43,50,64],['喵喵',45,49,49,45,65,65],['炎兽',35,60,40,55,58,48],['水神兽',50,45,55,40,48,62],['土巨兽',60,50,70,35,52,55],['风鸟',45,55,50,60,58,45],['雷兽',55,40,65,45,48,60],['冰龙',60,45,50,55,65,40]];// 切换数据的函数function changeData() {currentIndex = (currentIndex + 1) % data.length; // 循环更新索引updateCharts(); // 更新图表}// 更新图表数据和显示function updateCharts() {var currentPet = data[currentIndex][0]; // 获取当前宠物的名称// 更新按钮的文字为当前宠物的名称document.getElementById("changeButton").innerText = "当前宠物：" + currentPet;// 雷达图的配置项var option = {//水印backgroundColor:{image:canvas,},tooltip: { show: true },title: { text: '洛克王国宠物' }, // 设置标题legend: { data: [currentPet] }, // 设置图例radar: {indicator: [{ name: '精力', max: 100 },{ name: '物攻', max: 100 },{ name: '物防', max: 100 },{ name: '速度', max: 100 },{ name: '魔攻', max: 100 },{ name: '魔抗', max: 100 }]},series: [{name: currentPet,type: 'radar',data: [{ value: data[currentIndex].slice(1) // 使用 slice 方法获取除宠物名称外的数据}]}]};// 饼图的配置项var option1 = {//水印backgroundColor:{image:canvas,},tooltip: { show: true },title: { text: currentPet + '占比图' }, // 设置标题legend: { data: ['精力', '物攻', '物防', '速度', '魔攻', '魔抗'] }, // 设置图例series:[{name: currentPet,type: 'pie',radius: '50%', // 设置饼图半径data: [{ value: data[currentIndex][1], name: '精力' },{ value: data[currentIndex][2], name: '物攻' },{ value: data[currentIndex][3], name: '物防' },{ value: data[currentIndex][4], name: '速度' },{ value: data[currentIndex][5], name: '魔攻' },{ value: data[currentIndex][6], name: '魔抗' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用 setOption 方法分别设置雷达图和饼图的配置项// 设置第一个图表的配置选项并渲染myChart.setOption(option);// 设置第二个图表的配置选项并渲染myChart1.setOption(option1);// 将两个图表实例连接起来，以实现联动效果echarts.connect([myChart, myChart1]);}updateCharts(); // 初始化显示第一组数据</script>
</body>
</html>

六、显示效果（屏幕显示的效果不全，只能分开截屏，‘ 哭笑 ’）

七、可以点击按钮切换数据

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

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

相关文章

一.NODE MCU(ESP8285,ESP8286)开发环境搭建

一.NODE MCU(ESP8285,ESP8286)开发环境搭建

一.序言： 1.esp8285长什么样？ 2.esp8285是什么，能做什么？ 通过上面图片，看到上面的芯片，是带有多个阵脚的单片机。实际上，看着该芯片很小，但是却具有完整的wifi无线蓝牙功能，它本身可以运行一个极简的linux小系统，并且该极简的小linux系统具备无线蓝牙功能。。它同…
阅读更多...
网络编程【InetAddress ， TCP 、UDP 、HTTP 案例】

网络编程【InetAddress ， TCP 、UDP 、HTTP 案例】

day38上 网络编程 InetAddress 理解&#xff1a;表示主机类 一个域名 对应 多个IP地址 public static void main(String[] args) throws UnknownHostException {//获取本机的IP地址 // InetAddress localHost InetAddress.getLocalHost(); // System.out.println(localHos…
阅读更多...
Mac 软件清单

Mac 软件清单

~自留备用~ Macbook用了几年之后, 512G的内置硬盘有些紧张了, 这几天总是提示空间不足, 就重装了下系统, 重装之后竟然不记得有些软件的名字和下载链接, 特此记录 Office 办公套件 直接从微软官网下载Office 安装包https://officecdnmac.microsoft.com/pr/C1297A47-86C4-4C1F…
阅读更多...
python botos s3 aws

python botos s3 aws

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/s3.html AWS是亚马逊的云服务&#xff0c;其提供了非常丰富的套件&#xff0c;以及支持多种语言的SDK/API。本文针对其S3云储存服务的Python SDK&#xff08;boto3&#xff09;的使用进行介绍。 …
阅读更多...
golang 使用栈模拟计算器

golang 使用栈模拟计算器

思路&#xff1a; // Author sunwenbo // 2024/4/12 16:51 package mainimport ("errors""fmt""strconv" )// 使用数组来模拟一个栈的应用 type Stack struct {MaxTop int //表示栈最大可以存放数的个数Top int //表示栈底&#xff…
阅读更多...
了解 Vue 工程化开发中的组件通信

了解 Vue 工程化开发中的组件通信

目录 1. 组件通信语法 1.1. 什么是组件通信&#xff1f; 1.2. 为什么要使用组件通信&#xff1f; 1.3. 组件之间有哪些关系&#xff08;组件关系分类&#xff09;&#xff1f; 1.4. 组件通信方案有哪几类 &#xff1f; 2. 父子通信流程图 3. 父传子 3.1. 父传子核心流程…
阅读更多...
Tool：VRAM的简介、查询电脑VRAM的常用方法

Tool：VRAM的简介、查询电脑VRAM的常用方法

Tool&#xff1a;VRAM的简介、查询电脑VRAM的常用方法 目录 VRAM的简介 查询电脑VRAM的常用方法 1、对于Windows系统 T1、设置-系统-显示查询法 T2、使用 DirectX 诊断工具&#xff1a; T3、使用系统信息工具&#xff1a; 2、对于Linux系统 T1、使用nvidia-smi命令&…
阅读更多...
网络网络层之(2)ARP协议

网络网络层之(2)ARP协议

网络网络层之(2)ARP协议 Author&#xff1a;Once Day Date: 2024年4月1日 漫漫长路&#xff0c;有人对你笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的博客-CSDN博客。 参考文档: 《TCP/IP详解卷一》arp(8) - Linux manual page (man7.org)彻底搞懂系…
阅读更多...
Android MTK 屏下指纹的调试过程记录

Android MTK 屏下指纹的调试过程记录

Demo链接 -----> https://download.csdn.net/download/u011694328/89118346 一些品牌手机都有了屏下指纹的功能&#xff0c;还算是个比较新颖的功能&#xff0c;最近有项目需要使用屏下指纹&#xff0c; 使用的是汇顶&#xff08;Goodix&#xff09;的指纹方案&#xff0c…
阅读更多...
＜计算机网络自顶向下＞ TCPUDP套接字编程

＜计算机网络自顶向下＞ TCPUDP套接字编程

应用实现&#xff1a;源端的应用进程交换报文实现应用协议&#xff0c;来实现各种各样的网络应用&#xff08;dash&#xff0c;email, etc&#xff09; 而应用层通信不可以直接通信&#xff0c;需要借助下层的服务才可以进行&#xff0c;通过层间接口交给下层&#xff0c;通过…
阅读更多...
白话人工智能之⌈大语言模型⌋

白话人工智能之⌈大语言模型⌋

LLM
阅读更多...
系统架构最佳实践 -- 金融企业的资损防控

系统架构最佳实践 -- 金融企业的资损防控

一、资损产生的原因 由于支付行业的特殊性与复杂性&#xff08;主要处理资金相关业务&#xff09;&#xff0c;支付公司处于资损的风口浪尖&#xff0c;最容易发生资损&#xff0c;可以说资损风险无处不在。 常规来说&#xff0c;资损原因主要可以分为以下三类&#xff1a; 1…
阅读更多...
【MATLAB源码-第49期】基于蚁群算法(ACO)算法的栅格路径规划，输出最佳路径图和算法收敛曲线图。

【MATLAB源码-第49期】基于蚁群算法(ACO)算法的栅格路径规划，输出最佳路径图和算法收敛曲线图。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 蚁群算法是一种模拟自然界蚂蚁觅食行为的启发式优化算法。在蚁群系统中&#xff0c;通过模拟蚂蚁之间通过信息素沟通的方式来寻找最短路径。 在栅格路径规划中&#xff0c;蚁群算法的基本步骤如下&#xff1a; 1. 初始化: …
阅读更多...
Notepad++软件安装及配置说明

Notepad++软件安装及配置说明

Notepad是 Windows操作系统下的一套文本编辑器&#xff0c;有完整的中文化接口及支持多国语言编写的功能。 Notepad功能比 Windows自带记事本强大&#xff0c;除了可以用来制作一般的纯文字说明文件&#xff0c;也十分适合编写计算机程序代码。Notepad不但可以显示行号&#xf…
阅读更多...
鸿蒙开发快速入门

鸿蒙开发快速入门

基本概念 ArkTS 因为ArkTS是基于Type Script扩展而来&#xff0c;是Type Script的超集&#xff0c;所以也可以关注一下Type Script的语法来理解ArkTS的语法 ArkUI HarmonyOS提供了一套UI开发框架&#xff0c;即方舟开发框架&#xff08;ArkUI框架&#xff09;。方舟开发框架…
阅读更多...
对常见FTP客户端/服务器的调查与分析

对常见FTP客户端/服务器的调查与分析

前言 主要是想看看常见的服务器和客户端是如何实现协议中要求的功能的&#xff0c;。 比如RF959要求的记录结构&#xff08;Record Structure&#xff09;、页结构&#xff08;Page Structure&#xff09;、Block Mode、Compress Mode&#xff0c;看起来就很抽象。 实测发现…
阅读更多...
给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

给自己的机器人部件安装单目摄像头并实现gazebo仿真功能

手术执行器添加摄像头 手术执行器文件夹surgical_new内容展示如何添加单目摄像头下载现成的机器人环境文件启动仿真环境 手术执行器文件夹surgical_new内容展示 进入src文件夹下选择进入vision_obliquity文件夹 选择launch 有两个可用gazebo中rviz展示的launch文件&#xff0…
阅读更多...
Unity 2D让相机跟随角色移动

Unity 2D让相机跟随角色移动

相机跟随移动 最简单的方式通过插件Cinemachine 在窗口/包管理器选择全部找到Cinemachine&#xff0c;导入。然后在游戏对象/Cinemachine创建2D Camera。此时层级中创建一个2D相机。选中人物拖入检查器Follow。此时相机跟随人物移动。 修改相机视口距离 在检查器中Lens下调正…
阅读更多...
c++11 标准模板（STL）本地化库 - 平面类别（std::codecvt） - 在字符编码间转换，包括 UTF-8、UTF-16、UTF-32 （四）

c++11 标准模板（STL）本地化库 - 平面类别（std::codecvt） - 在字符编码间转换，包括 UTF-8、UTF-16、UTF-32 （四）

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 在字符编码间转换&#xff0c;包括 UTF-8、UTF-16、UTF-32 std::…
阅读更多...
MES生产管理系统：私有云、公有云与本地化部署的比较分析

MES生产管理系统：私有云、公有云与本地化部署的比较分析

随着信息技术的迅猛发展&#xff0c;云计算作为一种新兴的技术服务模式&#xff0c;已经深入渗透到企业的日常运营中。在众多部署方式中&#xff0c;私有云、公有云和本地化部署是三种最为常见的选择。它们各自具有独特的特点和适用场景&#xff0c;并在不同程度上影响着企业的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023