[Bug]candlestick某条数据全为0时，缩放后阳线阴线的颜色会变化，导致与visualMap中的颜色不一致

clg333zzz commented 2 years ago

Version

5.2.2

Link to Minimal Reproduction

https://jsfiddle.net/clg333zzz/84nuka9L/8/

Steps to Reproduce

var myChart = echarts.init(document.getElementById('main'));

var categoryData = ["2021-12-17 09:45:00", "2021-12-17 10:00:00", "2021-12-17 10:15:00", "2021-12-17 10:30:00", "2021-12-17 10:45:00", "2021-12-17 11:00:00", "2021-12-17 11:15:00", "2021-12-17 11:30:00", "2021-12-17 11:45:00", "2021-12-17 12:00:00", "2021-12-17 12:15:00", "2021-12-17 12:30:00", "2021-12-17 12:45:00", "2021-12-17 13:00:00", "2021-12-17 13:15:00", "2021-12-17 13:30:00", "2021-12-17 13:45:00", "2021-12-17 14:00:00", "2021-12-17 14:15:00", "2021-12-17 14:30:00", "2021-12-17 14:45:00", "2021-12-17 15:00:00", "2021-12-17 15:15:00", "2021-12-17 15:30:00"]
var values = [["41.16000000", "41.16000000", "41.16000000", "41.16000000", "0.00000000"], ["41.25000000", "40.99000000", "40.99000000", "41.25000000", "34.93250000"], ["40.99000000", "40.99000000", "40.99000000", "40.99000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "13.12320000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["41.01000000", "41.01000000", "41.01000000", "41.01000000", "0.00000000"], ["40.97000000", "41.04000000", "40.97000000", "41.04000000", "110.68160000"], ["41.16000000", "41.36000000", "41.16000000", "42.15000000", "9934.33540000"], ["41.16000000", "41.16000000", "41.16000000", "41.16000000", "151.88040000"], ["41.16000000", "41.16000000", "41.16000000", "41.16000000", "0.00000000"], ["41.21000000", "41.21000000", "41.21000000", "41.21000000", "88.18940000"], ["41.23000000", "41.23000000", "41.23000000", "41.23000000", "149.66490000"], ["41.14000000", "41.08000000", "41.08000000", "41.14000000", "25.07380000"], ["41.08000000", "41.08000000", "41.08000000", "41.08000000", "0.00000000"], ["41.16000000", "41.16000000", "41.16000000", "41.16000000", "14.81760000"], ["41.16000000", "41.08000000", "41.08000000", "41.16000000", "404.53080000"], ["41.08000000", "41.08000000", "41.08000000", "41.08000000", "0.00000000"], ["40.97000000", "40.97000000", "40.97000000", "40.97000000", "43.01850000"], ["40.90000000", "40.90000000", "40.90000000", "40.90000000", "15.13300000"], ["40.73000000", "40.68000000", "40.68000000", "40.73000000", "763.98890000"], ["40.60000000", "40.44000000", "40.44000000", "40.60000000", "140.30560000"], ["40.44000000", "40.44000000", "40.44000000", "40.44000000", "0.00000000"]]
var volumes = [[0, "0.00000000", -1], [1, "34.93250000", 1], [2, "0.00000000", -1], [3, "13.12320000", -1], [4, "0.00000000", -1], [5, "0.00000000", -1], [6, "0.00000000", -1], [7, "0.00000000", -1], [8, "110.68160000", -1], [9, "9934.33540000", -1], [10, "151.88040000", -1], [11, "0.00000000", -1], [12, "88.18940000", -1], [13, "149.66490000", -1], [14, "25.07380000", 1], [15, "0.00000000", -1], [16, "14.81760000", -1], [17, "404.53080000", 1], [18, "0.00000000", -1], [19, "43.01850000", -1], [20, "15.13300000", -1], [21, "763.98890000", 1], [22, "140.30560000", 1], [23, "0.00000000", -1]]
var upColor = '#00da3c';
var downColor = '#ec0000';

var chartOption = {
  animation: false,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ],
    label: {
      show: false
    }
  },
  visualMap: {
    show: false,
    seriesIndex: 1,
    dimension: 2,
    pieces: [
      {
        value: 1,
        color: downColor
      },
      {
        value: -1,
        color: upColor
      }
    ]
  },
  grid: [
    {
      left: '3%',
      right: '90',
      height: '57%',
      top: '5%'
    },
    {
      left: '3%',
      right: '90',
      top: '69%',
      height: '24%'
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: categoryData,
      scale: true,
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      axisLabel: {
        formatter: function (value, index) {
          const val = value.replace(/[-\/\:]/g, ' ').split(' ')
          if (Number(val[3]) === 0 && Number(val[4]) === 0) {
            return `${val[1]}/${val[2]}`
          } else {
            return `${val[3]}:${val[4]}`
          }
        }
      },
      min: 'dataMin',
      max: 'dataMax',
      axisPointer: {
        z: 100
      }
    },
    {
      type: 'category',
      gridIndex: 1,
      data: categoryData,
      scale: true,
      boundaryGap: false,
      axisLabel: {
        formatter: function (value, index) {
          const val = value.replace(/[-\/\:]/g, ' ').split(' ')
          if (Number(val[3]) === 0 && Number(val[4]) === 0) {
            return `${val[1]}/${val[2]}`
          } else {
            return `${val[3]}:${val[4]}`
          }
        }
      },
      min: 'dataMin',
      max: 'dataMax'
    }
  ],
  yAxis: [
    {
      scale: true,
      splitLine: { show: false },
      splitArea: {
        show: true
      },
      splitNumber: 8,
      position: 'right',
      offset: 10,
    },
    {
      scale: true,
      gridIndex: 1,
      splitNumber: 2,
      position: 'right',
      offset: 10,
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      splitArea: {
        show: true
      },
    }
  ],
  dataZoom: [
    {
      type: 'inside',
      xAxisIndex: [0, 1],
      start: 0,
      end: 100,
      minValueSpan: 12
    },
  ],
  series: [
    {
      name: 'MyChart',
      type: 'candlestick',
      data: values,
      barWidth: '70%',
      itemStyle: {
        color: upColor,
        color0: downColor,
        borderColor: undefined,
        borderColor0: undefined
      }
    },
    {
      name: 'Volume',
      type: 'bar',
      barWidth: '70%',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: volumes
    }
  ]
}
myChart.setOption(chartOption);

Current Behavior

当[open, close, lowest, highest]4个值均为0时，缩放KLine时，颜色会变化，但是下面的visualMap并不会同步变化，因为visualMap中的颜色是固定的。

before

after

Expected Behavior

是否有一种方案可以固定KLine中的颜色，不会因为缩放导致颜色变化。

Environment

No response

Any additional comments?

No response

echarts-bot[bot] commented 2 years ago

@clg333zzz It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** [Bug] When a piece of candlestick data is all 0, the color of the Yang line and Yin line will change after zooming, resulting in inconsistency with the color in visualMap

Ovilia commented 2 years ago

Hi, please make your demo minimal so that it's better to debug.

clg333zzz commented 2 years ago

The code has been minimized。

The Tooltip shows different colors

When I zoom in on the chart, the colors change to the same

The color of the bar chart is controlled by custom, but the candlestick chart is controlled automatically.

visualMap: {
  show: false,
  seriesIndex: 1,
  dimension: 2,
  pieces: [
    {
      value: 1,
      color: downColor
    },
    {
      value: -1,
      color: upColor
    }
  ]
}

clg333zzz commented 1 year ago

@Ovilia

echarts v5.4.1 resolved

series-candlestick.itemStyle. borderColorDoji

apache / echarts