ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量1.9k 收藏 34
点赞数 32
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wqqstudy/article/details/139111422
版权

当需要展示的数据比较多时，放在一个图表进行展示的效果并不佳，此时，可以考虑使用两个图表进行联动展示。 ECharts提供了多图表联动（connect）的功能，连接的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角系下tooltip的联动

实现EChart中的多图表联动，可以使用以下两种方法。 （1）分别设置每个ECharts对象为相同的group值，并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系，格式如下。 myChart1.group = 'group1'; //给第1个ECharts对象设置一个group值 myChart2.group = 'group1'; //给第2个ECharts对象设置一个相同的group值 echarts.connect('group1'); //调用ECharts对象的connect方法时，传入group值

（2）直接调用ECharts的connect方法，参数为一个由多个需要联动的ECharts对象所组成的数组，格式如下。 echarts.connect([myChart1,myChart2]); 若想要解除已有的多图表联动，则可以调用disConnect方法，格式如下。 echarts.disConnect('group1');

利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表，如图所示。 由图可知，共有上下两个柱状图，分别表示2019、2020两个年度的招生情况汇总。由于建立了多图表联动，所以当鼠标滑过2019年或2020年的人工智能专业柱体上时，系统会同时在2019年、2020年的人工智能专业上自动弹出相应的详情提示框（tooltip）。

代码;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!-- 引入 ECharts 文件 -->

    <script src="echarts.js"></script>

    <title>5-3 柱状图联动图</title>

</head>

<body>

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

    <div id="main2" style="width: 600px; height:400px"></div>

    <script type="text/javascript">

        //基于准备好的dom，初始化ECharts图表

        var waterMarkText = 'ECharts';  //设置水印的字符

        var canvas = document.createElement('canvas');

        var ctx = canvas.getContext('2d');

        canvas.width = canvas.height = 100;

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.globalAlpha = 0.1;

        ctx.font = '20px Microsoft Yahei';  //设置水印文字的字体

        ctx.translate(50, 50);  //设置水印文字的偏转值

        ctx.rotate(-Math.PI / 4);  //设置水印旋转的角度

        ctx.fillText(waterMarkText, 0, 0);  //设置填充水印

        var myChart1 = echarts.init(document.getElementById("main1"));

        var option1 = {  //指定第1个图表的配置项和数据

            //backgroundColor: { type: 'pattern', image: canvas, repeat: 'repeat' },

            color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],

            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1

            title: { text: '某学院2019年专业招生情况汇总表', left: 40, top: 5 },

            tooltip: { tooltip: { show: true }, },

            legend: { data: ['2019年招生'], left: 422, top: 8 },

            xAxis: [{

                data: ["大数据", "云计算", "Oracle", "ERP", "人工智能",

                    "软件开发", "移动开发", "网络技术"],axisLabel:{interval: 0}

            }],

            yAxis: [{ type: 'value', }],

            series: [{  //配置第1个图表的数据系列

                name: '2019年招生',

                type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度

                data: [125, 62, 45, 56, 123, 205, 108, 128],

            }]

        };

        //基于准备好的dom,初始化ECharts图表

        var myChart2 = echarts.init(document.getElementById("main2"));

        var option2 = {  //指定第2个图表的配置项和数据

            color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],

            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1

            title: { text: '某学院2020年专业招生情况汇总表', left: 40, top: 8 },

            tooltip: { show: true },

            legend: { data: ['2020年招生'], left: 422, top: 8 },

            xAxis: [{

                data: ["大数据", "云计算", "Oracle", "ERP", "人工智能",

                    "软件开发", "移动开发", "网络技术"],axisLabel:{interval: 0}

            }],

            yAxis: [{ type: 'value', }],

            series: [{  //配置第2个图表的数据系列

                name: '2020年招生',

                type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度

                data: [325, 98, 53, 48, 222, 256, 123, 111],

            }]

        };

        myChart1.setOption(option1);  //为myChart1对象加载数据

        myChart2.setOption(option2);  //为myChart2对象加载数据

        //多图表联动配置方法1：分别设置每个echarts对象的group值

        myChart1.group = 'group1';

        myChart2.group = 'group1';

        echarts.connect('group1');

    //多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2

    //echarts.connect([myChart1,myChart2]);

    </script>

   

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 引入 ECharts 文件 -->
	<script src="echarts.js"></script>
	<title>5-3 柱状图联动图</title>
