echarts上下柱形图

export const option6 = {
  title: {
    text: "充电开始时段分布",
    x: "left",
    textStyle: {
      fontSize: 16,
      fontStyle: "normal",
      fontWeight: "normal",
      color: "#33528D",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter(params) {
      // console.log(params)
      if (params.length > 1) {
        return params[0].axisValue + "<br>" +
          params[0].marker + params[0].seriesName + "占比 :" + params[0].value + "%" + "<br>" +
          params[1].axisValue + "<br>" +
          params[1].marker + params[1].seriesName + "占比 :" + params[1].value + "%"
      } else {
        return params[0].axisValue + "<br>" +
          params[0].marker + params[0].seriesName + "占比 :" + params[0].value + "%"
      }

    },
  },
  legend: {
    x: "70%",
    icon: "circle",
    data: ["快充", "慢充"],
  },
  axisPointer: {
    link: { xAxisIndex: "all" },
  },
  dataZoom: [
    {
      show: true,
      // realtime: true,
      xAxisIndex: [0, 1],
      height: "20",
      bottom: 0,
      start: 0,
      end: 100,
      handleIcon:
        "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
      handleSize: "80%",
      handleStyle: {
        color: "#fff",
        shadowBlur: 3,
        shadowColor: "rgba(0, 0, 0, 0.6)",
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
    },
    {
      type: "inside",
      // realtime: true,
      xAxisIndex: [0, 1],
      height: "20",
      bottom: 0,
      start: 0,
      end: 10,
      handleIcon:
        "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
      handleSize: "80%",
      handleStyle: {
        color: "#fff",
        shadowBlur: 3,
        shadowColor: "rgba(0, 0, 0, 0.6)",
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
    },
  ],
  grid: [
    {
      left: "5%",
      right: "5%",
      height: "125px",
    },
    {
      left: "5%",
      right: "5%",
      top: "185px",
      height: "125px",
    },
  ],
  xAxis: [
    {
      type: "category",
      name: "时",
      // data: ["(0,1]", "(2,3]"],
      data: [],
      nameTextStyle: {
        color: "#999",
      },
      splitLine: {
        show: false, //隐藏或显示
      },
      axisLine: {
        lineStyle: {
          color: "red",
          type: "dashed",
        },
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: "#999",
        },
      },
    },
    {
      position: "bottom",
      gridIndex: 1,
      type: "category",
      // name: "时间（hr）",
      // data: ["(0,1]", "(2,3]"],
      data: [],
      nameTextStyle: {
        color: "#fff",
      },
      splitLine: {
        show: false, //隐藏或显示
        lineStyle: {
          color: "#fff",
          type: "dashed",
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#fff",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#999",
        },
      },
    },
  ],
  yAxis: [
    {
      name: "占比（%）",
      type: "value",
      // interval:1,
      nameTextStyle: {
        color: "#999",
      },
      splitLine: {
        lineStyle: {
          type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          type: 'dashed'
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#999",
        },
        showMinLabel: false,
      },
    },
    {
      gridIndex: 1,
      name: "",
      // interval:1,
      type: "value",
      inverse: true,
      nameTextStyle: {
        color: "#999",
      },
      splitLine: {
        lineStyle: {
          type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#999",
        },
        showMinLabel: false,
      },
    },
    {
      type: 'value',
      name: '',
      nameTextStyle: {
        color: "#999",
        padding: [0, 0, 0, 40]
      },
      splitLine: {
        lineStyle: {
          type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          type: 'dashed'
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#999",
        },
        showMinLabel: false,
      },
      // axisLabel: {
      //     formatter: '{value} %'
      // }

    },
    {
      gridIndex: 1,
      type: 'value',
      inverse: true,
      name: '',
      nameTextStyle: {
        color: "#999",
        padding: [40, 0, 0, 50],
      },
      splitLine: {
        lineStyle: {
          type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          type: 'dashed'
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#999",
        },
        showMinLabel: false,
      },
      // axisLabel: {
      //     formatter: '{value} %'
      // }
    }

  ],
  series: [
    {
      name: "快充",
      type: "bar",
      symbolSize: 8,
      hoverAnimation: false,
      data: [1, 1],
      barMaxWidth: 30,
      itemStyle: {
        normal: {
          color: "#4771D0",
          barBorderRadius: [12, 12, 0, 0],
        },
      },
    },
    {
      name: "慢充",
      type: "bar",
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize: 8,
      hoverAnimation: false,
      data: [2, 0],
      barMaxWidth: 30,
      itemStyle: {
        normal: {
          color: "#E96D3F",
          barBorderRadius: [0, 0, 12, 12],
        },
      },
    },
    {
      name: "快充占比",
      type: "line",
      yAxisIndex: 2,
      symbolSize: 8,
      hoverAnimation: false,
      data: [],
      barMaxWidth: 30,
      symbol: false,
      itemStyle: {
        normal: {
          color: "none",
          barBorderRadius: [0, 0, 12, 12],
        },
      },
    },
    {
      name: "慢充占比",
      type: "line",
      symbolSize: 8,
      xAxisIndex: 1,
      yAxisIndex: 3,
      hoverAnimation: false,
      symbol: false,
      data: [],
      barMaxWidth: 30,
      itemStyle: {
        normal: {
          color: "none",
          barBorderRadius: [0, 0, 12, 12],
        },
      },
    },
  ],
}

　　

getNewChargeHour() {
      let params = this.formInline;
      let newParams = JSON.parse(JSON.stringify(params));
      this.paramObj1 = {
        param: newParams,
        name: "/chargeMode/newChargeHour"
      };
      getNewChargeHour(newParams).then(res => {
        if (res.code == "200" || res.code == "201") {
          this.option6.xAxis[0].data = res.data.daily.xDailyList;
          this.option6.xAxis[1].data = res.data.daily.xDailyList;
          //快充次数
          this.option6.series[0].data = res.data.daily.yDailyFastPerList;
          // 慢充次数
          this.option6.series[1].data = res.data.daily.yDailySlowPerList;
          if (res.data.daily.xDailyList.length == 0) {
            Message.info("暂无数据！");
          }
        }
      });
    },