echarts 甘特图详解做时间轴

let fontcol="#00000087" ;
option = {
      tooltip: {
          formatter: function (params) {
                  return params.value[3];
          }
      },
      xAxis: {
          min: 1620576000000,
          type:'time',
          scale: true,
          axisLabel: {
            formatter: function (val) {
                  var da= new Date(val);
                  var s=(da.getMonth()+1)+"-"+da.getDate();
                  return s;
            }
          },
      },
      yAxis: {
        max: 0.3
      },
      series: [{
          type: 'custom',
          renderItem: (params, api) => {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;

            var rectShape = echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
            },
            {
                x: 0,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            }
            );
            return rectShape && {
                type: 'rect',
                transition: ['shape'],
                shape: rectShape,
                style: api.style()
            };
          },
          encode: {
              x: [1, 2],
              y: 0
          },
          data: [
            {"value":[0,1620576000000,1620662400000,'警告'], itemStyle:{normal: {color:'red'}}},//毫秒数要为数字类型
            {"value":[0,1620662400000,1620748800000,'正常'], itemStyle:{normal: {color:'green'}}},
            {"value":[0,1620748800000,1620835200000,'正常'], itemStyle:{normal: {color:'red'}}},//毫秒数要为数字类型
            {"value":[0,1620835200000,1620921600000,'正常'], itemStyle:{normal: {color:'red'}}},//毫秒数要为数字类型
            {"value":[0,1620921600000,1621008000000,'正常'], itemStyle:{normal: {color:'green'}}},
            {"value":[0,1621008000000,1621094400000,'警告'], itemStyle:{normal: {color:'red'}}},//毫秒数要为数字类型
          ]
      }]
    }; 

你可能感兴趣的:(echarts,vue,echarts,vue)