【echart】‘time‘ 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

需求:根据接口的数据,做一个显示当天光照度的图表

之前没有用过time类型的时间轴,尝试用category写了半天,还是有bug

解决方案:

//下面是一个简单的demo,方便展示数据格式和构成
      let config = {
        legend: {
          data: ['光照度'],
          textStyle: {
            color: '#FFF',
          },
        },
        
        xAxis: {
          type: 'time',
          splitNumber: 8,
          boundaryGap: false,
          min: '2023-12-01 00:05:12',
          max: '2023-12-01 23:49:01',
          axisLabel: {
            color: '#FFFFFF',//x轴文字颜色
            rotate: 0,
          },
          
        },
        yAxis: [{
          type: 'value',
          splitLine: {
            show: false, //去除网格线
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              width: 1,
              type: 'solid',
            },
          },
          
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
            },
          },
          
        }],
        series: [
          {
            name: '光照度',
            data: [['2023-12-01 00:05:12', '0'],['2023-12-01 00:15:16', '0'],['2023-12-01 10:49:01', null],['2023-12-01 23:49:01', null]],//注意,这里的数据是二维数组,xAxis里面并不设置数据
            type: 'line',
          },
        ],
      }

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值