echarts仪表盘

echarts 仪表盘

let option = {
            title: {
                show: true,
                text: 'Single SKU Small Items',
                textStyle: {
                    height: 26,
                    lineHeight: 26,
                    fontWeight: 'bold',
                    fontSize: 18,
                    color: "#ffffff",

                },
                left: 'center',
                top: 25
            },
            series: [{
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    max:  500,
                    radius: '50',
                    center: ['50%', 158],
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                            borderWidth: 0
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 20,
                            color: [
                                [1, '#253f51']
                            ]
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    data: [{
                        value: 320,
                        name: 'remaining',
                        itemStyle: {
                            color: '#02DEF9' 
                        },
                        detail: {
                            valueAnimation: true,
                            offsetCenter: [-65, 128]
                        },
                        title: {
                            offsetCenter: [-65, 156],
                            color: "#fff"
                        }
                    }],
                    title: {
                        fontSize: 12
                    },
                    detail: {
                        width: 92,
                        lineHeight: 26,
                        fontWeight: 'bold',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 30,
                        color: 'auto',
                        formatter: '{value}',

                    }
                },
                {
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    max:  500,
                    radius: '85',
                    center: ['50%', 158],
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                            borderWidth: 0
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 20,
                            color: [
                                [1, '#3a383d']
                            ]
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    data: [{
                            value: 180,
                            name: 'printed',
                            itemStyle: {
                                color: '#FF8700'
                            },
                            detail: {
                                valueAnimation: true,
                                offsetCenter: [58, 128]
                            },
                            title: {
                                offsetCenter: [58, 156],
                                color: "#fff"
                            }
                        },

                    ],
                    title: {
                        fontSize: 12
                    },
                    detail: {
                        width: 92,
                        // height: 26,
                        lineHeight: 26,
                        fontWeight: 'bold',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 30,
                        color: 'auto',
                        formatter: '{value}',

                    }
                }
            ]
        };