停机次数ECharts Gallery

20:11:45图表已生成
代码
let data = [{
    "haltCountMonthGoal": 80,
    "monthHaltCount": 40,
    "name": "A",
    "todayHaltCount": 5
}, {
    "haltCountMonthGoal": 50,
    "monthHaltCount": 50,
    "name": "C",
    "todayHaltCount": 10
}, ]
data = data.reverse()
// a在下，b在上
const [a, b] = data
// 取最大值，上下两列的最大值都设为这个值
const max = Math.max(a.haltCountMonthGoal, b.haltCountMonthGoal)
// 箭头标记点坐标，当月累计大于月目标时，去最大值，否则乘以相应的比例
const markPointData = [{
        name: '日累计',
        value: b.todayHaltCount,
        xAxis: b.monthHaltCount >= b.haltCountMonthGoal ? max : (b.monthHaltCount + b.todayHaltCount) * (max / b.haltCountMonthGoal),
        yAxis: 1
    },
    {
        name: '日累计',
        value: a.todayHaltCount,
        xAxis: a.monthHaltCount >= a.haltCountMonthGoal ? max : (a.monthHaltCount + a.todayHaltCount) * (max / a.haltCountMonthGoal),
        yAxis: 0
    }
]
// 提示框标记坐标
let markPointRectData = JSON.parse(JSON.stringify(markPointData))
// 提示框左侧和右侧都不能被隐藏
markPointRectData.map(v => {
    if ((v.xAxis - v.value) >= max) {
        v.xAxis -= v.value * 2
    }
    let rate = v.xAxis / max
    if (rate < 0.1) {
        v.xAxis += max * 0.08
    } else if (rate > 0.9) {
        v.xAxis -= max * 0.08
    }
})
// 标记线数据，上下两列
let markLineData = [
    // 下标记线
    [{
            x: '2',
            y: '76.5%',
            lineStyle: {
                width: 40,
                color: '#ff001c'
            }
        },
        {
            x: '80%',
            y: '76.5%'
        }
    ],
    // 上标记线
    [{
            x: '15',
            y: '38.4%',
            lineStyle: {
                width: 40,
                color: '#ff001c'
            }
        },
        {
            x: '525',
            y: '38.4%'
        }
    ]
]
// 标记线数量，长度
let monthCount = data.map((v, index) => {
    // 长度是否为2，如果长度不为2，那么下标只能取0，而取不到1
    const lengthIs2 = markLineData.length === 2
    if (v.monthHaltCount >= v.haltCountMonthGoal) {
        // 控制红色警告线的长度
        markLineData[lengthIs2 ? index : 0][1].x -= 5.1
        return max - v.todayHaltCount * (max / v.haltCountMonthGoal)
    } else {
        // 未超过，不显示标记线
        markLineData.splice(lengthIs2 ? index : 0, 1)
    }
    return (v.monthHaltCount / v.haltCountMonthGoal) * max
})
option = {
    color: ['#5095f3', '#000f84', '#bbdaf7'],
    title: {
        text: '停机次数',
        textStyle: {
            fontFamily: 'PingFang SC Bold',
            fontSize: 30,
            fontWeight: 'lighter'
        },
        left: 12,
        top: 15
    },
    legend: {
        textStyle: {
            fontFamily: 'PingFang SC Regular',
            fontSize: 100 / 4
        },
        right: 15,
        top: 66 / 4,
        itemHeight: 96 / 4,
        itemWidth: 96 / 4,
        itemGap: 76 / 4,
        data: [{
                name: '日累计',
                icon: 'rect'
            },
            {
                name: '月累计',
                icon: 'rect'
            },
            {
                name: '月目标',
                icon: 'rect'
            }
        ]
    },
    grid: {
        top: 60,
        left: 15,
        right: 15,
        bottom: -10,
        containLabel: true
    },
    xAxis: {
        show: false,
        type: 'value',
        max: max
    },
    yAxis: {
        type: 'category',
        axisLabel: {
            show: false
        },
        data: data.map(v => v.name),
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        }
    },
    series: [{
            name: '月累计',
            type: 'bar',
            barWidth: 160 / 4,
            stack: 'count',
            label: {
                show: true,
                position: 'insideLeft',
                fontFamily: 'PingFang SC Regular',
                fontSize: 18,
                offset: [0, -40],
                color: '#333',
                formatter: params => {
                    return '{letter|' + params.name + '}组 月累计停机次数 ' +
                        '{number|' + (params.dataIndex === 0 ? a : b).monthHaltCount + '}次'
                },
                rich: {
                    letter: {
                        fontFamily: 'PingFang SC Regular',
                        color: '#333',
                        fontSize: 30,
                        verticalAlign: 'top'
                    },
                    number: {
                        fontFamily: 'PingFang SC Regular',
                        color: '#333',
                        fontSize: 30,
                        verticalAlign: 'top',
                        lineHeight: 36
                    }
                }
            },
            markLine: {
                symbol: 'none',
                lineStyle: {
                    type: 'solid'
                },
                silent: true,
                label: {
                    position: 'middle',
                    color: '#fff',
                    fontFamily: 'PingFang SC Regular',
                    fontSize: 18,
                    height: 30,
                    lineHeight: 40,
                    verticalAlign: 'middle',
                    formatter: params => {
                        const {
                            haltCountMonthGoal,
                            monthHaltCount
                        } = data[params.dataIndex]
                        const value = monthHaltCount - haltCountMonthGoal
                        if (value === 0) {
                            return '已触及月目标'
                        } else if (value > 0) {
                            return '已超出月目标停机次数{number|' + value + '}次'
                        }
                        return ''
                    },
                    rich: {
                        number: {
                            fontFamily: 'PingFang SC Regular',
                            fontSize: 27,
                            color: '#fff',
                            verticalAlign: 'middle',
                            lineHeight: 27
                        }
                    }
                },
                data: markLineData
            },
            data: monthCount
        },
        {
            name: '日累计',
            type: 'bar',
            barWidth: 160 / 4,
            barGap: '0%',
            stack: 'count',
            label: {
                normal: {
                    show: false,
                    position: 'top',
                    fontFamily: 'PingFang SC Regular',
                    fontSize: 120 / 4,
                    color: '#333'
                }
            },
            data: data.map(v => {
                return v.todayHaltCount * (max / v.haltCountMonthGoal)
            }),
            markPoint: {
                symbol: 'arrow',
                symbolSize: 15,
                symbolOffset: [0, 20],
                data: markPointData,
                label: {
                    show: false
                }
            }
        },
        {
            name: '月目标',
            type: 'bar',
            barWidth: 160 / 4,
            stack: 'count',
            label: {
                show: true,
                position: 'insideRight',
                offset: [0, -40],
                fontFamily: 'PingFang SC Regular',
                fontSize: 18,
                color: '#333',
                formatter: params => {
                    return '月目标停机次数 {number|' + (params.dataIndex === 0 ? a : b).haltCountMonthGoal + '}次'
                },
                rich: {
                    number: {
                        fontFamily: 'PingFang SC Regular',
                        color: '#333',
                        fontSize: 30,
                        verticalAlign: 'top',
                        lineHeight: 36
                    }
                }
            },
            data: data.map(v => {
                if (v.monthHaltCount >= v.haltCountMonthGoal) {
                    return 0
                }
                return max - (v.monthHaltCount / v.haltCountMonthGoal) * max - v.todayHaltCount * (max / v.haltCountMonthGoal)
            }),
            markPoint: {
                symbol: 'rect',
                symbolSize: [100, 30],
                symbolOffset: [0, 45],
                data: markPointRectData,
                itemStyle: {
                    color: '#000f84'
                },
                label: {
                    fontFamily: 'PingFang SC Regular',
                    fontSize: 15,
                    formatter: params => {
                        return '今日已停 ' + (params.dataIndex === 0 ? b : a).todayHaltCount + '次'
                    },
                    offset: [0, 0]
                }
            }
        }
    ]
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
