Skip to content

样例

简洁油表

贡献者:马佳辉

const data = {
    complete: 5,
    total: 15
}
const option = {
    title: {
        text: '问题整改',
        left: 40,
        top: '10%',
        textStyle: {
            color: 'white',
            fontSize: '18'
        }
    },
    tooltip: {
        formatter: `{a} {b}:  ${((data.complete / data.total) * 100).toFixed(1)}%`,
        position: 'left'
    },
    series: [
        {
            name: '问题整改完成率',
            type: 'gauge',
            center: ['50%', '60%'], // 左右 上下 仪表位置
            radius: '90%', // 仪表大小
            detail: { show: false, formatter: '{value}%' },
            data: [{ value: data.complete }],
            // startAngle: 210, // 仪表盘起始角度,默认 225。圆心正右手侧为0度,正上方为90度,正左手侧为180度。
            // endAngle: -30, // 仪表盘结束角度,默认 -45
            min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
            max: data.total, // 最大的数据值,默认 100 。映射到maxAngle。
            splitNumber: 2, // 仪表盘刻度的分割段数,默认 10。
            axisLine: {
                lineStyle: {
                    width: 10, // 这个是修改宽度的属性
                    color: [
                        [data.complete / data.total, '#00E87E'],
                        [1, 'rgb(91, 107, 113)']
                    ]
                }
            },
            axisTick: {
                splitNumber: 4, // 分隔线之间分割的刻度数,默认 5。
                length: 4, // 刻度线长。支持相对半径的百分比,默认 8。
                lineStyle: {
                    // 刻度线样式。
                    color: 'rgba(255,255,255,0.6)' // 线的颜色,默认#eee。
                }
            },
            axisLabel: {
                formatter(v) {
                    return v.toFixed(0)
                }
            },
            splitLine: {
                length: 20,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)'
                }
            },
            pointer: {
                length: '60%',
                width: 4
            }
        }
    ]
}
显示代码

fpi-component