占比echarts 柱状配置项内容和展示

83 %

      const percent = 83; // 数值

option = {
    backgroundColor: 'rgba(8, 17, 67, 0.9)',
    title: {
        text: '占比',
        left: 'center',
        top: '45%',
        textStyle: {
            color: 'rgba(31, 196, 225, 0.6)',
            fontSize: 26,
        },
        subtext: `${percent} %`,
        subtextStyle: {
            color: 'rgba(31, 196, 225, 0.6)',
            fontSize: 28,
        },
    },
    polar: {
        radius: ['50%', '60%'],
        center: ['50%', '50%'],
    },
    // 极坐标角度轴
    angleAxis: {
        min: 0,
        max: 100,
        startAngle: 270 - (360 * (100 - percent)/ 100 / 2),
        show: false, // 隐藏刻度线
    },
    // 极坐标径向轴
    radiusAxis: {
        type: 'category',
        // 隐藏极坐标轴线
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
    },
    tooltip: {
        show: true,
        formatter: (val) => {
            return `${val.seriesName}: ${val.data}%`;
        },
        backgroundColor: 'rgba(31, 196, 225, 0.2)',
        borderColor: 'rgba(31, 196, 225, 0.6)',
    },
    series: [
        {
            // 进度条
            type: 'bar',
            name: '占比',
            coordinateSystem: 'polar',
            // 设置柱子背景灰色，需开启showBackground才能显示backgroundStyle
            showBackground: true,
            backgroundStyle: {
                // color: 'rgba(14, 61, 128,0.3)',
                color: 'rgba(255,255,255, 0.15)',
            },
            // 两端设置圆角
            roundCap: true,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x1: 0,
                    y1: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(190, 235, 255,0.65)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,0,255,1)',
                        },
                    ],
                },
            },
            data: [percent],
        },
    ],
};