[Feature] After adding the x-axis to set the polyline offset, the visualMap setting fails #18755
Closed as not planned
Description
What problem does this feature solve?
After adding the x-axis to set the polyline offset, the visualMap setting fails
What does the proposed API look like?
My option as follow:
option = {
grid:{
left:'6%',
top:'10%',
right:'5%',
bottom:'50'
},
xAxis: [{
axisTick:{
alignWithLabel: true
},
type:'category',
data:['00:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00'],
axisLine:{
lineStyle: {
color:'#B6C3CC',
width:1
}
},
axisLabel:{
interval:0,
fontSize:18,
color:'#B6C3CC',
font:'Arial'
}
}, ],
yAxis: [{
type:'value',
axisLabel:{
fontSize:20,
color:'#B6C3CC'
},
splitLine:{
show:true,
lineStyle:{
color:'#425559'
}
}
}
],
visualMap:
{
show: false,
dimension: 0,
seriesIndex: 1,
pieces: [
{
lte: 6,
color: 'green'
},
{
gt: 6,
lte: 8,
color: 'red'
},
{
gt: 8,
color: 'green'
}
]
},
series: [
{
xAxisIndex: 1,
type:'line',
label: {
show: true,
position: 'top',
color: '#000000',
fontSize: 18,
formatter: function (params) {
return (params.value[1])+"%"
}
},
data: [43, 18, 90, 26, 15, 80, 92,76, 53, 28, 76, 82,91],
}
]
};
// 增加了一个隐藏的x轴，用来控制线图的点的位置
option.xAxis[1] = {
type: 'value',
max: option.xAxis[0].data.length * 100,
show: false
}
option.series[0].data = option.series[0].data.map((x, i) => [0 + i * 100, x])
I want to set the polyline color as: 0 ~ 6 green, 6 ~ 8 red,....
Is there something wrong with my option? please give some advice
Thanks!