揭秘ECharts图例（leg）的神奇魅力：如何让图表一目了然，洞察数据真谛

引言

在数据可视化领域，ECharts 是一款功能强大且灵活的图表库。其中，图例（leg）作为图表的重要组成部分，承担着解释和区分不同数据系列的重要角色。本文将深入探讨 ECharts 图例的配置和使用，帮助您利用图例让图表一目了然，洞察数据真谛。

图例概述

1. 图例的作用

图例是图表中用于标识不同数据系列的组件，它能够清晰地展示每个系列的数据特点和趋势。通过图例，用户可以快速了解图表中包含的信息，方便对数据进行比较和分析。

2. 图例的类型

ECharts 支持多种类型的图例，包括：

颜色图例：适用于散点图、柱状图、折线图等图表。
形状图例：适用于饼图、环形图、雷达图等图表。
图片图例：适用于自定义图标或图片的图表。

图例配置详解

1. 基本配置

在 ECharts 中，图例的基本配置如下：

legend: { orient: 'horizontal', // 图例方向，可选 'horizontal' 或 'vertical' left: 'left', // 图例左侧位置，可配置百分比或具体像素值 top: 'top', // 图例顶部位置，可配置百分比或具体像素值 data: [{name: '系列1', icon: 'circle'}, {name: '系列2', icon: 'square'}], // 图例数据 selectedMode: 'multiple' // 选择模式，可选 'multiple' 或 'single' }

2. 高级配置

（1）图例项样式

legend: { // ... 其他配置 itemStyle: { color: '#333', // 图例项颜色 borderColor: '#666', // 图例项边框颜色 borderWidth: 1, // 图例项边框宽度 shadowBlur: 10, // 图例项阴影模糊程度 shadowOffsetX: 5, // 图例项阴影水平偏移 shadowOffsetY: 5, // 图例项阴影垂直偏移 shadowColor: 'rgba(0, 0, 0, 0.5)' // 图例项阴影颜色 } }

（2）图例交互

legend: { // ... 其他配置 selected: { '系列1': true, // 初始选中状态 '系列2': false }, selectedMode: 'multiple', // 选择模式 formatter: function (name) { return `${name} - ${data[name]}`; // 图例项文本格式化 } }

图例应用实例

1. 饼图

以下是一个饼图的示例，展示了如何配置图例：

var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data: ['系列1', '系列2', '系列3'] }, series: [ { name: '饼图', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '系列1'}, {value: 310, name: '系列2'}, {value: 234, name: '系列3'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option);

2. 柱状图

以下是一个柱状图的示例，展示了如何配置图例：

var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { trigger: 'axis' }, legend: { orient: 'vertical', left: 'left', data: ['系列1', '系列2'] }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] }, yAxis: { type: 'value' }, series: [ { name: '系列1', type: 'bar', data: [10, 20, 30, 40] }, { name: '系列2', type: 'bar', data: [15, 25, 35, 45] } ] }; myChart.setOption(option);