echarts 自定义图表 数据父组件传给子组件

样式

需求

1.导弹、飞机、无人机等 一个图表中展示多个实体
2.每个实体有有效干扰时间段、无效干扰时间段
3.根据数据，在图表显示时间段

例子

图表样式在父组件中
xAxis要有时间的最大、最小值 要不然不准确
type :time
x轴的label显示：自定义 要不然不准

//父组件
        <div >
//子组件
               <custom :name='filter'></custom> 
          </div>

<template>
  <div id="multiple-y5" class="multiple-y1"></div>
</template>


<script>

let myChart = null;

export default {
  props: {
    barData: {
      type: Array,
    },
    name: {
      type: String,
    },
  },

  watch: {
    name: {
      handler: async function (newVal, oldVal) {
       /// let { data } = await this.$api.getData(newVal);
//监听从父组件传来的值  虽然mounted加载过一次 但是当此函数走的时候，数据可能还没有  所以来监听
        this.drawgraph(data);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      option: {
        tooltip: {
//parmas 与data一一对应
          formatter: function (params) {
            return (
              '<span style="color:rgb(43, 159, 226)">' +
              params.name +
              "</span>" +
              "</br>" +
              '<span style="color:#99CCFF">开始时间：</span>' +
              params.value[1] +
              '</br><span style="color:#99CCFF">结束时间：</span>' +
              params.value[2] +
              '</br><span style="color:#99CCFF">时间间隔：</span>' +
              params.value[3] +
              "H"
            );
          },
        },
        title: {
          text: "干扰时间段",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

            fontStyle: "normal",
            fontWeight: "normal",
            color: "rgba(43, 159, 226,.8)",
          },
        },

        dataZoom: [
          {
            type: "slider",
            filterMode: "weakFilter",
            showDataShadow: false,
            top: 400,
            labelFormatter: "",
          },
          {
            type: "inside",
            filterMode: "weakFilter",
          },
        ],

        xAxis: {
          scale: true,
          type: "time",
         // interval: 4 * 3600 * 1000, //以一个小时递增
          //  min:0, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: "#fff",
            },
            interval: 0,
            rotate: 30, //旋转角度，为0表示水平
            margin: 8,
          },
        },
        yAxis: {
          data: [],
          axisLabel: {
            interval: 0,
            rotate: 30, //旋转角度，为0表示水平
            margin: 8,
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "custom",
            renderItem: this.renderItem,
            itemStyle: {
              opacity: 0.8,
            },
            encode: {
              x: [1, 2],
              y: 0,
            },
            data: [],
          },
        ],
      },
    };
  },
  // components: {bar2Chart},
  methods: {
    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;

//2个矩形 相裁的结果
      var rectShape = this.$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(),
        }
      );
    },

    drawgraph(r) {
      // 绘制图表
      let data = [],
        minList = [],
        minNum = 0;

//根据官网的数据类型  结合后台人员传的类型  来调整数据结构
      r.forEach((r, index) => {
        r.effInterperiod.forEach((rr, index1) => {
          if(rr.min!=='null') minList.push(new Date(rr.min).getTime());
          data.push({
            name: "有效时间段",
            value: [
              index, //代表y轴对应实体
              rr.min,
              rr.max,
//时间段差值
              (
                (new Date(rr.max).getTime() - new Date(rr.min).getTime()) /
                1000 /
                60 /
                60
              ).toFixed(2),
            ],
            itemStyle: {
              normal: {
                color: "red",
              },
            },
          });
        });

        r.invInterperiod.forEach((rr, index1) => {
         if(rr.min!=='null') minList.push(new Date(rr.min).getTime());
          data.push({
            name: "无效时间段",
            value: [
              index,
              rr.min,
              rr.max,
              (
                (new Date(rr.max).getTime() - new Date(rr.min).getTime()) /
                1000 /
                60 /
                60
              ).toFixed(2),
            ],
            itemStyle: {
              normal: {
                color: "blue",
              },
            },
          });
        });
      });

//options X轴时间需要有个最小值  此过程求后台传来的最小时间
      minNum = Math.min(...minList);
 
      let year = new Date(minNum).getFullYear();
      let month =
        parseInt(new Date(minNum).getMonth() + 1) < 10
          ? "0" + parseInt(new Date(minNum).getMonth() + 1)
          : parseInt(new Date(minNum).getMonth() + 1);
      let date =
        new Date(minNum).getDate() < 10
          ? "0" + new Date(minNum).getDate()
          : new Date(minNum).getDate();
      let hours =
        new Date(minNum).getHours() < 10
          ? "0" + new Date(minNum).getHours()
          : new Date(minNum).getHours();
      let mm =
        new Date(minNum).getMinutes() < 10
          ? "0" + new Date(minNum).getMinutes()
          : new Date(minNum).getMinutes();
      let s =
        new Date(minNum).getSeconds() < 10
          ? "0" + new Date(minNum).getSeconds()
          : new Date(minNum).getSeconds();

      this.option.xAxis.min =
        year + "-" + month + "-" + date + " " + hours + ":" + mm + ":" + s;
      console.log(
        year + "-" + month + "-" + date + " " + hours + ":" + mm + ":" + s
      );
      this.option.yAxis.data = r.map((r) => r.objectName);
      this.option.series[0].data = data;
 

      myChart.setOption(this.option);
    },
  },
  //   created(){
  // console.log(this.barData)
  //   },
  async mounted() {
    // 基于准备好的dom，初始化echarts实例
    let { data } = await this.$api.getData(name);
    myChart = this.$echarts.init(document.getElementById("multiple-y5"));
    //console.log(data,'custom');
    this.drawgraph(data);
    // 窗口改变时重新绘制
    window.addEventListener("resize", this.$debounce(myChart.resize, 500));
  },
};
</script>

<style scoped>
.multiple-y1 {
  width: 100%;
  height: 100%;
}
</style>

后台数据类型

   "invInterperiod": [
            {
            "min":"2021-07-13 05:00:00",
            "max":"2021-07-13 05:20:00"
        },
        {
            "min":"2021-07-13 05:40:00",
            "max":"2021-07-13 06:00:00"
        },
        {
            "min":"2021-07-13 07:00:00",
            "max":"2021-07-13 08:20:00"
        },
        {
            "min":"2021-07-13 09:00:00",
            "max":"2021-07-13 10:20:00"
        },
        {
            "min":"2021-07-13 11:40:00",
            "max":"2021-07-13 12:20:00"
        }
    
    
    ],
        "effInterperiod": [
            {
                "min":"2021-07-14 05:00:00",
                "max":"2021-01-14 05:20:00"
            },
            {
                "min":"2021-07-14 05:40:00",
                "max":"2021-07-14 06:00:00"
            },
            {
                "min":"2021-07-14 07:00:00",
                "max":"2021-07-14 08:20:00"
            },
            {
                "min":"2021-07-15 09:00:00",
                "max":"2021-07-14 10:20:00"
            },
            {
                "min":"2021-07-14 12:40:00",
                "max":"2021-07-14 13:20:00"
            }
        
        ]