echarts睡眠分期

划水小将军

已于 2024-03-22 16:11:58 修改

阅读量227

点赞数 1

文章标签： echarts 前端 javascript

于 2024-03-22 09:51:07 首次发布

本文链接：https://blog.csdn.net/qq_44309969/article/details/136930665

版权

效果

在这里插入图片描述

echarts核心配置

option = {
  tooltip: {
    trigger: 'axis' // 触发方式为axis，表示数据项图形触发，此时坐标轴上的刻度也会显示提示信息。
  },
  xAxis: {
    show: false,
    type: 'category',
    data: [
      '2024-02-02 12:00:01',
      '2024-02-02 12:00:02',
      '2024-02-02 12:00:03',
      '2024-02-02 12:00:04',
      '2024-02-02 12:00:05',
      '2024-02-02 12:00:06',
      '2024-02-02 12:00:07',
      '2024-02-02 12:00:08',
      '2024-02-02 12:00:09',
      '2024-02-02 12:00:10'
    ]
  },
  yAxis: {
    show:false,
    type: 'value',
    splitLine: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      data: [
        1,2,3,1,2,3,1,2,3,3
      ],
      type: 'bar',
      barCategoryGap:0,
      itemStyle: {
            color: (item)=>{
              if(item.value ==1){
                return '#ff0000'
              }else if(item.value ==2){
                return '#00ff00'
              }else{
                return '#0000ff'
              }
            }
          }
    }
  ]
};