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

编程问答 2022-08-15

问题描述

我有以下数据集

data = {
  "qr": [
    [
      "2020-07-28",1
    ],[
      "2020-07-31",[
      "2020-08-04",2
    ],[
      "2020-08-06",[
      "2020-08-10",[
      "2020-08-11",12
    ],[
      "2020-08-12",17
    ],[
      "2020-08-13",15
    ],[
      "2020-08-14",3
    ],[
      "2020-08-17",9
    ],[
      "2020-08-21",[
      "2020-08-24",5
    ]
  ],"url": [
    [
      "2020-07-31",4
    ],[
      "2020-08-03",[
      "2020-08-05",7
    ],[
      "2020-08-07",16
    ],24
    ],67
    ],[
      "2020-08-18",[
      "2020-08-19",6
    ],10
    ],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,name: 'QR Codes',smooth: true
        }
      ]
    });

但是生成的图形非常失真

enter image description here

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

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

解决方法

  1. 图表必须仅使用setOption更新，否则您将遇到非常奇怪的错误。 Echarts很难合并procedure来触发内部流程，但是调用Object.assign而不是跳过它们。

  2. 日期维度应传递给Axis而不是Series。请查看Echarts short anatomy。

  3. 当您尝试使用不同的日期制作图表时，您需要使用不同的轴，因为不清楚如何在同一轴上绘制不同的尺寸。

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

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

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

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

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

// set data later
myChart.setOption({
  xAxis: [{
    id: 0,data: data.qr.map(point => point[0])
  },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>

,

对于xAxis类型为category的日期，echart的行为似乎有所不同。我需要将其更改为time，现在可以正常使用了。

graphData = Object.assign(graphData,{
      xAxis: {
        type: 'time',name: xAxis
      },yAxis: {
        type: 'value'
      },series: [
        {
          data:  data.url,smooth: true
        },{
          data:  data.qr,smooth: true
        }
      ]
    });
echartsecharts