客流告警预警echarts 柱状配置项内容和展示

表达客流量实际与预测关系

      const labelList = ['西街口', '王府井', '公主坟', '龙抬头', '龙湖公园', '朝天门', '金拱门'];
const chartCount = [4, 4, 4, 5];
const timeScope = [
    ['09:00', '08:45', '08:30'],
    ['09:00', '09:15', '09:30'],
];
const alarmChart = [
    { name: '西街口', start: 0, end: -3 },
    { name: '王府井', start: 0, end: -3 },
    { name: '公主坟', start: -3, end: -3 },
    { name: '龙抬头', start: 0, end: -6 },
    { name: '龙湖公园', start: -3, end: -3 },
    { name: '朝天门', start: -0, end: -3 },
     { name: '金拱门', start: -3, end: -3 },
];
const warnChart = [
    { name: '西街口', start: 0, end: 3 },
    { name: '王府井', start: 0, end: 6 },
       { name: '公主坟', start: 3, end: 3 },
    { name: '龙抬头', start: 0, end: 6 },
    { name: '龙湖公园',  start: 0, end: 3 },
    { name: '朝天门', start: 3, end: 3 },
     { name: '金拱门', start: 3, end: 3 },
];
option = {
    backgroundColor: '#fff',
    grid: [
        {
            top: '25%',
            width: '48%',
            left: '2%',
            gridIndex: 0,
            id: 0,
            height: '50%'
        },
        {
            top: '25%',
            left: '50%',
            width: '48%',
            gridIndex: 1,
            id: 1,
            height: '50%'
        }
    ],
    xAxis: [
        {
            type: 'value',
            min: '-6',
            max: '0',
            gridIndex: 0,
            axisTick: {
                show: false,
                inside: false,
            },
            axisLabel: {
                show: true,
                color: '#949EA8',
                rich: {
                    a: {
                        width: 15,
                        height: 10,
                        // padding: [4, 0, 0, 0],
                        // backgroundColor: {
                        //     image: timePng,
                        // },
                    },
                    b: {
                        color: '#4D94FF',
                        padding: [-1, 0, 0, 0],
                    },
                    c: {
                        color: '#FF7085',
                        fontSize: 12,
                        lineHeight: 17,
                        fontFamily: 'PingFangSC-Medium',
                        borderColor: '#FF7085',
                        borderWidth: 1,
                        backgroundColor: '#FFE2E7',
                        borderRadius: 5,
                        padding: 5,
                    },
                    e: {
                        color: '#fe9749',
                        fontSize: 12,
                        lineHeight: 17,
                        fontFamily: 'PingFangSC-Medium',
                        borderColor: '#fe9749',
                        borderWidth: 1,
                        backgroundColor: '#FFE2E7',
                        borderRadius: 5,
                        padding: 5,
                    },
                    d: {
                        width: '90%',
                    },
                },
                formatter: (value) => {
                    if (value === 0) {
                        return '{a|} {b|' + timeScope[0][value] + '}';
                    } else if (-value === 2) {
                        return '{d|}{c| 告警' + chartCount[1] + '}';
                    } else if (-value === 5) {
                        return '{d|}{c| 告警' + chartCount[0] + '}';
                    } else {
                        return timeScope[0][-value / 3];
                    }
                },
            },
            axisLine: {
                // Y轴轴线样式
                show: true,
                lineStyle: {
                    color: '#CFD7DD',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: ['#CFD7DD', '#E8ECEF', '#E8ECEF'],
                },
            },
        },
        {
            type: 'value',
            gridIndex: 1,
            min: '0',
            max: '6',
            axisTick: {
                show: false,
            }, // 是否显示刻度
            axisLine: {
                // Y轴轴线样式
                show: true, // 是否显示X轴
                lineStyle: {
                    color: '#CFD7DD',
                },
            },
            axisLabel: {
                show: true,
                color: '#949EA8',
                rich: {
                    a: {
                        width: 15,
                        height: 10,
                        // padding: [4, 0, 0, 0],
                        // backgroundColor: {
                        //     image: timePng,
                        // },
                    },
                    b: {
                        color: '#4D94FF',
                        padding: [-1, 0, 0, 0],
                    },
                    c: {
                        color: '#FF7085',
                        fontSize: 12,
                        lineHeight: 17,
                        fontFamily: 'PingFangSC-Medium',
                        borderColor: '#FF7085',
                        borderWidth: 1,
                        backgroundColor: '#FFE2E7',
                        borderRadius: 5,
                        padding: 5,
                    },
                    e: {
                        color: '#fe9749',
                        fontSize: 12,
                        lineHeight: 17,
                        fontFamily: 'PingFangSC-Medium',
                        borderColor: '#fe9749',
                        borderWidth: 1,
                        backgroundColor: '#FFE2E7',
                        borderRadius: 5,
                        padding: 5,
                    },
                    d: {
                        width: '90%',
                    },
                },
                formatter: (value) => {
                    if (value !== 0) {
                        if (value === 1) {
                            return '{d|}{e| 预警' + chartCount[2] + '}';
                        } else if (value === 4) {
                            return '{d|}{e| 预警' + chartCount[3] + '}';
                        } else {
                            return timeScope[1][value / 3];
                        }
                    }
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: ['#CFD7DD', '#E8ECEF', '#E8ECEF'],
                },
            },
        },
    ],
    yAxis: [
        {
            type: 'category',
            gridIndex: 0,
            inverse: true,
            data: labelList,
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisLine: {
                // Y轴轴线样式
                show: true,
                symbol: ['circle'],
                symbolSize: 7,
                lineStyle: {
                    width: 2,
                    color: '#4D94FF',
                },
            },
            zlevel: 2,
        },
        {
            type: 'category',
            gridIndex: 1,
            inverse: true,
            data: labelList,
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                margin: 0,
            },
            axisLine: {
                show: false, // 是否显示轴线
            },
        },
    ],
    series: [
        {
            name: '告警',
            type: 'bar',
            stack: 'one',
            barWidth: '20',
            gridIndex: 0,
            itemStyle: {
                normal: {
                    label: {
                        color: 'black',
                    },
                    color: 'transparent',
                },
            },
            data: alarmChart.map((item) => item.start),
        },
        {
            name: '告警',
            type: 'bar',
            stack: 'one',
            barWidth: '20',
            gridIndex: 0,
            emphasis: {
                itemStyle: {
                    color: '#FF7085',
                    shadowColor: 'rgba(255,112,133,0.3)',
                    shadowBlur: 10,
                },
                label: {
                    color: '#FFF',
                    // color: '#000'
                },
            },
            itemStyle: {
                normal: {
                    show: true,
                    color: '#FFE2E7',
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#000',
                    label: {
                        show: true,
                        position: 'inside',
                        // color: '#FF7085',
                        color: '#000',
                        formatter: function (v) {
                            return v.data ? v.name : '';
                        },
                    },
                },
            },
            data: alarmChart.map((item) => item.end),
        },
        {
            name: '预警',
            type: 'bar',
            stack: 'one',
            barWidth: '20',
            gridIndex: 1,
            itemStyle: {
                normal: {
                    label: {
                        color: 'black',
                    },
                    color: 'transparent',
                },
            },
            data: warnChart.map((item) => item.start),
        },
        {
            name: '预警',
            type: 'bar',
            stack: 'one',
            barWidth: '20',
            gridIndex: 1,
            emphasis: {
                itemStyle: {
                    color: '#FE9749',
                    shadowColor: 'rgba(254,151,73,0.3)',
                    shadowBlur: 10,
                },
                label: {
                    color: '#FFF',
                    // color: '#000'
                },
            },
            itemStyle: {
                normal: {
                    show: true,
                    color: '#FFEADB',
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#333',
                    label: {
                        show: true,
                        position: 'inside',
                        // color: '#FE9749',
                        color: '#000',
                        formatter: function (v) {
                            return v.data ? v.name : '';
                        },
                    },
                },
            },
            data: warnChart.map((item) => item.end),
        },
    ],
};