我正在构建一个折线图,该折线图需要在x轴上的指定点处覆盖。 My current implementation here有一个叠加层,但我希望它在x轴上的垂直直线处开始和停止,并且还希望沿该直线具有平滑的顶部。有没有人实现类似的东西?
option = {
xAxis: {
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
},
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [0,0,0,0,0,0,0,0.32,0,0,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
答案 0 :(得分:0)
尝试将数据0
更改为null
option = {
xAxis: {
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
},
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [null,null,null,null,null,null,null,0.32,0.05,null,null,null],
type: 'line',
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
是的,这并不顺利。使用平滑时,这两个序列不能具有相同的平滑顶部,因为平滑顶部取决于序列数据。显然,这两个系列具有不同的系列数据。
在下面进行检查:
但,这些还有其他技巧可以实现,
给您一个想法,使用两个xAxis ,第二个系列比第一个系列具有更多的数据点。有了更多的数据点,您可以使用它来模拟相同的平滑曲线。
option = {
xAxis: [{
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
axisTick: {
alignWithLabel: true
}
}, {
data: [1 ,2,3,4,5,6,7,8,9,10,11,12, 1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4],
boundryGap: false,
axisTick: {
alignWithLabel: true
}
}],
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [,,,,,,,,,,,,,,,,,0.32,0.15, 0.075],
type: 'line',
xAxisIndex: 1,
smooth: true,
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
像这样: