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
        }
      ]
    });

但是生成的图形非常失真

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

绘制单个折线图效果很好。

Answer 1

图表必须仅使用setOption更新，否则您将遇到非常奇怪的错误。 Echarts很难合并procedure来触发内部流程，但是调用Object.assign而不是跳过它们。
日期维度应传递给Axis而不是Series。请查看Echarts short anatomy。
当您尝试使用不同的日期制作图表时，您需要使用不同的轴，因为不清楚如何在同一轴上绘制不同的尺寸。

最后，您的头发将变得柔软如丝：

var myChart = echarts.init(document.getElementById('main'));

var 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],
  ],
};

var option = {
  tooltip: {},
  xAxis: [{
    id: 0,
    type: 'category',
    data: '',
  }, {
    id: 1,
    type: 'category',
    data: '',
    show: false, // hide second xAxis
  }],
  yAxis: {
    type: 'value'
  },
  series: [{
      id: 'url',
      xAxisIndex: 0,
      data: ["2020-07-31", 4],
      type: 'line',
      name: 'Short URL',
      areaStyle: {},
      smooth: true
    },
    {
      id: 'qr',
      xAxisIndex: 1,
      data: ["2020-07-28", 1],
      type: 'line',
      name: 'QR Codes',
      areaStyle: {},
      smooth: true
    }
  ]
};

// set common config
myChart.setOption(option);

// set data later
myChart.setOption({
  xAxis: [{
    id: 0,
    data: data.qr.map(point => point[0])
  }, {
    id: 1,
    data: data.url.map(point => point[0])
  }],
  series: [{
    id: 'url',
    data: data.url.map(point => point[1])
  }, {
    id: 'qr',
    data: data.qr.map(point => point[1])
  }]
});

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Answer 2

对于xAxis类型为category的日期，echart的行为似乎有所不同。我需要将其更改为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
        }
      ]
    });

echarts折线图在绘制两条线时变形

2 个答案: