echarts柱状图多个图例

### 修改 ECharts 柱状图的图例样式 在 ECharts 中，可以通过配置项 `legend` 来自定义柱状图的图例样式。具体来说，可以调整多个参数以满足不同的视觉需求。 #### 基本配置选项 - **icon**: 设置图例标记的图形，默认为自动匹配系列类型的图标。支持多种内置形状如 circle、rect 等[^1]。 ```javascript legend: { icon: 'circle' } ``` - **textStyle**: 定义图例文字的颜色、字体大小和其他样式属性。 ```javascript legend: { textStyle: { color: '#333', fontSize: 14, fontWeight: 'bold' } } ``` - **itemWidth 和 itemHeight**: 控制图例外部边框宽度和高度。 ```javascript legend: { itemWidth: 20, itemHeight: 10 } ``` - **orient**: 设定图例列表的方向（'horizontal' 或者 'vertical'），默认水平排列。 ```javascript legend: { orient: 'vertical' } ``` - **align**: 对齐方式，在垂直布局下有效，可选值有 "left", "right"。 ```javascript legend: { align: 'left' } ``` 通过上述配置，可以根据实际应用场景灵活定制图例外观，使图表更加美观易读。 ```javascript option = { legend: { data: ['销量'], top: 'top', // 图例位置 icon: 'roundRect', // 自定义图例标志形式 itemGap: 20, // 各个item之间的间隔 itemWidth: 25, // 图例标记的图形宽度 itemHeight: 14, // 图例标记的图形高度 textStyle: { // 文字样式 color: '#fff', fontSize: 16 }, formatter: function (name) { return name + ': '; } // 可以用来格式化显示的文字 }, }; ```

在 Echarts 中，要绘制多个度量的柱状图，你可以使用堆叠柱状图或者并列柱状图。下面分别介绍这两种方式的实现方法： 1. 堆叠柱状图（Stacked Bar Chart）： 堆叠柱状图可以用来展示多个度量在同一个类别下的对比关系，每个度量的值会叠加在一起。 示例代码如下： ```javascript option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['度量1', '度量2', '度量3'] // 设置图例名称 }, xAxis: { type: 'category', data: ['类别1', '类别2', '类别3'] // 设置类别名称 }, yAxis: { type: 'value' }, series: [ { name: '度量1', type: 'bar', stack: '总量', data: [100, 200, 300] // 设置度量1的数据 }, { name: '度量2', type: 'bar', stack: '总量', data: [150, 250, 350] // 设置度量2的数据 }, { name: '度量3', type: 'bar', stack: '总量', data: [200, 300, 400] // 设置度量3的数据 } ] }; ``` 2. 并列柱状图（Clustered Bar Chart）： 并列柱状图可以用来展示多个度量在同一个类别下的并列关系，每个度量的值会并列显示。 示例代码如下： ```javascript option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['度量1', '度量2', '度量3'] // 设置图例名称 }, xAxis: { type: 'category', data: ['类别1', '类别2', '类别3'] // 设置类别名称 }, yAxis: { type: 'value' }, series: [ { name: '度量1', type: 'bar', data: [100, 200, 300] // 设置度量1的数据 }, { name: '度量2', type: 'bar', data: [150, 250, 350] // 设置度量2的数据 }, { name: '度量3', type: 'bar', data: [200, 300, 400] // 设置度量3的数据 } ] }; ``` 以上示例代码中的 `data` 数组对应每个度量在不同类别下的数值，你可以根据实际情况修改数据和其他配置，以满足你的需求。