echarts X轴和Y轴不对应（xAxis type time）的用法

关于xAxis type time的用法，option在文本最后，在这之前是一些说明。

平时项目里数据可视化展示用的大多是echarts或者highcharts, 一般折线图、柱状图、饼图最普通的用的多一点，最常见的就是这种：

这种一般x轴和y轴的数据一一对应，这是最常见的用法我就不说了。今天这篇文章记录一下x轴刻度和y轴数据不是一一对应的情况。这种时候一般 xAxis的type是time，echarts配置项手册中的写法：

别的tooltip之类的就不说了，比较普通。先说下xAxis的配置：

xAxis: {
    
    
    type: 'time',
    boundaryGap: false,
    // min: '2022-06-13',
    // max: '2022-10-13'
  },

注意，这里 min和max可以设置也可以不设置，不设置的话echarts会根据你series中的数据自动生成x轴的刻度：

还有一点，min和max的值可以是字符串的时间，也可以是时间戳，还涉及到IE。

完整的option：

option = {
    
    
  title: {
    
    
    text: 'Stacked Line'
  },
  tooltip: {
    
    
    trigger: 'axis'
  },
   grid: {
    
    
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    
    
    feature: {
    
    
      saveAsImage: {
    
    }
    }
  },
  xAxis: {
    
    
    type: 'time',
    boundaryGap: false,
    min: '2022-06-13',
    max: '2022-10-13'
  },
  yAxis: {
    
    
    type: 'value'
  },
  legend: {
    
    
          data: ['line---1', 'line----2', 'line-----3', 'line-----4'],
      },
 series: [
            {
    
    
          type: 'line',
          name: 'line---1',
          data: [
            ['2022-10-1', 12],
            ['2022-10-2', 45],
            ['2022-10-3', 35],
            ['2022-10-4', 34],
            ['2022-10-5', 43],
            ['2022-10-6', null],
            ['2022-10-7', null],
            ['2022-10-8', 45],
            ['2022-10-9', 86],
            ['2022-10-10', 86],
            ['2022-10-11', 4],
            ['2022-10-12', 23],
            ['2022-10-13', 47],
          ]
        },
        {
    
    
          type: 'line',
          name: 'line----2',
          data: [
            ['2022-10-1', 50],
            ['2022-10-2', 23],
            ['2022-10-3', 56],
            ['2022-10-4', 23],
            ['2022-10-5', 67],
            ['2022-10-6', 66],
            ['2022-10-7', 78],
            ['2022-10-8', 67],
            ['2022-10-9', 55],
            ['2022-10-10', 80],
            ['2022-10-11', 90],
            ['2022-10-12', 67],
            ['2022-10-13', 56],
          ]
        },
        {
    
    
          type: 'line',
          name: 'line-----3',
          data: [
            ['2022-10-1', 67],
            ['2022-10-2', 34],
            ['2022-10-3', 26],
            ['2022-10-4', 27],
            ['2022-10-5', 34],
            ['2022-10-6', 53],
            ['2022-10-7', 78],
            ['2022-10-8', 56],
            ['2022-10-9', 80],
            ['2022-10-10', 95],
            ['2022-10-11', 86],
            ['2022-10-12', 67],
            ['2022-10-13', 26],
          ]
        },
        {
    
    
          type: 'line',
          name: 'line-----4',
          data: [
            ['2022-10-1', null],
            ['2022-10-2', null],
            ['2022-10-3', null],
            ['2022-10-4', 40],
            ['2022-10-5', 80],
            ['2022-10-6', 87],
            ['2022-10-7', 98],
            ['2022-10-8', 33],
            ['2022-10-9', 35],
            ['2022-10-10', 78],
            ['2022-10-11', 48],
            ['2022-10-12', 67],
            ['2022-10-13', 30],
          ]
        }
      ],
 
  
};

自己可以把上面的option复制到echarts官网demo中看效果。

最后提醒一下：我上面的数据是随便写的，因为有null所以折线有断开的，各位也可以自行设置在空数据处连接。

希望本文对您有所帮助。