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所以折线有断开的,各位也可以自行设置在空数据处连接。

希望本文对您有所帮助。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值