echarts 面积图的线性渐变的实现方法
在 ECharts 中实现线性渐变效果，需通过areaStyle.color的对象配置而非 CSS 的linear-gradient函数。基础面积图默认通过areaStyle: {}填充，而自定义渐变需设置type: 'linear'并定义colorStops数组，其中offset（0~1）对应颜色位置。例如，{offset:0, color:'red'}与{offset:1, color:'yellow'}可实现红到黄的水平渐变。关键参数x,y,x2,y2（0~1）定义渐变轴线起点与终点，如x:0,y:0,x2:1,y2:0表示从左到右的轴线，调整这些值可旋转渐变方向，适应不同图形需求。
在线性渐变中提到了如下效果：
本篇接着讲一讲该效果是如何实现的。
在 echarts 基础面积图中，我们已经知道基础面积图是通过如下配置实现的：
series: {
areaStyle: {}
}
其实，areaStyle 有个 color 属性可以配置面积图的填充颜色。
比如默认颜色是蓝色：
通过配置：
series: {
areaStyle: {
color: '#91cc75'
}
}
可以实现如下绿色填充：
那么 color 可不可以像 css 中那样使用 linear-gradient 函数实现线性渐变呢？比如：
series: {
areaStyle: {
color: 'linear-gradient(0deg, red 0%, yellow 100%)'
}
}
很遗憾，不支持。
echarts 中是通过把 color 配置为一个对象实现的。
为了便于理解，我先把基础面积图设置为如下矩形的形式：
现在，areaStyle 配置如下：
areaStyle: {
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: 'red'
},
{
offset: 1,
color: 'yellow'
}
]
}
}
其中，type: ‘linear’ 表示线性渐变，相当于 css 中的 linear-gradient 函数，colorStops 相当于 linear-gradient 的颜色参数。offset 的值为 0~1，相当于颜色参数的 0%~100%。
来看效果：
从左到右，从红色线性渐变到了黄色。
再来回顾一下 css 中的效果：
linear-gradient(0deg, red 0%, yellow 100%)
0deg 表示从下到上，而 echarts 中默认是从左到右，那么 echarts 中有没有类似 linear-gradient 的角度参数，可以调整渐变的方向呢？接着往下看。
为了看起来更清晰，我把 echarts 的渐变也先配置为色带：
colorStops: [
{
offset: 0,
color: 'red',
},
{
offset: 0.33,
color: 'red',
},
{
offset: 0.33,
color: 'yellow',
},
{
offset: 0.66,
color: 'yellow',
},
{
offset: 0.66,
color: 'green',
},
{
offset: 1,
color: 'green',
},
],
效果如下：
现在可以试着调整渐变方向了。其实很简单，在 color 中配置 x,y 和 x2,y2 即可。
x,y,x2,y2 的取值也都是 0~1，表示范围的 0% 到 100%，比如下列配置：
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: ...
}
在本矩形面积图示例中，x:0, y:0 表示面积图的左上角，x2:1, y2:0 表示面积图的右上角。
此配置就是面积图的从左到右渐变，与默认行为一致。实际上，为了避免莫名其妙的问题，应该始终配置 x,y,x2,y2。
从 x:0, y:0 到 x2:1, y2:0 的水平线，就是渐变轴线，渐变填充就是与该轴线垂直的无数条颜色线的排布。
图示如下，该标线就是渐变轴线，也就是矩形的顶边：
再来看下面的配置：
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0.5,
y2: 0,
colorStops: ...
}
在这个配置中，水平方向只设置到了 0.5，效果如下，同样用标线显示了渐变轴线：
x2:0.5，表示水平方向范围为 50%，50% 就是 Thu 的位置。
于是 colorStops 只在前 50% 起作用，后 50% 默认填充 colorStops 中渐变轴线最顶端的颜色。
细心的读者也许已经领悟到，通过灵活配置 x,y,x2,y2 的值，可以旋转渐变轴线，等同于 linear-gradient 中的角度参数。
比如下列配置：
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0.5,
y2: 1,
colorStops: ...
}
渐变轴线为 (Mon, 100) 到（Thu, 0）：
现在我们来看一个普通点的，非矩形的面积图。
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0.5,
y2: 1,
colorStops: ...
}
渐变轴线的配置依然如上所示，但数据系列中 y 轴最大值为 200，请问下图中标记的渐变轴线对吗？
肉眼可见，标记线与颜色线没有垂直，所以该标记肯定不是渐变轴线。那么真正的渐变轴线在哪里呢？
前文说过，x,y,x2,y2 取的是 0～1 范围，是面积区域的百分比。此时，y 轴方向，最大值是 200，所以 y:0 对应 200，因此真正的渐变轴线如下：
类似的，如果数据系列中最小值为 -100，那么 y2:1 对应的位置就是 -100，如下图所示：
至此，我们可以标记出文章开头效果的渐变轴线：
也可以调整为其他渐变方向：
完整代码如下：
<!DOCTYPE html>
<head>
<script src="../lib/echarts.v6.0.0.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script>
const myChart = echarts.init(document.getElementById('main'))
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: { show: true },
boundaryGap: false,
},
yAxis: {
type: 'value',
},
series: {
markLine: {
data: [
[
{ xAxis: 'Mon', yAxis: 260 },
{ xAxis: 'Mon', yAxis: 0 },
],
],
},
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(24, 144, 255, 0.3)',
},
{
offset: 1,
color: 'rgba(24, 144, 255, 0)',
},
],
},
},
},
}
myChart.setOption(option)
</script>
</body>
线性渐变的灵活性在于x,y,x2,y2与colorStops的协同配置。通过调整轴线端点坐标，可实现任意角度的渐变效果，如对角线或垂直方向。需注意坐标系范围（如 y 轴最大值 200 时，y:0 对应 200，y2:1 对应-100），确保渐变轴线与数据区域匹配。实际应用中，建议始终显式配置x,y,x2,y2以避免默认值引发的意外效果。结合透明色与多色阶，可实现层次丰富的视觉效果，提升数据可视化表现力，使图表既美观又直观传达信息。
以上关于echarts 面积图的线性渐变的实现方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » echarts 面积图的线性渐变的实现方法
