当前echarts版本：5.3.1，其他版本也可参考。
效果图：
image.png
echarts option代码如下，结合注释部分理解：
var upLimit = 600; // 上限
var lowlimit = 300; // 下限
option = {
tooltip: {
trigger: 'axis',
boundaryGap: false
},
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value'
// boundaryGap: [0, '30%']
},
visualMap: [
{
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [
{
// 不指定 min，表示 min 为无限大（-Infinity）。
max: lowlimit, // 没有设置最小值，表明当前范围 [-Infinity, max] 变色
color: 'red'
},
{
// 不指定 max，表示 max 为无限大（Infinity）。
min: upLimit, // 没有设置最大值，表明当前范围 [min, Infinity] 变色
color: 'red'
}
],
outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: 'blue'
}
}
],
series: [
{
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
// color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
width: 5
},
markLine: {
symbol: 'none',
label: {
show: false
},
data: [
{
yAxis: upLimit
},
{
yAxis: lowlimit
}
]
},
// areaStyle: {},
data: [
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-10-18', 100]
]
}
]
};
注意：visualMap配置
image.png
type
continuous：类型为连续型
piecewise：类型为分段型。
查看echarts官网，因此这里选择piecewise结合pieces
image.png
dimension
image.png
我们这里要把超出上下限的部分变红，因此需要将y轴数据拿来映射，因此这里series data是个二维数组。
image.png
如果要显示多条线
效果图：
image.png
代码：
var upLimit = 600; // 上限
var lowlimit = 300; // 下限
// 定义线的颜色
let lineColor = ['yellow','blue']
// 生成 visualMap
let visualMap = []
lineColor.map((item,index)=>{
visualMap.push({
type: 'piecewise',
show: false,
dimension: 1,
// seriesIndex: [0, 1], // 虽然可以指定多个series，但是线的颜色只能设置一条
seriesIndex: index,
pieces: [
{
// 不指定 max，表示 max 为无限大（Infinity）。
min: upLimit, // 没有设置最大值，表明当前范围 [min, Infinity] 变色
color: 'red'
},
{
// 不指定 min，表示 min 为无限大（-Infinity）。
max: lowlimit, // 300 没有设置最小值，表明当前范围 [-Infinity, max] 变色
color: 'red'
},
],
outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
color: lineColor[index],
},
})
})
option = {
tooltip: {
trigger: 'axis',
boundaryGap: false
},
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value'
// boundaryGap: [0, '30%']
},
visualMap: visualMap,
color:lineColor,
series: [
{
name:'线1',
type: 'line',
smooth: false,
symbol: 'none',
lineStyle: {
// color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
width: 3
},
markLine: {
symbol: 'none',
label: {
show: false
},
lineStyle:{
color:'red'
},
data: [
{
yAxis: upLimit
},
{
yAxis: lowlimit
}
]
},
// areaStyle: {},
data: [
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-10-18', 100]
]
},
{
name:'线2',
type: 'line',
smooth: false,
symbol: 'none',
lineStyle: {
// color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
width: 3
},
markLine: {
symbol: 'none',
label: {
show: false
},
lineStyle:{
color:'red'
},
data: [
{
yAxis: upLimit
},
{
yAxis: lowlimit
}
]
},
// areaStyle: {},
data: [
['2019-10-10', 100],
['2019-10-11', 360],
['2019-10-12', 950],
['2019-10-13', 280],
['2019-10-14', 150],
['2019-10-15', 300],
['2019-10-16', 550],
['2019-10-17', 100],
['2019-10-18', 900]
]
}
]
};
