为啥echarts中的富文本不能随着dataZoom的滑动而滑动?

新手上路,请多包涵

为啥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)'
                                    }])
                                }
                            }
                        ]
                    }

效果图大概是这样的

富文本的图标不会随着滑块的滑动而滑动

尝试过滑块滑动的时候更新图标,但是没效果

阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