echarts柱状图legend的icon大小

在 ECharts 中，legend 的 icon 大小可以通过 legend.icon 属性来设置。该属性可以接受一个数组，数组中的每个元素都是一个字符串，用于设置图例的 icon 大小。你可以使用以下几种方式来设置 icon 的大小： 1. 使用数字：例如，设置 legend.icon 为 [10, 20]，表示第一个图例的 icon 宽度为 10 像素，高度为 20 像素。 2. 使用百分比：例如，设置 legend.icon 为 ['50%', '70%']，表示第一个图例的 icon 宽度为容器宽度的 50%，高度为容器高度的 70%。 3. 使用字符串：例如，设置 legend.icon 为 ['10', '20']，表示第一个图例的 icon 宽度为 10，高度为 20。 这些设置方式都可以通过 legend.iconSize 属性来统一设置所有图例的 icon 大小。例如，设置 legend.iconSize 为 20，表示所有图例的 icon 宽度和高度都为 20 像素。 需要注意的是，legend.icon 和 legend.iconSize 属性只对部分类型的图表有效，如散点图、柱状图等。对于其他类型的图表，如线图、饼图等，可能需要使用其他方式来调整图例的图标大小。

### 使用 ECharts 柱状图自定义 Legend `itemStyle` 属性设置多个颜色 在构建复杂的数据可视化应用时，ECharts 提供了丰富的配置选项用于定制化图表外观。对于柱状图而言，可以通过调整 `legend` 组件中的 `data` 字段以及对应的 `series` 配置项来实现不同类目下的柱条拥有不同的颜色。 #### 定义数据源并指定每根柱子的颜色 为了给每一个类别分配特定的颜色，在准备数据的时候就需要提前规划好各个项目的样式属性。下面是一个简单的例子展示了如何为每个系列设定独特的色彩： ```javascript var option = { legend: { data: ['直接访问', '邮件营销'] }, xAxis: { type: 'category', data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] }, yAxis: {}, series: [{ name: '直接访问', type: 'bar', data: [ {value: 320, itemStyle: {color: '#FF4500'}}, {value: 332, itemStyle: {color: '#FF8C00'}}, {value: 301, itemStyle: {color: '#FFD700'}} ] }, { name: '邮件营销', type: 'bar', data: [ {value: 120, itemStyle: {color: '#ADFF2F'}}, {value: 132, itemStyle: {color: '#00FA9A'}}, {value: 101, itemStyle: {color: '#ADD8E6'}} ] } ] }; ``` 这段代码片段中，通过向 `series.data` 数组内的对象添加 `itemStyle.color` 来分别为每一根柱形指定了具体的显示颜色[^3]。 #### 自定义图例图标风格 除了改变实际绘制出来的图形颜色外，还可以进一步美化图例外观使其更加直观易懂。这涉及到修改 `legend.itemStyle` 的参数，比如形状(`icon`)、边框宽度(`borderWidth`)等: ```javascript legend: { top: 'top', itemStyle: { borderColor: '#fff', borderWidth: 2, borderRadius: 5 }, icon: 'circle' // 可选圆形作为默认矩形之外的选择 } ``` 上述配置会使得所有的图例标记都呈现圆角方形轮廓，并且采用白色描边；而将 `icon` 设置成 `'circle'` 则会让这些标记变成实心的小圆圈[^2]。 综上所述，通过对 `series` 和 `legend` 进行细致入微的控制，可以很容易地创建出色彩斑斓又美观大方的柱状统计图。