echarts splitArea的颜色在dataZoom启用时, 初始化/拖拽/缩放出现的渲染错误

kh212irz 于 2022-11-02 发布在 Echarts

关注(0)|答案(1)|浏览(196)

Version

4.8.0

Reproduction link

https://jsfiddle.net/yn5ru28k/

Steps to reproduce

图一为正常的渲染一共26个柱子, 1-4红色背景, 23-26绿色背景, 其它透明
图二dataZoom设置了起点, splitArea的color的数组计数跟着可见区域的重新计算
图三因为改变x轴label过长, 被echart自适应了,导致splitarea跟着合并后的可见区域重新计算
如果左右快速拖动图二的dataZoom, 会出现splitArea落在错误的位置

What is expected?

图二显示前4个空白后4个绿色
图三AAAAA-DDDDD为红色, WWWWW-ZZZZZ为绿色,其它空白

splitArea的颜色渲染能严格按照color数组的索引和xAxis的data数组索引位一一对应, color数组长度少于xAxis的data数组长度时循环生成, color长度大于等于xAxis的data数组长度则不做特殊处理

What is actually happening?

图二显示前4个红色后4个空白
图三AAAAA-MMMMM为红色,其它空白

echarts

来源：https://github.com/apache/echarts/issues/14368

1条答案

按热度按时间

pu82cl6c1#

I have the same problem And so far ,I am not solved it,even I use dataZoom to reSet the colors

myChart.on('dataZoom',params => {
    var option = myChart.getOption()
    window.OrigionalColor = window.OrigionalColor ? window.OrigionalColor : option.yAxis[0].splitArea.areaStyle.color
    var sliderZoom = option.dataZoom[0]
    var startValue = sliderZoom.startValue
    var endValue = sliderZoom.endValue
    var color = window.OrigionalColor.slice(startValue,endValue+1)
    var newOption = {xAxis: {splitArea:{show:true,areaStyle: {color: color}}}}
    myChart.setOption(newOption)
})

赞(0）回复(0）举报 2022-11-02

我来回答