echarts折线图里面绘制一条横线,并把横线上方的折线的颜色变为红色
时间: 2023-08-12 16:10:09 浏览: 144
Echarts实现的折线图
5星 · 资源好评率100%
您可以使用 echarts 的 markLine 组件来绘制一条横线,并使用 visualMap 组件来调整折线的颜色。
以下是一个示例代码:
```javascript
option = {
// 其他配置项...
series: [{
name: '数据',
type: 'line',
data: [10, 20, 30, 40, 50, 60, 70],
markLine: { // markLine 组件
silent: true,
data: [{
yAxis: 40 // 绘制 y 轴为 40 的横线
}],
label: {
show: false
}
},
itemStyle: { // 折线颜色
normal: {
lineStyle: {
width: 2,
color: { // 使用 visualMap 组件调整折线颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'blue'
}, {
offset: 1,
color: 'red'
}]
}
}
}
}
}]
}
```
在上面的代码中,使用 markLine 组件来绘制一条 y 轴为 40 的横线,并使用 visualMap 组件来调整折线的颜色。visualMap 组件中,使用 type: 'linear' 来表示线性渐变,colorStops 数组中的第一个元素表示折线颜色为蓝色,第二个元素表示折线颜色为红色。
阅读全文