时间戳

首页 > 解决方案 > 即使数据点存在于图表中，折线图也会在放大/缩小时消失

javascript - 即使数据点存在于图表中，折线图也会在放大/缩小时消失

问题描述

我使用 echarts 创建了一个时间序列折线图，完全缩小时效果很好，但是当我开始放大时，线条在某些地方消失了。我可以看到数据是在悬停时绘制的。

添加filterMode一些人提到的没有帮助。

以下是我传递给 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
  }
}

如果您想查看传递的确切数据，这里是重现问题的沙箱：https ://codesandbox.io/s/echart-line-vanilla-6yx5s?file=/src/index.js 尝试放大/在图表上，你会在某些地方线条消失。

我无法弄清楚这种行为/问题背后的原因。

echarts v4.7.0

标签： javascriptecharts

解决方案

它发生是因为visualMap。我的项目中也有这个错误。我通过删除最大数量限制来解决它。

这是旧的 visualMap 代码：

         "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)',
              },
            ],
          },

这是新的 visualMap 代码：

    "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)"
        }
      ],
    },

因此，如果没有最大限制，视觉地图就不能超出范围，并且缩放将正常工作。

推荐阅读