echarts设置legend色色块颜色
时间: 2023-09-08 19:13:57 浏览: 218
要设置 ECharts 图表中 legend 的色块颜色,你可以通过使用 `itemStyle` 属性来实现。具体步骤如下:
1. 在 `legend` 配置项中,为每个图例项设置一个唯一的 `name` 属性。
2. 在 `series` 配置项中,找到对应的数据系列,为其设置相同的 `name` 属性。
3. 在 `series` 的 `itemStyle` 属性中,为每个数据系列设置一个 `color` 属性,值为你想要设置的颜色。
下面是一个示例代码,演示了如何设置图表的 legend 色块颜色:
```javascript
// 设置图表的 legend 色块颜色
option = {
legend: {
data: ['系列1', '系列2', '系列3'] // 设置图例项的名称
},
series: [
{
name: '系列1', // 设置数据系列的名称,与图例项对应
type: 'bar',
data: [10, 20, 30],
itemStyle: {
color: 'red' // 设置数据系列的色块颜色
}
},
{
name: '系列2',
type: 'bar',
data: [40, 50, 60],
itemStyle: {
color: 'blue'
}
},
{
name: '系列3',
type: 'bar',
data: [70, 80, 90],
itemStyle: {
color: 'green'
}
}
]
};
// 使用设置后的配置项初始化图表
myChart.setOption(option);
```
你可以根据需要修改示例代码中的图例项名称和色块颜色。这样,当你的图表呈现出来时,legend 的色块颜色将会与数据系列的颜色保持一致。
阅读全文