apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.72k stars 19.62k forks source link

multi dataset render line series bug #15593

Open HHHui opened 3 years ago

HHHui commented 3 years ago

Version

5.1.2

Steps to reproduce

  1. multiple datasets, one dataset has null value on it's first datapoint.
  2. xAxis type set to 'category'
option = {
  "tooltip": { "trigger": "axis" },
  "xAxis": { "type": "category" },
  "yAxis": { "type": "value" },
  "dataset": [
    {
      "dimensions": ["time", "IN", "OUT"],
      "source": [
        ["2021-08-24T05:04:00Z", null, null],
        ["2021-08-24T05:05:00Z", 25557.8585, 42295.94875],
        ["2021-08-24T05:06:00Z", 26529.061500000003, 27959.30075],
        ["2021-08-24T05:07:00Z", 26442.935, 15044.221000000001],
        ["2021-08-24T05:08:00Z", 25808.200249999998, 14797.9265],
        ["2021-08-24T05:09:00Z", 24926.94025, 36655.6425],
        ["2021-08-24T05:10:00Z", 24289.542, 63481.05500000001],
        ["2021-08-24T05:11:00Z", 26898.6045, 32675.925],
        ["2021-08-24T05:12:00Z", 26527.185250000002, 15077.23475],
        ["2021-08-24T05:13:00Z", 25744.94675, 14864.382249999999],
        ["2021-08-24T05:14:00Z", 25193.262333333332, 14608.087],
        ["2021-08-24T05:15:00Z", 24820.80025, 42864.026249999995],
        ["2021-08-24T05:16:00Z", 25146.29525, 21076.957749999998],
        ["2021-08-24T05:17:00Z", 25005.54675, 14490.284249999999],
        ["2021-08-24T05:18:00Z", 25071.7565, 14490.57375],
        ["2021-08-24T05:19:00Z", 24427.50625, 41984.9355],
        ["2021-08-24T05:20:00Z", 23729.506999999998, 60567.432],
        ["2021-08-24T05:21:00Z", 25223.235, 29637.791999999998],
        ["2021-08-24T05:22:00Z", 24792.1, 14282.797250000001],
        ["2021-08-24T05:23:00Z", 24533.36525, 14319.3435],
        ["2021-08-24T05:24:00Z", 24495.62075, 14196.408500000001],
        ["2021-08-24T05:25:00Z", 23870.25475, 44089.1765],
        ["2021-08-24T05:26:00Z", 24630.16375, 16366.382249999999],
        ["2021-08-24T05:27:00Z", 24388.373, 14218.3335],
        ["2021-08-24T05:28:00Z", 25147.289, 14520.3385],
        ["2021-08-24T05:29:00Z", 25123.4625, 14506.615],
        ["2021-08-24T05:30:00Z", 25837.9415, 45363.348000000005],
        ["2021-08-24T05:31:00Z", 26354.3375, 50252.17450000001],
        ["2021-08-24T05:32:00Z", 27914.812250000003, 33720.994999999995],
        ["2021-08-24T05:33:00Z", 27877.28925, 16954.4435],
        ["2021-08-24T05:34:00Z", 27277.665333333334, 17351.160666666667]
      ]
    },
    {
      "dimensions": ["time", "IN", "OUT"],
      "source": [
        ["2021-08-24T05:04:00Z", 27518.162, 16452.748],
        ["2021-08-24T05:05:00Z", 25979.75425, 43106.11975],
        ["2021-08-24T05:06:00Z", 26665.370000000003, 29175.97475],
        ["2021-08-24T05:07:00Z", 26644.34975, 15997.3635],
        ["2021-08-24T05:08:00Z", 26104.9375, 15689.89025],
        ["2021-08-24T05:09:00Z", 25330.236749999996, 39925.95025],
        ["2021-08-24T05:10:00Z", 24264.00425, 61915.24675],
        ["2021-08-24T05:11:00Z", 26828.632749999997, 34729.508],
        ["2021-08-24T05:12:00Z", 26673.35275, 16058.94975],
        ["2021-08-24T05:13:00Z", 25779.692750000002, 15466.92325],
        ["2021-08-24T05:14:00Z", 24997.98175, 15082.0015],
        ["2021-08-24T05:15:00Z", 24783.283, 43216.87225],
        ["2021-08-24T05:16:00Z", 25155.3295, 23744.5925],
        ["2021-08-24T05:17:00Z", 25076.751500000002, 15237.652],
        ["2021-08-24T05:18:00Z", 25104.77075, 15190.83025],
        ["2021-08-24T05:19:00Z", 24137.982, 41627.73825],
        ["2021-08-24T05:20:00Z", 24144.43925, 60619.045999999995],
        ["2021-08-24T05:21:00Z", 25247.81575, 29033.1525],
        ["2021-08-24T05:22:00Z", 25193.64725, 15171.083499999999],
        ["2021-08-24T05:23:00Z", 25124.8475, 15063.4315],
        ["2021-08-24T05:24:00Z", 24759.575750000004, 14919.28875],
        ["2021-08-24T05:25:00Z", 24006.89725, 46510.463],
        ["2021-08-24T05:26:00Z", 24709.84225, 17752.4765],
        ["2021-08-24T05:27:00Z", 24450.4805, 14826.1185],
        ["2021-08-24T05:28:00Z", 24836.6025, 14904.04575],
        ["2021-08-24T05:29:00Z", 24954.8775, 15127.2],
        ["2021-08-24T05:30:00Z", 25502.4375, 47163.848],
        ["2021-08-24T05:31:00Z", 25982.8915, 50109.585],
        ["2021-08-24T05:32:00Z", 27837.845, 35179.441],
        ["2021-08-24T05:33:00Z", 28008.90133333333, 17928.766333333333],
        ["2021-08-24T05:34:00Z", 27308.515333333333, 16269.045666666667]
      ]
    }
  ],
  "series": [
    {
      "type": "line",
      "name": "IN {device: deviceA, host: hostA}",
      "encode": { "x": "time", "y": "IN" },
      "datasetIndex": 0,
      "smooth": true,
    },
    {
      "type": "line",
      "name": "OUT {device: deviceA, host: hostA}",
      "encode": { "x": "time", "y": "OUT" },
      "datasetIndex": 0,
      "smooth": true,
    },
    {
      "type": "line",
      "name": "IN {device: deviceB, host: hostB}",
      "encode": { "x": "time", "y": "IN" },
      "datasetIndex": 1,
      "smooth": true,
    },
    {
      "type": "line",
      "name": "OUT {device: deviceB, host: hostB}",
      "encode": { "x": "time", "y": "OUT" },
      "datasetIndex": 1,
      "smooth": true,
      "showSymbol": false
    }
  ]
}

What is expected?

just ignore null value.

What is actually happening?

there is a addition straight line cross the chart.

zm20210824-1558-2

Chart will render correct if set xAxis type to 'time'. But time axis labels will overlap when reduce page width. category axis will auto adjust label interval. That why i use category axis here. (用time轴是可以正常显示的, 但是time轴的label在缩小页面的时候label不会自动调整, 所以我想用category偷个懒)

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