實現效果：
1、實際值和預測值在連線點，只顯示實際值
2、當預測值>計劃值時，出現紅色柱子，同時tooltip顯示預測值、計劃值和超計劃值（超計劃值=預測-計劃）
3、當預測值<=計劃值時，不出現紅色柱子，同時tooltip顯示預測值、計劃值和超計劃值=0

/*
實際值和預測值在連線點，只顯示實際值
當預測值>計劃值時，出現紅色柱子，同時tooltip顯示預測值、計劃值和超計劃值（超計劃值=預測-計劃）
當預測值<=計劃值時，不出現紅色柱子，同時tooltip顯示預測值、計劃值和超計劃值=0
*/
var xData = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; // 橫座標
var planData = [0, 7, 4, 7, 4, 7, 9, 7, 4, 7]; // 計劃值
var actualData = [0, 8, 5, 8, 5, '-', '-', '-', '-', '-']; // 實際值,最後一個數字和預計值同下表值相同，這樣實際和預測才能顯示成平滑的曲線，不斷開
var predictData = ['-', '-', '-', '-', 5, 8, 9, 9, 6, 5]; // 預計值
var minDataDownStackBar = []; // 最小值{預測和計劃做比較，誰小顯示誰}
var differenceDataUpStackBar = []; // 差值=預測-計劃,有負數
var seriesData = []; //輔助陣列，儲存series資料
// 求最小值和差值
for (var i = 0; i < planData.length; i++) {
    if (actualData[i] != '-') { //實際值不為-時，最小值和差值均顯示成-，這樣堆積的柱子，在虛線出現之前都不顯示出來
        minDataDownStackBar[i] = '-';
        differenceDataUpStackBar[i] = '-';
    } else { //實際值為-時，預測和計劃誰小顯示誰
        differenceDataUpStackBar[i] = predictData[i] - planData[i];
        if (predictData[i] <= planData[i]) { //預計值<=計劃值，minDataDownStackBar取預計值，differenceDataUpStackBar作差
            minDataDownStackBar[i] = predictData[i];
        } else { //預計值>計劃值，minDataDownStackBar取預計值，differenceDataUpStackBar作差
            minDataDownStackBar[i] = planData[i];
        }
    }
}
seriesData = [actualData, planData, predictData, minDataDownStackBar, differenceDataUpStackBar];
// 系列值、系列顏色、漸變色、圖例名稱
var colorsData = ["#33D663", "#3487C8", "#48c871", "#48c871", "#48c871"]; // 線顏色
var offsetcolors = ['rgba(51,214,99,1)', 'rgba(51,214,99,0.2)', 'rgba(52,135,200,1)', 'rgba(52,135,200,.2)']; // 漸變色設定
var legenseriesParamsDataata = ["實際", "計劃", "預測", "差值", "差值"]; // 圖例，堆積也用此陣列
var seriesParamsData = []; //輔助陣列，用來存放series物件
for (var i = 0; i < seriesData.length; i++) {
    var strType;
    if (i < 3) {
        strType = 'line';
    } else {
        strType = 'bar';
    }
    var item = {
        name: legenseriesParamsDataata[i],
        type: strType,
        stack: legenseriesParamsDataata[i],
        smooth: true,
        symbolSize: 1,
        itemStyle: { // 拐點值
            normal: {
                color: colorsData[i], // 取實線的顏色
            }
        },
        data: seriesData[i],
    };
    if (i === 0) {
        item.areaStyle = { // 實際值-------加漸變色
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: offsetcolors[0]
                }, {
                    offset: 1,
                    color: offsetcolors[1]
                }])
            },
        };
    } else if (i === 1) {
        item.areaStyle = { // 計劃值---------加漸變色
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: offsetcolors[2]
                }, {
                    offset: 1,
                    color: offsetcolors[3]
                }])
            },
        };
    } else if (i === 2) { // 預測值------------加虛線
        item.lineStyle = {
            normal: {
                width: 2,
                color: colorsData[i], // 取虛線的顏色
                type: 'dashed'
            }
        };
    } else if (i === 3) { // 最小值----------設定下面堆積柱子的顏色和值
        item.zlevel = -1;
        var downData = []; //輔助陣列，用來儲存下方堆積柱子的顏色和值
        for (var j = 0; j < seriesData[4].length; j++) {
            if (seriesData[4][j] === "-" || seriesData[4][j] <= 0) { //根據最後差值判斷是否顯示堆積柱子的下部分
                downData[j] = {
                    value: seriesData[3][j],
                    itemStyle: {
                        normal: {
                            color: "rgba(250,84,84,.0)" //透明
                        }
                    }
                };
            } else { // 差值>0，超計劃，顯示成紅色
                downData[j] = {
                    value: seriesData[3][j],
                    itemStyle: {
                        normal: {
                            color: "rgba(250,84,84,1)"
                        }
                    }
                };
            }
        }
        item.data = downData;
        //	 item.itemStyle.normal.color = '#fa5454';// 最小值的顏色，堆積
        item.barWidth = 20;
    } else if (i === 4) { // 差值
        item.barWidth = 20;
        var upData = []; //輔助陣列，用來儲存上方堆積柱子的顏色和值
        for (var j = 0; j < seriesData[4].length; j++) {
            if (seriesData[4][j] === "-" || seriesData[4][j] <= 0) { // 差值-||<=0，則超值為0
                upData[j] = {
                    value: 0
                };
            } else { // 差值>0，超計劃，顯示成紅色
                upData[j] = {
                    value: seriesData[4][j],
                    itemStyle: {
                        normal: {
                            color: "rgba(250,84,84,1)" //超計劃顯示的顏色
                        },
                    }
                };
            }
        }
        item.data = upData;
    }
    seriesParamsData.push(item);
}
var option = {
    backgroundColor: '#8B4513',
    color: colorsData,
    legend: { //圖例
        show: true,
        data: [{
                name: legenseriesParamsDataata[1],
                textStyle: {
                    color: '#fff'
                },
                // icon:'image:///images/echarts/backplan.png'
            },
            {
                name: legenseriesParamsDataata[0],
                textStyle: {
                    color: '#fff'
                },
                // icon:'image:///images/echarts/backactual.png'
            },
            {
                name: legenseriesParamsDataata[2],
                textStyle: {
                    color: '#fff'
                },
                // icon:'image:///images/echarts/backpredict.png'
            }
        ],
        right: 20,
        top: 10,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#ffa147',
                width: 2,
                type: 'dashed'
            }
        },
        formatter: function(params) {
            // debugger;
            var paraActual = null; //實際
            var paraPredict = null; //預測
            var paraPlan = null; //計劃
            var paraExceedPlan = null; //超計劃
            for (var i = 0, len = params.length; i < len; i++) {
                if (params[i].seriesName.indexOf("實際") > -1) {
                    paraActual = params[i];
                } else if (params[i].seriesName.indexOf("計劃") > -1) {
                    paraPlan = params[i];
                } else if (params[i].seriesName.indexOf("預測") > -1) {
                    paraPredict = params[i];
                } else if (params[i].seriesName.indexOf("差值") > -1) {
                    paraExceedPlan = params[i];
                }
            }
            var str = "";
            //有計劃顯示計劃
            if (paraPlan) {
                str += paraPlan.marker + paraPlan.seriesName + ' : ' + paraPlan.value + '<br/>';
            }
            //有實際顯示實際
            if (paraActual && (paraActual.value === 0 || !!paraActual.value) && paraActual.value != '-') {
                str += paraActual.marker + paraActual.seriesName + ' : ' + paraActual.value + '<br/>';
            } //沒有實際判斷是否有預測，顯示預測
            else if (paraPredict && (paraPredict.value === 0 || !!paraPredict.value) && paraPredict.value != '-') {
                str += paraPredict.marker + paraPredict.seriesName + ' : ' + paraPredict.value + '<br/>';
                //有差值顯示差值
                if (paraExceedPlan && (paraExceedPlan.value === 0 || !!paraExceedPlan.value) && paraExceedPlan.value != '-') {
                    str += paraExceedPlan.marker + '超計劃 : ' + paraExceedPlan.value + '<br/>';
                }

            }
            // //有差值顯示差值
            // if (paraExceedPlan && !!paraExceedPlan.value && paraExceedPlan.value != '-') {
            //     str += paraExceedPlan.marker + '超計劃 : ' + paraExceedPlan.value + '<br/>';
            // }
            return "時間：" + params[0].name + ":00<br>" + str;
        }

    },
    calculable: false,
    grid: {
        top: '10%',
        left: '10%',
        right: '10%',
        bottom: '10%',
        containLabel: true,
    },
    xAxis: [{
        name: "h",
        nameLocation: 'end',
        type: 'category',
        data: xData,
        nameTextStyle: {
            color: '#fff',
            fontSize: 12,
        }, //座標軸名稱的文字樣式。
        boundaryGap: false,
        axisLine: {
            show: false
        }, //軸線顏色
        axisTick: {
            show: false
        }, //標記長度
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        }, //分割線
        axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
                color: function(value) { // x軸文字顏色的設定
                    return value > 14 ? 'gray' : 'white'; //橫座標預警值
                },
            }
        },
    }],
    yAxis: [{
        name: '人',
        type: 'value',
        nameTextStyle: {
            color: '#fff'
        }, //座標軸名稱的文字樣式。
        axisLine: {
            show: false
        }, //軸線顏色
        axisTick: {
            show: false
        }, //標記長度
        axisLabel: {
            show: true,
            color: '#fff'
        }, //文字
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(52,135,200,.4)',
                width: 1,
                type: "solid"
            }
        }, //分割線
    }],
    series: []
};
option.series = seriesParamsData;