多表联动
多表联动效果指的是在多个表格之间建立一种交互关系，以便它们之间的操作或选择能够相互影响。通常情况下，多表联动效果可以通过以下方式之一实现：
-
数据关联： 当在一个表格中选择或操作某些数据时，另一个表格会根据这些选择或操作自动更新显示相关的数据。例如，如果在一个表格中选择了某个地区的销售数据，另一个表格会显示该地区的详细销售信息。
-
视觉联动： 当在一个表格中进行视觉操作（如缩放、平移等）时，另一个表格会以相同的方式进行相应的视觉变化。这种方式可以在多个表格之间保持一致的视觉效果，从而提供更好的用户体验。
多表联动效果通常用于数据分析、数据展示等场景，可以帮助用户更轻松地理解数据之间的关系，提高工作效率和数据分析的准确性。、
在这里我做了一个雷达图和饼图来进行联动效果（不会创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>
六、显示效果（屏幕显示的效果不全，只能分开截屏，‘ 哭笑 ’）
七、可以点击按钮切换数据
