使用legend.itemStyle设置不同颜色的数据项
时间: 2024-03-29 21:40:40 浏览: 166
要使用 `legend.itemStyle` 设置不同颜色的数据项,可以借助 visualMap 组件来实现。
visualMap 组件是一个视觉映射组件,用于将数据映射到视觉元素(如颜色、大小等)。我们可以使用 visualMap 来设置不同数据项的颜色,并将 visualMap 组件配置到 legend 中。
具体实现步骤如下:
1. 在 `option.visualMap` 中设置 visualMap 的相关属性,如 `min`、`max`、`type`、`color` 等。
2. 在 `option.legend` 中配置 visualMap 组件:
```javascript
legend: {
data: ['数据项1', '数据项2', '数据项3'],
selectedMode: 'single',
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: '#333'
},
// 配置 visualMap
// 注意:visualMap 的 type 必须设置为 'piecewise'
// pieces 的 value 值必须与 legend.data 中的一一对应
// 每个 piece 的 color 属性可以设置不同的颜色
// selectedMode 必须设置为 false
// 在 itemWidth、itemHeight、itemGap 中设置 visualMap 的尺寸
// 在 formatter 中使用 visualMap-continuous 组件来显示 visualMap
itemStyle: {
borderColor: '#ccc',
borderWidth: 1
},
visualMap: {
show: false,
type: 'piecewise',
pieces: [
{ value: '数据项1', color: '#FF6E76' },
{ value: '数据项2', color: '#FFD45B' },
{ value: '数据项3', color: '#5AB1EF' }
]
},
formatter: function(value) {
return [
'<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:' + visualMapContinuous.getColor(value) + ';margin-right:5px;"></span>',
value
].join('');
}
}
```
注意,`visualMap` 的 `type` 必须设置为 `'piecewise'`,`pieces` 的 `value` 值必须与 `legend.data` 中的一一对应,每个 `piece` 的 `color` 属性可以设置不同的颜色,`selectedMode` 必须设置为 `false`,在 `itemWidth`、`itemHeight`、`itemGap` 中设置 visualMap 的尺寸,`formatter` 中使用 `visualMap-continuous` 组件来显示 visualMap。
3. 在 series 中使用 visualMap 组件:
```javascript
series: [
{
name: '数据项1',
type: 'line',
data: [10, 20, 30, 40],
// 配置 visualMap
visualMap: false // 隐藏 visualMap
},
{
name: '数据项2',
type: 'line',
data: [20, 30, 40, 50],
// 配置 visualMap
visualMap: false // 隐藏 visualMap
},
{
name: '数据项3',
type: 'line',
data: [30, 40, 50, 60],
// 配置 visualMap
visualMap: false // 隐藏 visualMap
}
]
```
在每个 series 中都设置 `visualMap: false`,表示隐藏 visualMap。
完整代码示例:
```javascript
option = {
title: {
text: 'legend.itemStyle 设置不同颜色的数据项',
left: 'center',
textStyle: {
color: '#333'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['数据项1', '数据项2', '数据项3'],
selectedMode: 'single',
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: '#333'
},
itemStyle: {
borderColor: '#ccc',
borderWidth: 1
},
visualMap: {
show: false,
type: 'piecewise',
pieces: [
{ value: '数据项1', color: '#FF6E76' },
{ value: '数据项2', color: '#FFD45B' },
{ value: '数据项3', color: '#5AB1EF' }
]
},
formatter: function(value) {
return [
'<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:' + visualMapContinuous.getColor(value) + ';margin-right:5px;"></span>',
value
].join('');
}
},
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
show: false,
inRange: {
color: ['#FF6E76', '#FFD45B', '#5AB1EF']
},
pieces: [
{ value: 0, color: '#FF6E76' },
{ value: 50, color: '#FFD45B' },
{ value: 100, color: '#5AB1EF' }
]
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据项1',
type: 'line',
data: [10, 20, 30, 40],
visualMap: false
},
{
name: '数据项2',
type: 'line',
data: [20, 30, 40, 50],
visualMap: false
},
{
name: '数据项3',
type: 'line',
data: [30, 40, 50, 60],
visualMap: false
}
]
};
```
以上代码中,我们在 visualMap 中设置了不同数据项的颜色,然后将 visualMap 组件配置到 legend 中,并且在 series 中使用 visualMap 组件。最终效果如下所示:
![legend.itemStyle 设置不同颜色的数据项](https://cdn.jsdelivr.net/gh/FE-ng/images/20211214180207.png)