</head>
<body>
    <div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
        var waterMarkText = 'ECharts';  //设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.globalAlpha = 0.1;
		ctx.font = '20px Microsoft Yahei';  //设置水印文字的字体
		ctx.translate(50, 50);  //设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4);  //设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0);  //设置填充水印
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = {  //指定第1个图表的配置项和数据
            //backgroundColor: { type: 'pattern', image: canvas, repeat: 'repeat' },
			color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: { text: '某学院2019年专业招生情况汇总表', left: 40, top: 5 },
			tooltip: { tooltip: { show: true }, },
			legend: { data: ['2019年招生'], left: 422, top: 8 },
			xAxis: [{
				data: ["大数据", "云计算", "Oracle", "ERP", "人工智能",
					"软件开发", "移动开发", "网络技术"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //配置第1个图表的数据系列
				name: '2019年招生',
				type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度
				data: [125, 62, 45, 56, 123, 205, 108, 128],
			}]
		};
		//基于准备好的dom,初始化ECharts图表
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = {  //指定第2个图表的配置项和数据
			color: ['blue', 'LimeGreen', 'DarkGreen', 'red', 'Purple'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //rgba设置透明度0.1
			title: { text: '某学院2020年专业招生情况汇总表', left: 40, top: 8 },
			tooltip: { show: true },
			legend: { data: ['2020年招生'], left: 422, top: 8 },
			xAxis: [{
				data: ["大数据", "云计算", "Oracle", "ERP", "人工智能",
					"软件开发", "移动开发", "网络技术"],axisLabel:{interval: 0}
			}],
			yAxis: [{ type: 'value', }],
			series: [{  //配置第2个图表的数据系列
				name: '2020年招生',
				type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度
				data: [325, 98, 53, 48, 222, 256, 123, 111],
			}]
		};
		myChart1.setOption(option1);  //为myChart1对象加载数据
		myChart2.setOption(option2);  //为myChart2对象加载数据
		//多图表联动配置方法1：分别设置每个echarts对象的group值
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
	//多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
	//echarts.connect([myChart1,myChart2]);
	</script>
    
</body>
</html>

 

利用某大学各专业2016－2020年的招生情况绘制饼图与柱状图的联动图表，如图所示。 由图可知，上方的饼图和下方的柱状图（柱状图也可以通过工具箱转为折线图）。当鼠标滑过饼图的某个扇区时，饼图出现的详情提示框显示相应扇区所对应年份的招生人数及其所占各年总招生人数的比例，同时柱状图（或折线图）也会相应地出现详情提示框，显示对应年份各个专业的招生人数的详细数据。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 引入 ECharts 文件 -->

    <script src="echarts.js"></script>

    <title>5-4 饼图与柱状图的联动图</title>

</head>

<body>

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

    <div id="main2" style="width: 600px; height:400px"></div>

    <script type="text/javascript">

        //基于准备好的dom，初始化ECharts图表

        var myChart1 = echarts.init(document.getElementById("main1"));

        var option1 = {  //指定第1个图表option1的配置项和数据

            color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],

            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //配置背景色，rgba设置透明度0.1

            title: { text: '某大学各专业历年招生情况分析', x: 'center', y: 12 },

            tooltip: { trigger: "item", formatter: "{a}<br/>{b}:{c}({d}%)" },

            legend: {

                orient: 'vertical', x: 15, y: 15,

                data: ['2016', '2017', '2018', '2019', '2020']

            },

            series: [{  //配置第1个图表的数据系列

                name: '总人数:', type: 'pie',

                radius: '70%', center: ['50%', 190],

                data: [

                    { value: 1695, name: '2016' }, { value: 1790, name: '2017' },

                    { value: 2250, name: '2018' }, { value: 2550, name: '2019' },

                    { value: 2570, name: '2020' }]

            }]

        };

        myChart1.setOption(option1);  //使用指定的配置项和数据显示饼图

        //基于准备好的dom，初始化ECharts图表

        var myChart2 = echarts.init(document.getElementById("main2"));

        var option2 = {  //指定第2个图表的配置项和数据

            color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],

            backgroundColor: 'rgba(128, 128, 128, 0.1)',  //配置背景色，rgba设置透明度0.1

            tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },  //配置提示框组件

            legend: {  //配置图例组件

                left: 42, top: 25,

                data: ['大数据', 'Oracle', '云计算', '人工智能', '软件工程']

            },

            toolbox: {  //配置第2个图表的工具箱组件

                show: true, orient: 'vertical', left: 550, top: 'center',

                feature: {

                    mark: { show: true }, restore: { show: true }, saveAsImage: { show: true },

                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }

                }

            },

            xAxis: [{

                type: 'category',

                data: ['2016', '2017', '2018', '2019', '2020']

            }],  //配置第2个图表的x轴坐标系

            yAxis: [{ type: 'value', splitArea: { show: true } }],  //配置第2个图表的y轴坐标系

            series: [  //配置第2个图表的数据系列

                {

                    name: '大数据', type: 'bar', stack: '总量',

                    data: [301, 334, 390, 330, 320], barWidth: 45,

                },

                { name: 'Oracle', type: 'bar', stack: '总量', data: [101, 134, 90, 230, 210] },

                { name: '云计算', type: 'bar', stack: '总量', data: [191, 234, 290, 330, 310] },

                { name: '人工智能', type: 'bar', stack: '总量', data: [201, 154, 190, 330, 410] },

                { name: '软件工程', type: 'bar', stack: '总量', data: [901, 934, 1290, 1330, 1320] }

            ]

        };

        myChart2.setOption(option2);  //使用指定的配置项和数据显示堆叠柱状图

        //多图表联动配置方法1：分别设置每个echarts对象的group值

        myChart1.group = 'group1';

        myChart2.group = 'group1';

        echarts.connect('group1');

        //多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2

        //echarts.connect([myChart1,myChart2]);

    </script>

   

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 ECharts 文件 -->
	<script src="echarts.js"></script>
	<title>5-4 饼图与柱状图的联动图</title>
