1. 思路

畫第二個x軸，在這個軸上繪製堆疊柱狀圖，下面的柱狀圖隱藏，上面的柱狀圖設定成白色，data取小一點，就可以看成一條直線了

2. 程式碼

xAxis: [
    {
        type: 'category',
        data: data.xArray,
        splitLine: {
            show: false
        },
        axisLabel: {// x軸字型設定
            fontSize: 12,
            color: '#ffffff',// 字型顏色
            interval: 0,// 不間隔顯示標籤，即顯示所以標籤
            rotate: 30// 標籤傾斜角度
        },
        axisLine: {// x軸軸線設定
            lineStyle: {
                color: '#ffffff',
                width: 2,// 這裡是為了突出顯示加上的
            }
        }
    },
    {// 第二個x軸，不顯示
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisPointer: {
            type: 'none',
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: data.xArray
    }
],
// series裡面加入2個bar(想在每個柱子上都畫橫線的話，則增加2n個bar，每兩個bar為一組，構成一個bar)
{
    name: "目標值",
    stack: 'breakevenEleGroup',
    type: 'bar',
    barWidth: "75%",
    xAxisIndex: 1,
    itemStyle: {
        normal: {
            color: 'rgba(0,0,0,0)',/*設定bar為隱藏*/
            label: {
                show: true, // 開啟顯示
                position: 'top', // 在上方顯示
                formatter: function (params) {
                    //console.log(params);
                    return params.value;
                },// 百分比顯示
                textStyle: { // 數值樣式
                    color: 'white',
                    fontSize: 12,
                }
            }
        }
    },
    data: data.goal
},
{
    /*這個bar是橫線的顯示*/
    name: "目標值上面的柱子",
    stack: 'breakevenEleGroup',
    type: 'bar',
    xAxisIndex: 1,
    barWidth: "75%",
    itemStyle: {
        normal: {
            color: 'white'
        }
    },
    data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3],
},
 

3. 效果