實現(xiàn)效果
image.png
實現(xiàn)的重點
如何將折線圖的填充區(qū)域按某個值去切割開，當前官網(wǎng)上的示例能做到填充區(qū)域有兩個以上顏色分隔的基本是有兩個及以上數(shù)據(jù)線。如：
image.png
當然你可以再額外再加一條同值數(shù)據(jù)線去假裝是標線，如[200,200,200,200...],但是遇到走勢凹進去的數(shù)據(jù)線，標線橫跨凸起和凹進去的區(qū)域就不能用這種方式實現(xiàn)了。
于是我在實踐中發(fā)現(xiàn)可以利用標線markLine+過渡areaStyle的方式去實現(xiàn)這種效果。
實現(xiàn)流程
-
首先我們從echarts官網(wǎng)上示例找個相似的圖，就下面這個吧
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.第二步要做一條標線，查找官網(wǎng)配置項手冊，可知標線可以添加如下屬性
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軸上的坐標
}]
}
}]
};
- 給折現(xiàn)圖添加個底色 areaStyle，查看官網(wǎng)手冊可知除了可以配置純色透明色，還可以配置漸變色和紋理色。我們本次就用到了漸變色。
我們選擇線性漸變的形式。
3.1 采用漸變會有如下效果
image.png
// 線性漸變，前四個參數(shù)分別是 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來設置顏色過渡范圍的方式，我們可以聯(lián)系css的過渡色設置，
你是否曾經這樣用過css的過渡背景色
background: linear-gradient(red 10%,red 30%, green 30%,green 90%, blue 90%,blue 100%);
然后發(fā)現(xiàn)只要在一個區(qū)間的極限處設置兩個色值則可以明顯分隔兩個顏色!!!!
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值）在這個區(qū)域內的占比，
var warnProp = warnLine/ Math.max.apply(null,data)
ps:官方示例里的漸變起點是從數(shù)據(jù)最大值開始的，是從上往下漸變的，而我們要的漸變方向應該是從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.基本完成，但是還差一點點，在標線上下的數(shù)據(jù)折線我們希望也能跟區(qū)域填充色保持一致，則可以添加如下配置：
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
}
}
}]
};
