我正在尝试在Apache Echarts中创建一个称为静态波段的功能我试图根据y轴值改变图形的背景颜色。
就像这样图片
到目前为止，我已经尝试使用splitArea函数，并得到以下结果:
splitArea:{
show:true,
areaStyle:{
color:['green','blue','red']
}
}
}
结果
但是我还没有发现任何方法可以在echarts中使用任何方法根据值改变背景颜色。
如有任何帮助，我将不胜感激。
使用series-line。markArea是可行的方法
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: 'Distribution of Electricity',
subtext: 'Fake Data'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
// prettier-ignore
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
series: [
{
name: 'Electricity',
type: 'line',
smooth: true,
// prettier-ignore
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea:
{
data: [
[
{
name: 'Not good',
yAxis: 100, // min of red area
itemStyle: {
color: 'rgba(255, 173, 177, 0.4)'
},
},
{
yAxis: 300,// max of red area
}
],
[
{
yAxis: 400,
itemStyle: {
color: 'rgba(55, 173, 77, 0.4)'
},
},
{
yAxis: 580
}
],
[
{
name: 'Very good',
yAxis: 600,
itemStyle: {
color: 'rgba(55, 173, 177, 0.4)'
},
},
{
yAxis: 750
}
],
]
},
}
]
};
myChart .setOption(option)<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<div id="main" style="width: 600px; height:400px;"></div>
</body>
</html>这里我硬编码了最小/最大值，但你当然可以通过编程来改变它们。