</head>
<body>
    <div id="main1" style="width: 600px; height:400px"></div>
	<div id="main2" style="width: 600px; height:400px"></div>
	<script type="text/javascript">
		//基于准备好的dom，初始化ECharts图表
		var myChart1 = echarts.init(document.getElementById("main1"));
		var option1 = {  //指定第1个图表option1的配置项和数据
			color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //配置背景色，rgba设置透明度0.1
			title: { text: '某大学各专业历年招生情况分析', x: 'center', y: 12 },
			tooltip: { trigger: "item", formatter: "{a}<br/>{b}:{c}({d}%)" },
			legend: {
				orient: 'vertical', x: 15, y: 15,
				data: ['2016', '2017', '2018', '2019', '2020']
			},
			series: [{  //配置第1个图表的数据系列
				name: '总人数:', type: 'pie',
				radius: '70%', center: ['50%', 190],
				data: [
					{ value: 1695, name: '2016' }, { value: 1790, name: '2017' },
					{ value: 2250, name: '2018' }, { value: 2550, name: '2019' },
					{ value: 2570, name: '2020' }]
			}]
		};
		myChart1.setOption(option1);  //使用指定的配置项和数据显示饼图
		//基于准备好的dom，初始化ECharts图表
		var myChart2 = echarts.init(document.getElementById("main2"));
		var option2 = {  //指定第2个图表的配置项和数据
			color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrchid', 'Navy'],
			backgroundColor: 'rgba(128, 128, 128, 0.1)',  //配置背景色，rgba设置透明度0.1
			tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },  //配置提示框组件
			legend: {  //配置图例组件
				left: 42, top: 25,
				data: ['大数据', 'Oracle', '云计算', '人工智能', '软件工程']
			},
			toolbox: {  //配置第2个图表的工具箱组件
				show: true, orient: 'vertical', left: 550, top: 'center',
				feature: {
					mark: { show: true }, restore: { show: true }, saveAsImage: { show: true },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] }
				}
			},
			xAxis: [{
				type: 'category',
				data: ['2016', '2017', '2018', '2019', '2020']
			}],  //配置第2个图表的x轴坐标系
			yAxis: [{ type: 'value', splitArea: { show: true } }],  //配置第2个图表的y轴坐标系
			series: [  //配置第2个图表的数据系列
				{
					name: '大数据', type: 'bar', stack: '总量',
					data: [301, 334, 390, 330, 320], barWidth: 45,
				},
				{ name: 'Oracle', type: 'bar', stack: '总量', data: [101, 134, 90, 230, 210] },
				{ name: '云计算', type: 'bar', stack: '总量', data: [191, 234, 290, 330, 310] },
				{ name: '人工智能', type: 'bar', stack: '总量', data: [201, 154, 190, 330, 410] },
				{ name: '软件工程', type: 'bar', stack: '总量', data: [901, 934, 1290, 1330, 1320] }
			]
		};
		myChart2.setOption(option2);  //使用指定的配置项和数据显示堆叠柱状图
		//多图表联动配置方法1：分别设置每个echarts对象的group值
		myChart1.group = 'group1';
		myChart2.group = 'group1';
		echarts.connect('group1');
 	    //多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
	    //echarts.connect([myChart1,myChart2]);
	</script>
    
