The Line charts disappears on zooming in/out even though the data points are present in the chart

user_5284640 0
Viewed 585

I created a time series line chart using the echarts, it works fine when zoomed out completely, but when I start to zoom in, the lines disappear at certain places. I could see the data is getting plotted on hover.

Adding the filterMode as mentioned by some folks didn't help.

Here are the options I am passing to the echarts:

{
  xAxis: {
    type: "time",
    nameLocation: "center",
    nameGap: 20,
    interval: 420000,
    min: 1625741884000,
    max: 1625749084000,
    axisLabel: {
      rotate: 0
    },
    boundaryGap: ["0%", "0%"]
  },
  yAxis: [
    {
      type: "value",
      nameLocation: "center",
      nameGap: 8,
      interval: 0.33,
      min: 1,
      max: 5.33,
      axisLabel: {
        margin: 24,
        rotate: 0
      }
    }
  ],
  series: [
    {
      id: "test",
      name: "Average Time",
      yAxisIndex: 0,
      data: [
        {
          value: [1625741884000, 1]
        },
        {
          value: [1625741885000, 1]
        },
        .....
      ],
      subSeries: [],
      invert: false,
      type: "line",
      symbol: "emptyCircle",
      showSymbol: false,
      symbolSize: 10,
      smooth: false,
      color: "#4da6e8",
      lineStyle: {}
    }
  ],
  tooltip: {
    trigger: "axis",
    showCross: true,
    axisPointer: {
      type: "cross",
      label: {}
    },
    appendToBody: true,
    textStyle: {
      fontSize: 12
    }
  },
  dataZoom: [
    {
      type: "slider",
      orient: "horizontal",
      startValue: 1625743801612,
      endValue: 1625746325168,
      filterMode: "none"
    },
    {
      type: "inside",
      orient: "horizontal",
      startValue: 1625743801612,
      endValue: 1625746325168,
      filterMode: "none"
    }
  ],
  animation: false,
  visualMap: [
    {
      dimension: 0,
      seriesIndex: 0,
      pieces: [],
      inRange: {
        opacity: 0.3
      },
      type: "piecewise",
      show: false,
      outOfRange: {}
    }
  ],
  grid: {
    top: 5,
    right: 50,
    left: 20,
    bottom: 45,
    containLabel: true
  }
}

If you want to see the exact data being passed, here is the sandbox with the issue reproduced: https://codesandbox.io/s/echart-line-vanilla-6yx5s?file=/src/index.js Try zooming in/out on the chart, you'll the lines disappear at some places.

I could not figure out the reason behind this behaviour/issue.

echarts v4.7.0

echarts javascript
1 Answers

It happens because of the visualMap. I also had this bug in my project. I solve it by removing the maximum number limit.

This is the old visualMap code:

         "visualMap": {
            "show": false,
            "dimension": 0,
            "pieces": [
              {
                "max": 183,
                "color": 'rgba(58,77,233,0.7)',
              },
              {
                "min": 183,
                "max": 365,
                "color": 'rgba(255, 16, 230, 1)',
              },
            ],
          },

This is the new visualMap code:

    "visualMap": {
      "show": false,
      "dimension": 0,
      "pieces": [
        {
          "min": 0,
          "max": 183,
          "color": "rgba(58,77,233,0.7)"
        },
        {
          "min": 183,
          "color": "rgba(255, 16, 230, 1)"
        }
      ],
    },

So without the maximum limit the visual map can`t go out of the range and the zoom will work correctly.

user_45030360
Related