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.hqwc.cn/news/618769.html

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

相关文章

matlab学习（三）（4.9-4.15）

matlab学习（三）（4.9-4.15）

一、空域里LSB算法的原理 1.原理&#xff1a; LSB算法通过替换图像像素的最低位来嵌入信息。这些被替换的LSB序列可以是需要加入的水印信息、水印的数字摘要或者由水印生成的伪随机序列。 2.实现步骤&#xff1a; &#xff08;1&#xff09;将图像文件中的所有像素点以RGB形…
阅读更多...
域权限维持—黄金票据和白金票据

域权限维持—黄金票据和白金票据

黄金票据和白金票据 前言 某老哥的一次面试里问到了这个问题&#xff0c;故来做一番了解 该攻击方式在BlackHat 2014被提出&#xff0c;演讲者为Alva Duckwall & Benjamin Delpy&#xff08;gentilkiwi)进行了演示&#xff0c;该演讲提出了Kerberos协议实现过程中的设计…
阅读更多...
【5G PHY】5G无线链路监测原理简述

【5G PHY】5G无线链路监测原理简述

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…
阅读更多...
bugku-web-文件包含2

bugku-web-文件包含2

页面源码 <!-- upload.php --><!doctype html><html><head><meta charset"utf-8"/><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-widt…
阅读更多...
精品方案- 智慧养殖业IOT项目技术建议书（免费下载）

精品方案- 智慧养殖业IOT项目技术建议书（免费下载）

本项目建设从实际需求出发&#xff0c;利用物联网信息化手段进行畜牧业经济运行监测&#xff0c;掌握畜牧业生产与畜牧业经济运行的动态&#xff0c;监测畜牧业生产经营的成本收益变化&#xff0c;对畜牧业生产经营活动提供分析。提高畜牧业市场监管的电子化、网络化水平&#…
阅读更多...
Unity上接入手柄，手柄控制游戏物体移动

Unity上接入手柄，手柄控制游戏物体移动

1、unity软件上安装system input 组件。菜单栏【window】-【Packag Manager】打开如下界面，查找Input System,并且安装。 2、安装成功后插入手柄到windows上，打开菜单栏上【window】--【Analysis】--【Input Debuger】 进入Input Debug界面，可以看到手柄设备能被Unity识别。…
阅读更多...
Python学习笔记16 - 函数

Python学习笔记16 - 函数

函数的创建和调用 函数调用的参数传递 函数的返回值 函数的参数定义 变量的作用域 递归函数 斐波那契数列 总结
阅读更多...
详解拷贝构造

详解拷贝构造

拷贝构造的功能 写法&#xff1a; 拷贝构造函数的参数为什么是引用类型 系统自动生成的拷贝构造函数 拷贝构造的深拷贝与浅拷贝 概念 浅拷贝&#xff1a; 深拷贝 小结 拷贝构造的功能 拷贝构造函数可以把曾经实例化好的对象的数据拷贝给新创建的数据 &#xff0c;可见…
阅读更多...
架构师系列-搜索引擎ElasticSearch（八）- 集群管理故障恢复

架构师系列-搜索引擎ElasticSearch（八）- 集群管理故障恢复

故障转移 集群的master节点会监控集群中的节点状态&#xff0c;如果发现有节点宕机&#xff0c;会立即将宕机节点的分片数据迁移到其它节点&#xff0c;确保数据安全&#xff0c;这个叫做故障转移。 下图中node1是主节点&#xff0c;其他两个节点是从节点 节点故障 此时node1…
阅读更多...
数模 线性规划模型理论与实践

数模 线性规划模型理论与实践

线性规划模型理论与实践 1.1 线性规划问题 在人们的生产实践中&#xff0c;经常会遇到如何利用现有资源来安排生产&#xff0c;以取得最大经济效益的问题。此类问题构成了运筹学的一个重要分支一数学规划&#xff0c;而线性规划(Linear Programming 简记LP)则是数学规划的一个…
阅读更多...
深入剖析MongoDB集群架构设计

深入剖析MongoDB集群架构设计

目录 一、MongoDB集群架构介绍 1.1 主从复制 1.2 副本集 1.3 分片集群 二、副本集 3.1 主节点选举 3.2 oplog 3.2 主从同步 三、分片集群 3.1 分片策略 3.2 分片键的选择 3.3 何时选择分片集群 四、总结 一、MongoDB集群架构介绍 MongoDB 有三种集群架构模式&#xff0c;分…
阅读更多...
bugku-web-文件上传

bugku-web-文件上传

提示他的名字是margin&#xff0c;给他一个图片文件&#xff0c;不要php文件 上传一句话木马的图片 抓包&#xff0c;后缀改为php 提示无效文件&#xff0c;即后台还会检测一次后缀 测试后台系统 为linux系统 开始绕过 截断绕过 上传成功&#xff0c;但是会变为jpg 开始分析…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023