echarts柱状图同series设置不同图例

### ECharts 中同一 Series 设置不同图例的配置方法 在 ECharts 中，`series` 是用来表示一组数据的核心组件。通常情况下，一个 `series` 对应一个图例项（即 `legend` 的一项）。然而，如果希望在一个 `series` 内实现多个不同的图例效果，则需要借助一些高级配置技巧。 #### 方法一：通过 `itemStyle` 和 `symbol` 自定义图标样式 ECharts 支持通过 `itemStyle` 来设置每个数据点的颜色[^2]，并通过 `symbol` 属性来自定义标记形状。这种方式可以在同一个 `series` 下模拟出具有不同视觉特性的图例效果。 以下是具体实现： ```javascript var option = { legend: { data: ['图例A', '图例B'], formatter: function (name) { if (name === '图例A') return '图例A'; if (name === '图例B') return '图例B'; return ''; } }, series: [{ name: '示例', type: 'scatter', symbolSize: 10, data: [ [10, 20], [15, 30], [20, 40] ], itemStyle: { color: function (params) { const colors = ['#FF0000', '#00FF00']; return colors[params.dataIndex % 2]; } }, markPoint: { label: { normal: { show: true, position: 'top' } }, data: [ { name: '图例A', coord: [10, 20], value: '图例A' }, { name: '图例B', coord: [15, 30], value: '图例B' } ] } }] }; ``` 在此代码中，我们利用了 `markPoint` 功能为某些特殊点标注额外的信息，并结合 `formatter` 函数动态生成对应的图例描述。 --- #### 方法二：使用辅助 `series` 模拟多图例 当单个 `series` 难以完全满足需求时，可以考虑创建多个独立但共享 X 轴或 Y 轴的小型 `series`，并将其组合在一起形成整体视图。这种方法虽然增加了复杂度，但却能更灵活地控制每组数据的表现形式。 下面是一个简单的例子： ```javascript var option = { legend: { data: ['类别1', '类别2'] }, xAxis: {}, yAxis: {}, series: [ { name: '类别1', type: 'line', data: [120, 200, 150, 80], lineStyle: { color: '#FF0000' }, itemStyle: { color: '#FF0000' } }, { name: '类别2', type: 'line', data: [60, 100, 70, 40], lineStyle: { color: '#00FF00' }, itemStyle: { color: '#00FF00' } } ] }; ``` 这里分别设置了两个线条作为单独的序列，从而实现了区分的效果。 --- #### 注意事项 - 如果尝试在同一 `series` 内部直接绑定多个图例名，则会违反 ECharts 的设计逻辑，因为每一个 `series` 只允许关联单一的 `legend` 数据项。 - 当采用复合策略构建虚拟图例外观时，请务必同步更新提示框 (`tooltip`) 或悬浮状态下的交互行为，以免造成用户体验上的混乱。 ---