{num|76%}echarts 饼配置项内容和展示

违章比

      var data = {
    value: 76,
    name: '违章比'
};
option = {
    backgroundColor: '#0B2C6F',
    title: {
        text: '{num|' + data.value + '%}',
        subtext: '\n' + data.name,
        x: '49%',
        y: '49%',
        textAlign: 'center',
        textStyle: {
            rich: {
                num: {
                    fontWeight: '500',
                    color: '#00E4FF',
                    fontFamily: '微软雅黑',
                    fontSize: 75,
                },
            }

        },
        subtextStyle: {
            lineHeight: 30,
            fontSize: 40,
            color: '#fff',

        }
    },
    data: [{
        name: data.name,
    }],
    series: [{ // 主圆环
        name: data.name,
        type: 'pie',
        radius: ['65%', '80%'],
        center:['50%','60%'],
        startAngle: 180,
        endAngle: 0,

        color: [{
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [{
                offset: 0,
                color: 'rgba(45,246,242,.1)' // 0% 处的颜色
            }, {
                offset: 1,
                color: 'rgba(45,246,242,1)' // 100% 处的颜色
            }]
        }, 'transparent'],
        hoverAnimation: true,
        legendHoverLink: false,
        z: 10,
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            value: 50 * data.value / 100
        }, {
            value: 100 - (50 * data.value / 100)
        }]
    }, { // 中间圈
        name: '',
        z: 5,
        type: 'pie',
        cursor: 'default',
        radius: ['95%', '95%'],
        center:['50%','60%'],
        startAngle: 180,
        hoverAnimation: false,
        legendHoverLink: false,
        labelLine: {
            normal: {
                show: false
            }
        },

        data: [{
            value: 50,
            itemStyle: {
                borderColor: '#2DF6F3',
                borderType: 'dashed',
                borderWidth: 2,
            }
        }, {
            value: 50,
            itemStyle: {
                color: 'transparent'
            }
        }]
    }]
};