echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] Using formator causes dataZoom to fail

Open hyacinthsWang opened this issue 3 years ago • 1 comments

Version

4.9.0

Link to Minimal Reproduction

No response

Steps to Reproduce

 const options = {
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0],
          start: 80,
          end: 100
        },
        {
          show: true,
          type: 'slider',
          xAxisIndex: [0],
          start: 80,
          end: 100,
          bottom: 10,
          textStyle: {
            color: '#fff'
          }
        }
      ],
      grid: {
        left: '20px',
        right: '10px',
        top: '12px',
        bottom: '60px',
        containLabel: true,
        show: false
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          props?.onToolTipChange && props.onToolTipChange(params);
          return ‘1’;
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisPointer: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 1)',
            type: 'dashed',
            opacity: 0.3
          },
          label: {
            show: true,
            color: '#2C3039',
            padding: [2, 5],
            lineHeight: 17,
            fontSize: 12,
            backgroundColor: '#78FFC7'
          }
        },
        show: true,
        axisLine: {
          lineStyle: {
            color: '#fff',
            opacity: 0.3
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255,255,255, .3)'
        },
        min: 'dataMin',
        max: 'dataMax',
        // data: ['2022/8/3', '2022/8/4', '2022/8/4']
        data: xAxisData
      },
      yAxis: [
        {
          type: 'value',
          scale: true,
          axisLabel: {
            color: 'rgba(255,255,255, .3)'
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              opacity: 0.1
            }
          },
          axisPointer: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 1)',
              type: 'dashed',
              opacity: 0.3
            },
            label: {
              // margin: 6,
              color: '#2C3039',
              padding: [2, 5],
              lineHeight: 17,
              fontSize: 12,
              backgroundColor: '#78FFC7'
            }
          }
        }
      ],
      series: [
        {
          type: 'candlestick',
          dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
          barMaxWidth: 6,
          itemStyle: {
            color: upColor,
            color0: downColor,
            borderColor: upBorderColor,
            borderColor0: downBorderColor
          },
          // data: [
          //   ['14.746513', '14.836993', '14.836993', '14.746091'],
          //   [40, 35, 30, 50],
          //   [31, 38, 33, 44],
          //   [38, 15, 5, 42]
          // ]
          data: seriesData
        }
      ]
    };

Current Behavior

只要使用formatter方法,无论是在tooltip配置还是xAxis.axisPointer.label中,都会导致dataZoom功能异常,即无法缩放,每次hover到chart上时都会重新初始化回默认配置,不使用formatter就是OK的。(echarts版本4.9.0)

Expected Behavior

可以使用formatter方法自定义tooltip内容和自定义事件处理,同时保证dataZoom功能正常使用。

Environment

- OS: Mac
- Browser: Chrome

Any additional comments?

No response

hyacinthsWang avatar Sep 06 '22 07:09 hyacinthsWang

@hyacinthsWang 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] Using formator causes dataZoom to fail

echarts-bot[bot] avatar Sep 06 '22 07:09 echarts-bot[bot]