echarts 饼状圆环图圆角

古城微笑少年丶 2023-07-24 02:11 55阅读 0赞

option = {
        title: {
    	text: '75%',
    	textStyle: {
    		color: '#48FFFF',
    		fontSize: 12
    	},
    	left: 'center',
    	top: 'center'
    },
    angleAxis: {
    	max: 100, // 满分
    	clockwise: false, // 逆时针
        // 隐藏刻度线
    	axisLine: {
    		show: false
    	},
    	axisTick: {
    		show: false
    	},
    	axisLabel: {
    		show: false
    	},
    	splitLine: {
    		show: false
    	}
    },
    radiusAxis: {
    	type: 'category',
        // 隐藏刻度线
    	axisLine: {
    		show: false
        },
        axisTick: {
    		show: false
        },
        axisLabel: {
    		show: false
        },
        splitLine: {
    		show: false
        }
      },
    polar: {
    	center: ['50%', '50%'],
    	radius: '140%' //图形大小
    },
    series: [{
    	type: 'bar',
        data: [{
    		name: '作文得分',
    		value: 70,
    		itemStyle: {
    			normal: {
    				color: { // 完成的圆环的颜色
                        colorStops: [{
                            offset: 0,
                            color: '#48FFFF' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#48FFFF' // 100% 处的颜色
                        }]
                    }
    			}
    		},
        }],
    	coordinateSystem: 'polar',
    	roundCap: true,
    	barWidth: 25,
    	barGap: '-100%', // 两环重叠
    	radius: ['49%', '52%'],
    	z: 2,
    },{ // 灰色环
        type: 'bar',
        data: [{
    		value: 100,
    		itemStyle: {
    			color: '#3B4068',
    		}
        }],
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 30,
        barGap: '-110%', // 两环重叠
        radius: ['48%', '53%'],
        z: 1
      }]
    
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jic3lp_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jic3lp_size_16_color_FFFFFF_t_70]: /images/20230528/f1d549302b0744fb8fab210638c3af4b.png