为啥echarts中的富文本不能随着dataZoom的滑动而滑动?
图标是可以随这滑块的滑动而滑动,但是来来回回都是那几个图标,不会说随着滑块的滑动而显示对应的图标
以下是配置项
let xList = [
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 20,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: function (value, index) {
return `{${index}| } \n{b|${value}}`
},
rich: {}
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19
},
data: text
},
{
type: 'category',
boundaryGap: false,
position: 'bottom',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: [
'{a|{value}}'
].join('\n'),
rich: {
a: {
fontSize: 14
}
}
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19
},
data: hours
}
];
for (let i = 0; i < icon.length; i++) {
xList[0].axisLabel.rich[i] = {
backgroundColor: {
image: `/static/icons/${icon[i]}.svg`,
},
height: 40,
width: 40
}
}
xList[0].axisLabel.rich.b = {
fontSize: 12,
lineHeight: 30,
height: 20
}
let option = {
grid: {
show: false,
backgroundColor: 'transparent',
opacity: 0.3,
borderWidth: '0',
top: '50%',
left: "2%",
right: "2%",
bottom: "40%"
},
dataZoom: [
{
type: "slider",
show: true,
xAxisIndex: [0, 1],
start: 0,
end: 30,
height: 20
},
],
legend: {
show: false
},
xAxis: xList,
yAxis: {
type: 'value',
show: false,
axisLabel: {
formatter: '{value} °C',
color: 'white'
}
},
series: [
{
type: 'line',
data: weather,
symbol: 'emptyCircle',
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: '#2683C9'
}
},
label: {
show: true,
formatter: '{c} °C'
},
lineStyle: {
width: 1,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0,0,0, 1, [{
offset: 0,
color: 'rgba(69, 170, 237, 0.24)'
}, {
offset: 1,
color: 'rgba(69, 170, 237, 0)'
}])
}
}
]
}
效果图大概是这样的
富文本的图标不会随着滑块的滑动而滑动
尝试过滑块滑动的时候更新图标,但是没效果