Echart 图表

option = {
  grid: {
    // height: "80%", // 高度
    // left: '5%',
    // right: '5%',
    // bottom: '28',
    // top: '10%',
    // containLabel: true,
    // z: 1,
    height: '72%',
    top: '12%',
    left: '10%',
    right: '0',
    bottom: '10',
    containLabel: true,
  },
  // tooltip: {
  //     trigger: 'axis',
  //     axisPointer: {
  //         // 坐标轴指示器，坐标轴触发有效
  //         type: 'line', // 默认为直线，可选为：'line' | 'shadow'
  //     },
  // },
  legend: {
    selectedMode: false,
  },
  xAxis: {
    axisPointer: {
      value: '',
      snap: true,
      //指针颜色
      lineStyle: {
        color: '#C895F8',
        width: 0.6
      },
      label: {
        show: false,
      },
      handle: {
        show: true,
        type: 'line',
        size: 24,
        margin: 35,
        color: '#fff',
        z: 6,
        //滑块的圆
        icon: 'path("M 300,300 A 100,100 0 1 1 300,299 Z")',
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowBlur: 4,
      }
    },
    axisTick: {
      inside: true,
      boundaryGap: false,
      show: false,
    },
    // 现在坐标系刻度最大值、最小值
    axisLabel: {
      // showMinLabel: true,
      // showMaxLabel: true,
      //x轴文字颜色
      textStyle: {
        color: '#666666',
      },
      interval: 0
    },
    axisLine: {
      //x线
      lineStyle: {
        color: '#DEDEDE',
      },
    },
    data: ["00:00", "", "", "", "", "", "", "", "", "", "", "", "06:00", "", "", "", "", "", "","", "", "", "", "", "12:00", "", "", "", "", "", "", "", "", "", "", "", "18:00", "","", "", "", "", "", "", "", "", "", "", "00:00"
    ]
  },
  yAxis: {
    position: 'right',
    splitNumber: 4,
    min: 0,
    boundaryGap: [0,
      '20%'],
    // max: 400,
    axisLabel: {
      show: false,
      // color: '#666666',
      formatter: function() {
        return "";
      }
    },
    //去掉Y轴坐标线
    axisLine: {
      show: false,
    },
    //刻度线显示
    axisTick: {
      show: false,
    },
    splitLine: {
      //网格线
      lineStyle: {
        type: 'dashed',
        //设置网格线类型 dotted：虚线 solid:实线
        color: '#F1F3F5',
      },
      show: true,
    },
  },
  visualMap: {
    show: true,
    top: 1,
    right: 10,
    orient: 'horizontal',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 10,
    left: 'center',
    pieces: [{
      gt: 0,
      lte: 50,
      color: '#8a2be2',
      label: '深睡',
    },
      {
        gt: 50,
        lte: 100,
        color: '#b566ff',
        label: '浅睡',
      },
      {
        gt: 100,
        lte: 150,
        color: '#ff8081',
        label: '快速眼动',
      },
      {
        gt: 150,
        lte: 300,
        color: '#ffbf00',
        label: '清醒',
      },
    ],
  },
  series: [{
    type: 'line',
    symbol: 'none',
    animationDuration: 1000,
    data: [85, 148, 74, 145, 113, 119, 82, 95, 120, 52, 117, 113, 149, 68, 162, 276, 195, 77, 114,67, 165, 40, 80, 120, 30, 95, 120, 59, 117, 113, 149, 38, 180, 28, 95, 128, 52, 201,113, 146, 68, 160, 272, 193, 74, 114, 67, 120, 89
    ],
  }],
};