echars 自定义离散型柱状图

大量参照了官方

//echarts自定义渲染函数 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 = 20; var rectShape = echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height, }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height, } );

  return (
    rectShape && {
      type: "rect",
      transition: ["shape"],
      shape: rectShape,
      style: api.style(),
    }
  );
},

computed: { options() { let _this = this; //模拟的数据 const backgroundData = []; //背景色 const rightyAxisData = [] //辅助轴数据 _this.allDate.forEach(function (date, index) { let h = parseInt(Math.random() * 16); let m = parseInt(Math.random() * 60); let start = ${_this.echartsDate[index]} ${h}:${m}; var baseTime = moment(start) - moment(_this.echartsDate[index]); let endH = h + 8; let endM = parseInt(Math.random() * 60); let end = ${_this.echartsDate[index]} ${endH}:${endM}; var duration = moment(end) - moment(start); rightyAxisData.push(parseInt(duration/3600000)) backgroundData.push(86400000); _this.data.push({ name: date, value: [index, baseTime, baseTime + duration, duration], itemStyle: { normal: { color: "#1890FF", }, }, }); }); _this.data[0].value = [0, 32760000, 63960000, 3120000]; _this.data.push({ name: "3月1日", value: [0, 0, 14400000, 14400000], itemStyle: { normal: { color: "#1890FF", }, }, });

  return {
    tooltip: {
      formatter: function (params) {
        return params.marker + params.name + ": " + params.value[3] + " ms";
      },
    },
    grid: {
      // height: 1600,
    },
    xAxis: {
      min: 0,
      max: 86400000,
      scale: true,
      splitNumber: 25,
      interval: 3600000,
      position: "top",
      name:'时',
      nameLocation:'end',
      nameTextStyle: {
        padding: [-28,0,0,14]
      },
      axisLabel: {
        formatter: function (val) {
          return parseInt(val / 3600000);
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(51, 73, 130, 0.8)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#5E7DB6",
          opacity: 0.8,
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      //主轴
      {
        data: _this.allDate,
        inverse: true,
        boundaryGap: true,
        axisLine: {
          lineStyle: {
            color: "#5E7DB6",
            opacity: 0.8,
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: 14,
        },
      },
      //辅助轴 显示当日总工时
      {
        data: rightyAxisData,
        inverse: true,
        boundaryGap: true,
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#1890FF",
          fontSize: 14,
        },
        name:'小时',
        nameLocation:'end',
        nameTextStyle: {
          color: "#1890FF",
          fontSize: 12,
          padding: [-32,0,0,80]
        },
      }
    ],
    dataZoom: [
        {
           start:0,
           end: 100,
           type: 'slider',
           minValueSpan:17,//显示数据的条数 min和max相同，只滚动不缩放
           maxValueSpan:17,//显示数据的条数
           show: true,
           yAxisIndex: [0],
           handleSize: 0,
           height: '80%',//组件高度
           left: '99.5%', //左边的距离
           right: 0,//右边的距离
           top: 50,//上边边的距离
           bottom:0,
           borderColor: "rgba(43,48,67,0)",
           fillerColor: '#5E7DB6',//滑动块的颜色
           backgroundColor: 'rgba(13,33,117,0)',//两边未选中的滑动条区域的颜色
           borderColor: 'rgba(13,33,117,0)',
           borderRadius: 1,
           showDataShadow: false,//是否显示数据阴影 默认auto
           showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
           realtime:true, //是否实时更新
           filterMode: 'filter',
           yAxisIndex: [0,1],//控制的y轴
        },
        // 滑块的属性
        {
           type: 'inside',
           show: true,
           yAxisIndex: [0,1],
           start: 0,//默认为1
           end: 100,//默认为100
        },
    ],
    series: [
      {
        type: "custom",
        renderItem: _this.renderItem,
        itemStyle: {
          opacity: 0.8,
        },
        encode: {
          x: [1, 2],
          y: 0,
        },
        data: _this.data,
        zlevel: 2,
      },
      {
        type: "bar",
        data: backgroundData,
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(94, 125, 182, 0.5)",
          },
        },
        zlevel: 0,
        barWidth: 20,
      },
      // {
      //   type: "custom",
      //   renderItem: _this.renderItem,
      //   itemStyle: {
      //     opacity: 0.8,
      //   },
      //   encode: {
      //     x: [1, 2],
      //     y: 0,
      //   },
      //   data: backgroundData,
      //   tooltip: {
      //     trigger: 'none',
      //     show: false
      //   },
      //   legendHoverLink:false
      // },
    ],
  };
},

},