首页echarts柱状图修改图例样式

echarts柱状图修改图例样式

时间: 2025-02-18 17:27:04 浏览: 64

### 修改 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 + ': '; } // 可以用来格式化显示的文字 }, }; ```

阅读全文