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

多表联动

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

数据关联： 当在一个表格中选择或操作某些数据时，另一个表格会根据这些选择或操作自动更新显示相关的数据。例如，如果在一个表格中选择了某个地区的销售数据，另一个表格会显示该地区的详细销售信息。
视觉联动： 当在一个表格中进行视觉操作（如缩放、平移等）时，另一个表格会以相同的方式进行相应的视觉变化。这种方式可以在多个表格之间保持一致的视觉效果，从而提供更好的用户体验。

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

在这里我做了一个雷达图和饼图来进行联动效果（不会创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>

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

多表联动

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

一、雷达图和饼图

引入本地js

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

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

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

雷达图的配置项

饼图的配置项

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

--联动效果--

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

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

2、切换数据的函数

3、用 updateCharts() 更新图表

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

四、添加水印

1、设置效果

2、调用修改为背景

五、完整代码

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

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

网站公告

今日签到

热门文章

最新发布

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

多表联动

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

一、雷达图和饼图

引入本地js

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

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

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

雷达图的配置项

饼图的配置项

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

--联动效果--

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

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

2、切换数据的函数

3、用 updateCharts() 更新图表

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

四、添加水印

1、设置效果

2、调用修改为背景

五、完整代码

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

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

网站公告

今日签到

热门文章

最新发布

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