效果預覽

 程式碼實現：

xAxis: [
          {
            type: "category",
            axisLabel: {
              show: true,
              textStyle: {
                color: this.xaxisLabelColor, //更改座標軸文字顏色
                fontSize: this.axisLabelFont,
              },
              rotate: this.xaxisLabelRotate,
            },
            nameTextStyle: {
              color: this.xaxisLabelColor,
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [  //雙軸則Y軸為陣列形式
 

          {
            type: "value",
            name: "水量",
            // min: 0,
            // max: 250,
            interval: 50,
            // axisLabel: {
            //   formatter: "{value} ml",
            // },
            axisLabel: {
              show: true,
              // formatter: "{value} ml",
              textStyle: {
                color: this.yaxisLabelColor,
                fontSize: this.axisLabelFont,
                rotate: this.xaxisLabelRotate,
              },
            },
            nameTextStyle: {
              color: this.yaxisLabelColor,
            },
          },
          {
            type: "value",
            name: "溫度",
            axisLabel: {
              show: true,
              textStyle: {
                color: this.yaxisLabelColor,
                fontSize: this.axisLabelFont,
                rotate: this.xaxisLabelRotate,
              },
            },
            nameTextStyle: {
              color: this.yaxisLabelColor,
            },
          },
        ],
        series: [
          {
            name: "蒸發量",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "降水量",
            type: "bar",
            z: -1,           //主要是實現這個柱狀圖為重合的
 

            barGap: "-100%", //主要是實現這個柱狀圖為重合的

           data: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, ], 
          },
　　　　　　 { name: "平均溫度",
　　　　　　　　 type: "line", 
　　　　　　　　yAxisIndex: 1, //設定與之匹配的Y軸 -- 1為下標
　　　　　　　　 data: [ 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, ], 
　　　　　　}, 
　　　　],