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

最新推荐文章于 2024-09-24 10:46:30 发布
最新推荐文章于 2024-09-24 10:46:30 发布
阅读量2.8k 收藏 36
点赞数 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
关注
ECharts的多图表联动
FpwgTcl的博客
09-21 706
其中一个强大的功能是多图表联动，它允许用户在不同的图表之间进行交互，并实现数据的联动展示和分析。接下来，在JavaScript代码块中，我们可以开始编写实现多图表联动的逻辑。我们可以通过监听一个图表的事件，然后在事件回调函数中触发另一个图表的交互操作，从而实现联动效果。例如，我们可以监听图表1的点击事件，在点击某个数据项时，触发图表2的更新操作。通过以上步骤，我们可以灵活地实现多图表联动，提供更好的数据展示和分析能力。类似地，我们也可以在图表2上监听事件，实现对图表1的联动效果。然后，我们可以通过调用。
Echart3多图联动，一个时间轴控制多个图
04-11
Echart3多图联动，一个时间轴控制多个图，希望能够帮到大家!
【数据可视化】Echarts的高级功能
zxctsclrjjjcph的博客
03-28 2152
主题是ECharts图表的风格抽象，用于统一多个图表的风格样式。为了顺应不同的绘图风格需求，需要下载ECharts官方提供的default、infographic、shine、roma、macarons、vintage等主题，并利用某大学各专业招生数据实现动态主题的切换。此外，为了让图表整体换装，还需要制作自定义主题。ECharts除了默认主题样式之外，还可以使用主题在线构建工具，根据需求快速直观地生成主题配置文件，并在ECharts中使用自定义的主题样式。自定义主题的步骤如下。
echarts两饼图连接映射
最新发布
longshehui的博客
09-24 362
最近开发中，突然来了一个echarts还要很快开发出来。。要老命了，遭老罪了。。先看需求图思考了半天还是有点思路，前端画图不就是搭积木嘛。1. 中间蓝色阴影部分用canvas来做2. 获取容器和饼图在页面上的位置，绘制梯形3. 使用2个mask作为饼图圆心，用于遮挡echarts中心位置的梯形canvas首先获取容器和饼图在页面上的位置获取图表实例中的扇形图坐标难点在于绘制梯形，我们需要获取到梯形在饼图中的四个顶点然后利用定位将mask部分，放在饼图中间遮挡住多余的梯形。
ECharts多图表联动功能
weixin_45653441的博客
01-10 5609
ECharts多图表联动功能的实现过程
echarts 多图联动
日常学习集锦
03-10 2012
echarts 多表联动
ECharts的多表联动
2301_81685623的博客
04-15 1016
当需要展示的数据比较多时，放在一个图表进行展示的效果不佳，此时，可以考虑使用两个图表进行联动展示。ECharts提供了多图表联动的功能(connect)，联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。(1)分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系。(2)直接调用ECharts 的connect方法,参数为一个由多个需要联动的ECharts 对象组成的数组。
echarts多图表联动
Heby的博客
10-09 3481
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的多表联动
2301_81170993的博客
04-15 638
在这个例子中，我们有两个 ECharts 实例chart1和 chart2。图表1是一个柱状图，图表2是一个线形图。我们监听图表1的点击事件，然后更新图表2中对应索引的数据点。这样，当用户点击图表1中的某个柱子时，图表2的相应数据点会随之变化，实现了两个图表的联动。ECharts 的多表联动是指多个图表实例能够共享同一套数据，并且在一个图表实例上的操作会影响其他图表实例。这通常通过监听 ECharts 提供的事件系统来实现。
echarts实现多图表联动效果
红烧咸咸鱼
05-21 724
echarts实现多图表联动效果
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
Echarts地图与图表联动
10-20
使用Echarts实现地图与图表的联动。这里的效果为点击美国的某个州，下面就会对应的刷新该州与其他州人口的对比饼图。全网首发，独此一家。
echarts柱状图饼图折线图.zip
07-31
ECharts是一款由百度开源的，基于JavaScript的数据可视化库...在项目开发过程中，可以参考ECharts官方文档，学习更多高级特性和实战技巧，如动态加载数据、响应式设计、图表联动等，以提升数据可视化的质量和用户体验。
vue3 数据可视化实战echarts图表柱状图和饼图的联动_echarts饼图与柱状图联动
2401_84181986的博客
04-17 633
饼图思路很简单，接受一个props.list 用于数据驱动，需要注意的是饼图要绑定一个key，用于变化数据时候更新。还有在销毁组件里面重新实例化echarts图表对象。这里面就是普通的echarts画柱状图的方法，需要注意的是visualMap画区域颜色，markLine来默认画出第一条线。使用实例化的myChart 和 getZr方法 作用于line上面来调用defaultClick事件。用于重绘区域颜色和线上数据，改变bie的数据，根据Y轴的值 预估区间，来获取对应的数组的index。
echarts饼图与柱状图联动展示
hongyi_8848的博客
07-07 3203
效果描述：点击左侧饼图动态更新右侧柱状图数据，维度多时增加滚动条 <div id="operationTimeSettingChartPieBox" class="chart-box"></div> <span>手术时长与各维度相关性分析</span> <div id="operationTimeSettingChartBarBox" class="chart-box"></div> <span>单一维度平均手术
ECharts多表联动图
发财糕
04-10 754
当需要展示的数据比较多时，放在一个图表进行展示的效果不佳，此时，可以考虑使用两个图表进行联动展示。ECharts 提供了多图表联动的功能(connect)，联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角坐标系下tooltip 的联动。
Echarts实现图表联动（多图联动、图表间联动）
沧笙踏歌的博客
09-08 7343
效果如图 本实例代码 function loadBlock9() { var myChart1 = echarts.init(document.getElementById("block9")); var myChart2 = echarts.init(document.getElementById("block10")); //series中的每一个label设置 var labelOption = { normal: { s
echart多图联动
weixin_39808181的博客
05-28 286
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、付费专栏及课程。

余额充值