</body>
</html>

 

wqqstudy
关注
  • 32
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
Echarts实现图表联动（多图联动、图表间联动）
沧笙踏歌的博客
09-08 7229
效果如图 本实例代码 function loadBlock9() { var myChart1 = echarts.init(document.getElementById("block9")); var myChart2 = echarts.init(document.getElementById("block10")); //series中的每一个label设置 var labelOption = { normal: { s
echarts 一个Echarts展示多个图表，共享一个图例，和提示
Llk20的博客
01-11 1208
【代码】echarts 一个Echarts展示多个图表，共享一个图例，和提示。
ECharts多图表联动功能
weixin_45653441的博客
01-10 5312
ECharts多图表联动功能的实现过程
【eCharts】第二部分 展示多个图表
Trees__的博客
06-23 2245
导入多个图表其实很简单,只需在第一个案例的基础上,在创建一个新的dom,初始新的实例,配置对应的内容展示案例图: 代码: 总结 以上就是今天要讲的内容，希望对大家有所帮助！！！
Echarts：在一个画布内画出多个图表
qq_43399210的博客
06-18 8600
Echarts：在一个画布内画出多个图表效果图option参数内容 以前做多个图表的效果是把不同的图表画在不同的画布里面，如果你要画三个图表需要用到三个div标签，下面是将三个图表画在一个div标签里面的效果。 效果图 option参数内容 const datas = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 8
echarts 创建多图表
明耀的博客
04-11 2144
<template> <div class="monitor-3"> <div> </div> <div v-for="item in dataList"> <div class="chart" :id="'echart-'+item.deviceId"></div> </div> </div> </template> <script> imp
Echarts的基本使用
buhaisao321的博客
03-20 641
<!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>Do.
多个echarts联动处理
qq_35381576的博客
11-28 1600
是 ECharts 提供的方法之一，用于将多个图表实例连接在一起，实现它们的联动效果。通过连接，一个图表的操作（如缩放、平移）会影响到其他连接的图表，从而在多个图表之间保持一致性的视图状态。比如有两个echart图表，需求要求鼠标放在其中一个图的指标上，放在周一，浮窗显示周一的数据，其他的图表也同时浮窗显示周一的，都显示对应的X轴坐标。事件，然后通过获取点击的坐标信息，将这些信息传递给其他图表的 tooltip 进行显示。例如，如果您对一个图表进行了缩放，其他连接的图表也会相应地进行缩放。
Echarts地图与图表联动
10-20
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，使得...通过以上步骤，我们便能构建出一个功能强大且交互丰富的ECharts地图与图表联动应用。
echarts实现地图定时切换散点与多图表级联联动详解
10-18
在本文中，我们将深入探讨如何使用ECharts实现地图定时切换散点与多图表级联联动的功能。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互功能，适用于各种Web应用程序。我们将按照...
echarts柱状图饼图折线图.zip
07-31
ECharts是一款由百度开源的，基于JavaScript的数据可视化库...在项目开发过程中，可以参考ECharts官方文档，学习更多高级特性和实战技巧，如动态加载数据、响应式设计、图表联动等，以提升数据可视化的质量和用户体验。
echarts实现一个页面同时显示多个图表
热门推荐
weixin_38981413的博客
12-27 9万+
一个JSON数据，通过echarts实现一个页面同时显示多个图表，我这是通过写一个option实现多个图表（折线图，饼图，关系图）展示，也就是说只要一个div（dom对象），实现多个不同形状的图表展示。总体采用了LayUI（表格）+eCharts技术，通过在html页面，引入自定义的js，实现预期页面效果。 自己在网上找了下，没有找到对应的文章，直接来说怎么实现，所以特意写了此文章，共同学习。总结技巧：1.先用最少的代码显示出图 2.【关键点】自己能控制每个图在指定的地方的显示 3.确定每个图位置，整体布
echarts多图表联动
Heby的博客
10-09 3396
echarts的多图表联动有两个方法 方法一:官网实例在配置项内关联Examples - Apache EChartshttps://echarts.apache.org/examples/zh/editor.html?c=dataset-link 方法二:使用connect进行联动 (1条消息) ECharts 联动效果_出埃及记-CSDN博客https://blog.csdn.net/u014452812/article/details/78202789第二种联动方法在性能还是代码的可维护性都不是
echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
一只爱吃糖的小羊
04-11 3万+
最近做的一个项目的其中一个页面有图表展示数据的需求，有柱状图、折线图和饼图，于是引入了强大的echarts. echarts的强大之处和有点这里就不多说了，详细请参照echarts官网和echarts在线demo。 但是我们的页面要展示的数据比较多，同一个页面有数个折线图、柱状图和饼图。项目引入echarts的方法是模块化引入，于是就有了一个问题：怎么在同一个页面用echarts同时展示多个图...
动态创建多个echarts图表
qq_34158117的博客
05-24 1万+
效果: <template> <div class="wrapper"> <Row v-for="(items, index) in secondeData" :key="index"> <Col span="12" v-for="m in items" :key="m"> <div ...
echarts 多图联动
日常学习集锦
03-10 1903
echarts 多表联动
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 442
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
echarts饼图与柱状图联动
05-26
ECharts支持图表之间的联动，可以通过设置事件来实现饼图和柱状图的联动。 具体实现步骤如下： 1. 在ECharts中设置两个图表，一个是饼图，一个是柱状图。 2. 给饼图和柱状图分别绑定相应的事件。 3. 在事件回调函数中，获取当前图表选中的数据，并将其传递给另一个图表。 示例代码如下： ```javascript // 饼图配置 var pieOption = { ... // 添加事件 series: [{ type: 'pie', data: [...], // 点击事件 emphasis: { itemStyle: { // 高亮效果 } }, // 饼图选中事件 selectedMode: 'single', selected: {...} }], ... }; // 柱状图配置 var barOption = { ... // 添加事件 series: [{ type: 'bar', data: [...], // 柱状图选中事件 emphasis: { itemStyle: { // 高亮效果 } } }], ... }; // 饼图绑定选中事件 myChart1.on('pieselectchanged', function (params) { // 获取选中的数据 var selectedData = params.selected; // 将选中的数据传递给柱状图 myChart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: selectedData[0].dataIndex }); }); // 柱状图绑定选中事件 myChart2.on('highlight', function (params) { // 获取选中的数据 var selectedData = params.highlighted; // 将选中的数据传递给饼图 myChart1.dispatchAction({ type: 'pieSelect', seriesIndex: 0, dataIndex: selectedData[0].dataIndex }); }); // 渲染图表 myChart1.setOption(pieOption); myChart2.setOption(barOption); ``` 需要注意的是，柱状图和饼图的数据要保持一致，否则无法实现联动效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值