echarts - 绘制两条线时echarts折线图扭曲

Question

我有以下数据集

data = {
  "qr": [
    [
      "2020-07-28", 1
    ],
    [
      "2020-07-31", 1
    ],
    [
      "2020-08-04", 2
    ],
    [
      "2020-08-06", 1
    ],
    [
      "2020-08-10", 1
    ],
    [
      "2020-08-11", 12
    ],
    [
      "2020-08-12", 17
    ],
    [
      "2020-08-13", 15
    ],
    [
      "2020-08-14", 3
    ],
    [
      "2020-08-17", 9
    ],
    [
      "2020-08-21", 1
    ],
    [
      "2020-08-24", 5
    ]
  ],
  "url": [
    [
      "2020-07-31", 4
    ],
    [
      "2020-08-03", 1
    ],
    [
      "2020-08-05", 7
    ],
    [
      "2020-08-06", 2
    ],
    [
      "2020-08-07", 16
    ],
    [
      "2020-08-11", 1
    ],
    [
      "2020-08-13", 4
    ],
    [
      "2020-08-14", 24
    ],
    [
      "2020-08-17", 67
    ],
    [
      "2020-08-18", 2
    ],
    [
      "2020-08-19", 6
    ],
    [
      "2020-08-21", 10
    ],
    [
      "2020-08-24", 18
    ]
  ]
}

我正在使用 echarts 绘制折线图

graphData = Object.assign(graphData, {
      xAxis: {
        type: 'category',
        name: xAxis
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data:  data.url,
          type: 'line',
          name: 'Short URL',
          areaStyle: {},
          smooth: true
        },
        {
          data:  data.qr,
          type: 'line',
          name: 'QR Codes',
          areaStyle: {},
          smooth: true
        }
      ]
    });

但是生成的图非常扭曲

红色的线条很好，但蓝色的线条非常扭曲。

绘制单线图工作正常。

标签： echarts

Answer 1

对于 xAxis 类型为 的日期，echarts 的行为似乎不同category。我需要将其更改为time，现在它工作正常。

graphData = Object.assign(graphData, {
      xAxis: {
        type: 'time',
        name: xAxis
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data:  data.url,
          type: 'line',
          name: 'Short URL',
          areaStyle: {},
          smooth: true
        },
        {
          data:  data.qr,
          type: 'line',
          name: 'QR Codes',
          areaStyle: {},
          smooth: true
        }
      ]
    });