饼图 自适应宽高

我将以圆环图作为例子

image.png

思路

1. 外层包裹一个div(明确宽高的div)

<div id="chart-ranking" class="rangking"></div>

.rangking {
     width: 100%;
     height: 5.5rem;
     margin: 0 auto;
}

2.将设置饼图的半径设置成为百分比

radius: '140%',

3.可以将圆环的的宽度设置成百分比

barWidth: '8%',

完整代码

this.pieChart.setOption({
                    title: {
                        text: '78',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#fff',
                            fontSize: '50',
                        },

                    },
                    color: ['#282c40'],
                    backgroundColor: 'rgba(255, 255, 255, 0)',
                    angleAxis: {
                        max: 100,
                        show: false
                    },
                    radiusAxis: {
                        type: "category",
                        show: true,
                        axisLabel: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    polar: {
                        radius: '140%',
                        center: ["50%", "50%"]
                    },
                    series: [
                        {
                            type: "bar",
                            roundCap: true,
                            barWidth: '8%',
                            showBackground: true,
                            backgroundStyle: {
                                color: "#5A318B"
                            },
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#934AE0" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#E02C89" // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            },
                            data: [82],//在这里更改数值，其他地方不要动
                            coordinateSystem: "polar",
                            label: {
                                show: false
                            }
                        }
                    ],
                    },
                    ]
                })