实际值、预测值、计划值、差值红色显示

实现效果：
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 = [ planData, actualData,predictData, minDataDownStackBar, differenceDataUpStackBar];
// 系列值、系列颜色、渐变色、图例名称
var colorsData = [ 'rgba(52,135,200,1)','rgba(51,214,99,1)', 'rgba(51,214,99,1)', "#48c871", "#48c871"]; // 线颜色
var offsetone = [ 'rgba(52,135,200,1)','rgba(51,214,99,1)']; // 渐变色设置
var offsettwo = ['rgba(52,135,200,.2)','rgba(51,214,99,0.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: offsetone[i]
                }, {
                    offset: 1,
                    color: offsettwo[i]
                }])
            },
        };
    } else if (i === 1) {
        item.areaStyle = { // 实际---------加渐变色
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: offsetone[i]
                }, {
                    offset: 1,
                    color: offsettwo[i]
                }])
            },
        };
    } 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[0],
                textStyle: {
                    color: '#fff'
                },
                // icon:'image:///images/echarts/backplan.png'
            },
            {
                name: legenseriesParamsDataata[1],
                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) {
                    paraPlan = params[i];
                } else if (params[i].seriesName.indexOf("实际") > -1) {
                    paraActual = 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;