echarts多图表级联之一，图表之间联动

最新推荐文章于 2025-09-11 11:09:42 发布

原创最新推荐文章于 2025-09-11 11:09:42 发布 · 1.3w 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用ECharts实现多图表之间的级联联动，通过示例展示每个图表作为一个独立实例，并详细说明了图表级联的具体步骤和HTML代码配置。

部署运行你感兴趣的模型镜像

1、示例

2、初始化图表，每个图表对应一个实例对象并加载初始化数据

// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));

// 为echarts对象加载数据
myChart1.setOption(option1);
myChart2.setOption(option2); //联动配置

3、图表间级联

// 分别设置每个实例的 group id
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接传入需要联动的实例数
// echarts.connect([myChart1,myChart2]);

4、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:300px;"></div>
<div id="main2" style="width: 400px;height:300px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {
           show:true,
           trriger:'xAxis'
        },
        legend: {
            data:['销量1']
        },

        xAxis: [{
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        }],
        yAxis: [
            {
                type: 'value',

            }
        ],
        series: [{
            name: '销量1',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
        }]
    };
    var option2 = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {
           show:true,
           trigger:'xAxis'
        },
        legend: {
            data:['销量2']
        },

        xAxis: [{
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
        }],
        yAxis: [
            {
                type: 'value',

            }
        ],
        series: [{
            name: '销量2',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
        }]
    };

    // 为echarts对象加载数据
    myChart1.setOption(option1);
    myChart2.setOption(option2); //联动配置

    // 分别设置每个实例的 group id
    myChart1.group = 'group1';
    myChart2.group = 'group1';
    echarts.connect('group1');
    // 或者可以直接传入需要联动的实例数
    // echarts.connect([myChart1,myChart2]);
</script>
</body>

您可能感兴趣的与本文相关的镜像