实现效果
image.png
实现的重点
如何将折线图的填充区域按某个值去切割开，当前官网上的示例能做到填充区域有两个以上颜色分隔的基本是有两个及以上数据线。如：
image.png
当然你可以再额外再加一条同值数据线去假装是标线，如[200,200,200,200...],但是遇到走势凹进去的数据线，标线横跨凸起和凹进去的区域就不能用这种方式实现了。
于是我在实践中发现可以利用标线markLine+过渡areaStyle的方式去实现这种效果。
实现流程
-
首先我们从echarts官网上示例找个相似的图，就下面这个吧
image.png
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
2.第二步要做一条标线，查找官网配置项手册，可知标线可以添加如下属性
image.png
var data =[150, 230, 224, 218, 135, 147, 260]
var warnLine = '200'
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'line',
// 标记线
markLine : {
symbol:"none",
label:{
position:"middle",
formatter: "标记线"
},
data : [{
silent:false,
lineStyle:{
type:"solid",
color:"red"
},
yAxis: warnLine //警戒线在y轴上的坐标
}]
}
}]
};
- 给折现图添加个底色 areaStyle，查看官网手册可知除了可以配置纯色透明色，还可以配置渐变色和纹理色。我们本次就用到了渐变色。
我们选择线性渐变的形式。
3.1 采用渐变会有如下效果
image.png
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，
// 相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，
// 则该四个值是绝对的像素位置
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
3.2 利用通过offset来设置颜色过渡范围的方式，我们可以联系css的过渡色设置，
你是否曾经这样用过css的过渡背景色
background: linear-gradient(red 10%,red 30%, green 30%,green 90%, blue 90%,blue 100%);
然后发现只要在一个区间的极限处设置两个色值则可以明显分隔两个颜色!!!!
image.png
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 0.5, color: 'red' // 50% 处的颜色
}, {
offset: 0.5, color: 'blue' // 50% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
- 然后就是特别简单的计算问题了
计算出警戒值（标线的y值）在这个区域内的占比，
var warnProp = warnLine/ Math.max.apply(null,data)
ps:官方示例里的渐变起点是从数据最大值开始的，是从上往下渐变的，而我们要的渐变方向应该是从y=0向上渐变的。因此我们要调整一下方向和颜色
color: {
type: 'linear',
x: 0,
y: 1, //此处设置为1，表示从y=0处作为渐变起点
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'blue' // 0% 处的颜色
}, {
offset: warnProp, color: 'blue' // 标线处的颜色
}, {
offset: warnProp, color: 'red' // 标线处的颜色
}, {
offset: 1, color: 'red' // 100% 处的颜色
}],
global: false // 缺省为 false
}
效果如下：
image.png
5.基本完成，但是还差一点点，在标线上下的数据折线我们希望也能跟区域填充色保持一致，则可以添加如下配置：
image.png
visualMap: {
show: false,
pieces: [{
gt: 0,
lte: warnLine,
color: 'blue'
}, {
gt: warnLine,
lte: 500,
color: 'red'
}],
outOfRange: {
color: 'red'
}
},
6.完整配置如下：
var data =[150, 230, 224, 218, 135, 147, 260]
var warnLine = '210'
var maxVal = Math.max.apply(null,data)
var warnProp = warnLine/ maxVal
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
visualMap: {
show: false,
pieces: [{
gt: 0,
lte: warnLine,
color: 'blue'
}, {
gt: warnLine,
lte: maxVal,
color: 'red'
}],
outOfRange: {
color: 'red'
}
},
series: [{
data: data,
type: 'line',
markLine : {
symbol:"none",
label:{
position:"middle",
formatter: "警戒线",
color:'red'
},
data : [{
silent:false,
lineStyle:{
type:"solid",
color:"red"
},
yAxis: warnLine //警戒线在y轴上的坐标
}]
},
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 1, //此处设置为1，表示从y=0处作为渐变起点
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'blue' // 0% 处的颜色
}, {
offset: warnProp, color: 'blue' // 标线处的颜色
}, {
offset: warnProp, color: 'red' // 标线处的颜色
}, {
offset: 1, color: 'red' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}]
};