随手一记图表

let option = {
    series: [
        {
            name: '',
            type: 'gauge',
            splitNumber: 4, //刻度数量
            startAngle: 180, //开始角度 左侧角度
            endAngle: 0, //结束角度 右侧
            min: 0,
            max: 100,
            radius: '150%', //图表尺寸
            center: ['50%', '80%'],
            title: {
                show: true,
                offsetCenter: [0, 0], // x, y,单位px
                textStyle: {
                    color: '#000000',
                    fontSize: 12,
                },
            },
            detail: {
                show: true,
                offsetCenter: [0, -20],
                color: '#000000',
                fontSize: 14,
                formatter: '{value}%',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0,
                    shadowBlur: 0,
                    color: [
                        [0.75, '#3194f8'],
                        [1, '#ccc'],
                    ],
                },
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: 'auto',
                    width: 2,
                },
                length: 25,
                splitNumber: 6,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                show:false
            },
            data: [ //需要动态修改
                {
                    name: '资源占比',
                    value: 75,
                },
            ],
        },
        {   //内测小点
            name: '',
            type: 'gauge',
            splitNumber: 4,
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: '100%', //图表尺寸
            center: ['50%', '80%'],
            detail:{
                show:false
            },
            title:{
                show:false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0,
                    shadowBlur: 0,
                    color: [
                        [0.75, '#3194f8'],
                        [1, '#ccc'],
                    ],
                },
            },
            axisTick: {
                show: true,
                lineStyle: {
                    color: 'auto',
                    width: 1,
                },
                length: 1,
                splitNumber: 5,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                show:false
            },
            data: [75], //需要动态修改
        },
    ],
};

export default option;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值