echarts环图颜色渐变
时间: 2025-07-04 10:18:58 浏览: 10
在 ECharts 中实现环图(环形图)的颜色渐变效果,可以通过配置 `series` 中的 `itemStyle` 或 `axisLine` 等属性来完成。以下为常见的设置方法:
### 1. 使用线性渐变填充环图主体
在 `series` 的 `itemStyle` 中配置颜色渐变,可以实现环图主体的颜色过渡效果。例如使用 `echarts.graphic.LinearGradient` 来定义线性渐变方向和颜色分布[^2]:
```javascript
option = {
series: [{
type: 'pie',
radius: ['40%', '70%'],
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FC6679" },
{ offset: 1, color: "#FDC581" }
])
},
data: [
{ value: 335, name: 'A' },
{ value: 310, name: 'B' },
{ value: 234, name: 'C' }
]
}]
};
```
### 2. 设置灰色背景环形
若需要设置灰色背景的环图,可以在 `series` 的 `itemStyle` 中指定固定颜色或灰度渐变[^1]:
```javascript
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#e0e0e0' },
{ offset: 1, color: '#cccccc' }
]
}
}
```
### 3. 在仪表盘类型中实现内部渐变圆环
如果使用的是 `gauge` 类型作为环图展示,并希望其内部有渐变效果,可以在 `axisLine.lineStyle.color` 中定义渐变色[^3]:
```javascript
series: [{
type: 'gauge',
radius: '53%',
startAngle: 210,
endAngle: -30,
axisLine: {
lineStyle: {
color: [[1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 0, color: 'rgba(145,207,255,0)' },
{ offset: 0.5, color: 'rgba(145,207,255,0.2)' },
{ offset: 1, color: 'rgba(145,207,255,1)' }
])]],
width: 2
}
}
}]
```
### 4. 多个系列使用不同渐变色
对于多个数据系列,可以分别定义不同的渐变色数组,以实现多样化的视觉效果[^2]:
```javascript
color: [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#AF3ADB" },
{ offset: 1, color: "#4E65DD" }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FC6679" },
{ offset: 1, color: "#FDC581" }
])
]
```
以上方法均支持响应式设计,能够根据容器大小自适应调整,确保图表在不同设备上显示良好。
阅读全文
相关推荐


















