echarts小技巧:多图共用图例

今天带来三种多图共用图例的方法

第一种:单容器------使用dataset

dataset数据集是专门用于管理数据的组件。在echarts中,我们可以给系列单独赋值,也可以使用数据集进行统一管理。

配置如下

js 复制代码
    var option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
        },
        series: [
            {
                type: 'pie',
                radius: '20%',
                center: ['25%', '30%']
                // No encode specified, by default, it is '2012'.
            },
            {
                type: 'pie',
                radius: '20%',
                center: ['75%', '30%'],
                encode: {
                    itemName: 'product',
                    value: '2013'
                }
            },
            {
                type: 'pie',
                radius: '20%',
                center: ['25%', '75%'],
                encode: {
                    itemName: 'product',
                    value: '2014'
                }
            },
            {
                type: 'pie',
                radius: '20%',
                center: ['75%', '75%'],
                encode: {
                    itemName: 'product',
                    value: '2015'
                }
            }
        ]
    };

第二种:单容器------使用gridIndex、xAxisIndex和yAxisIndex

1、 设置多个grid以便图形可以分开展示

2、 为同属于一个图例的系列加上相同的name

最终得到结果如下

附代码

js 复制代码
        var option = {
        grid: [
            { left: '7%', top: '7%', width: '38%', height: '38%' },
            { right: '7%', top: '7%', width: '28%', height: '38%' },
            { left: '7%', bottom: '7%', width: '38%', height: '38%' },
            { right: '7%', bottom: '7%', width: '38%', height: '38%' }
        ],
        xAxis: [
            {
                type: 'category',
                gridIndex: 0,
                data: ['1', '2', '3', '4']
            },
            {
                type: 'category',
                gridIndex: 1,
                data: ['1', '2', '3', '4']
            },
            {
                type: 'category',
                gridIndex: 2,
                data: ['1', '2', '3', '4']
            },
            {
                type: 'category',
                gridIndex: 3,
                data: ['1', '2', '3', '4']
            }
        ],
        yAxis: [
            {
                type: 'value',
                gridIndex: 0,
            },
            {
                type: 'value',
                gridIndex: 1,
            },
            {
                type: 'value',
                gridIndex: 2,
            },
            {
                type: 'value',
                gridIndex: 3,
            }
        ],
        legend: {},
        tooltip: {},
        series: [
            {
                type: 'bar',
                name: '111',
                yAxisIndex: 0,
                xAxisIndex: 0,
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
            },
            {
                type: 'bar',
                name: '222',
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
                yAxisIndex: 1,
                xAxisIndex: 1,
            },
            {
                type: 'line',
                name: '111',
                yAxisIndex: 2,
                xAxisIndex: 2,
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
            },
            {
                type: 'line',
                name: '222',
                yAxisIndex: 3,
                xAxisIndex: 3,
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
            }
        ]
    };

第三种:多容器------利用API,为legend绑定事件

  1. 首先必须了解知道,修改legend对象中的seleted属性可以改变图例选中状态
  2. 随后为其中一个容器绑定legend切换事件legendselectchanged,在事件回调中手动修改另一个容器图例选中状态,即可同步操作

值得注意的是容器的echarts实例的渲染顺序,绑定事件的图表必须先渲染。并需要保证被修改图例状态的实例存在。

代码如下

js 复制代码
    var e1 = echarts.init(document.querySelector('#e1'));
    var e2 = echarts.init(document.querySelector('#e2'));

    var option = {
        grid: [
            { left: '7%', top: '7%', width: '38%', height: '38%' },
            { right: '7%', top: '7%', width: '28%', height: '38%' },
            { left: '7%', bottom: '7%', width: '38%', height: '38%' },
            { right: '7%', bottom: '7%', width: '38%', height: '38%' }
        ],
        xAxis: [
            {
                type: 'category',
                gridIndex: 0,
                data: ['1', '2', '3', '4']
            },
            {
                type: 'category',
                gridIndex: 1,
                data: ['1', '2', '3', '4']
            },
            {
                type: 'category',
                gridIndex: 2,
                data: ['1', '2', '3', '4']
            },
            {
                type: 'category',
                gridIndex: 3,
                data: ['1', '2', '3', '4']
            }
        ],
        yAxis: [
            {
                type: 'value',
                gridIndex: 0,
            },
            {
                type: 'value',
                gridIndex: 1,
            },
            {
                type: 'value',
                gridIndex: 2,
            },
            {
                type: 'value',
                gridIndex: 3,
            }
        ],
        legend: {},
        tooltip: {},
        series: [
            {
                type: 'bar',
                name: '111',
                yAxisIndex: 0,
                xAxisIndex: 0,
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
            },
            {
                type: 'bar',
                name: '222',
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
                yAxisIndex: 1,
                xAxisIndex: 1,
            },
            {
                type: 'line',
                name: '111',
                yAxisIndex: 2,
                xAxisIndex: 2,
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
            },
            {
                type: 'line',
                name: '222',
                yAxisIndex: 3,
                xAxisIndex: 3,
                data: new Array(4).fill(0).map(() => (Math.random() * 100).toFixed(2)),
            }
        ]
    };
    e1.setOption(option);
    e2.setOption(option);
    e1.off().on('legendselectchanged', function (params) {
        var tempOption = {
            legend: {
                selected: params.selected
            }
        }
        e2.setOption(tempOption)
    });

总结

前两种情况可以覆盖大部分场景,但对于数据的处理比较繁琐,必须搞明白数据与坐标系之间的对应关系。最后一个方法也有不足之处,虽然一劳永逸,但与执行顺序和实例自身状态关联较深。可根据需要选择最佳方式~

相关推荐
Mintopia几秒前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia6 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
掘金安东尼25 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~27 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务30 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛30 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑33 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭39 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿44 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端