echarts legend两个自定义

<think>好的，我现在需要帮助用户在ECharts中配置两个自定义图例。首先，用户的需求很明确，但作为新手，我需要仔细理解ECharts的图例配置方法，特别是如何添加多个图例。 根据用户提供的引用内容，引用[2]中提到了legend的配置项，比如data、icon、textStyle等。但通常，一个图表默认只有一个图例。用户想要两个，这可能需要将图例分成两个不同的部分，可能放置在不同的位置，比如上下或左右。 首先，我应该确认ECharts是否支持多个图例组件。查阅ECharts文档后发现，可以通过配置多个legend对象来实现，每个legend对象设置不同的data和位置。例如，第一个图例放在顶部，第二个放在底部，或者左侧和右侧。 接下来，每个图例需要指定对应的数据系列。例如，如果图表中有多个系列，可以将部分系列分配给第一个图例，另一部分分配给第二个图例。这需要在legend的data属性中指定每个图例包含的name，并且对应的系列也要设置name匹配。 然后，设置每个图例的位置（top、bottom、left、right）以及样式，如itemWidth、itemHeight、textStyle等，确保它们不重叠，并且样式符合用户需求。 此外，需要注意，每个图例的data数组中的name必须与series中相应系列的name一致，否则图例无法正确关联显示。同时，可能需要调整图例的布局，比如使用grid来调整图表主体区域，避免被图例覆盖。 可能的示例代码结构是，在option中定义两个legend对象，分别设置不同的data和位置，并在series中为每个系列指定对应的图例。例如： legend: [ { data: ['图例1-1', '图例1-2'], top: '10%' }, { data: ['图例2-1', '图例2-2'], bottom: '10%' } ], series: [ {name: '图例1-1', ...}, {name: '图例1-2', ...}, {name: '图例2-1', ...}, {name: '图例2-2', ...} ] 这样，两个图例会分别显示在顶部和底部。同时，每个图例的样式可以通过各自的配置项自定义，如icon、textStyle等，引用[2]中的内容提供了这些配置的说明。 还需要测试代码是否正确，确保图例显示正常，点击交互是否正常工作。如果用户需要更复杂的样式，比如不同颜色或图标，可以在每个legend的data项中单独设置icon和textStyle，如引用[2]中的示例。 最后，整合这些配置，提供一个完整的示例代码，并解释每个部分的作用，帮助用户理解如何修改和扩展。</think>### ECharts双自定义图例配置方法 在ECharts中配置多个图例需通过设置多个`legend`对象，并指定不同的数据源和布局位置。以下是具体实现步骤及示例代码： #### 1. 基础配置逻辑 - **多图例支持**：ECharts允许通过数组形式定义多个图例组件，每个图例独立配置`data`属性和位置参数[^2]。 - **数据绑定**：每个图例的`data`字段需与`series`中对应系列的`name`字段匹配，实现交互联动。 - **样式分离**：可对每个图例单独设置图标类型、文字样式、布局位置等属性。 #### 2. 完整示例代码 ```javascript option = { // 配置第一个图例（顶部横向排列） legend: [{ data: ['销量-类别A', '销量-类别B'], // 对应series前两个系列 top: 10, itemWidth: 20, // 图标宽度 itemHeight: 14, // 图标高度 textStyle: { color: '#333' }, // 文字颜色 icon: 'rect' // 统一图标类型 }, // 配置第二个图例（底部自定义图标） { data: [{ name: '增长率', icon: 'path://M0 0 L20 0 L10 20 Z' // 自定义三角形图标 }, { name: '预测值', icon: 'circle', textStyle: { color: '#f00' } // 单独设置文字颜色 }], bottom: 10, orient: 'vertical', // 垂直排列 itemGap: 20 // 图例项间距 }], xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] }, yAxis: {}, series: [ // 对应第一个图例的系列 { name: '销量-类别A', type: 'bar', data: [320, 450, 280, 390] }, { name: '销量-类别B', type: 'bar', data: [220, 380, 210, 330] }, // 对应第二个图例的系列 { name: '增长率', type: 'line', data: [4.5, 6.2, 3.8, 5.1] }, { name: '预测值', type: 'line', data: [380, 410, 360, 420] } ] }; ``` #### 3. 关键配置说明 | 配置项 | 说明 | |-----------------|----------------------------------------------------------------------| | `legend[0].data` | 指定顶部图例包含的系列名称，需与`series`中前两个`name`对应 | | `legend[1].data` | 使用对象格式定义图标和样式，`icon`支持SVG路径(`path://`)、内置形状等[^2] | | `orient` | 控制排列方向，`horizontal`(默认水平)/`vertical`(垂直) | | `itemGap` | 调整图例项间距，解决多图例拥挤问题 | #### 4. 扩展技巧 - **动态更新**：通过`setOption`方法可实时修改图例数据 - **交互控制**：设置`selectedMode: false`可禁用点击隐藏功能 - **响应式布局**：使用百分比定位(如`left: '20%'`)适配不同屏幕尺寸