极坐标图

    getPolarOption = (data) => {
        const colors = ['#E15123', '#F19F25', '#35B2A5', '#E15123', '#C83737'];
        return {
            tooltip: {
                backgroundColor: 'transparent',
                trigger: 'item',
                formatter: (params) => {
                    return `<div class="chartTooltip">${params.name}：${thousands(Math.round(params.value))}家</div>`;
                }
            },
            angleAxis: {
                splitNumber: 12, // 坐标轴分割段数
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#E5E5E5',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    interval: 0,         //设置为0 ，lable 全部显示
                    show: true,
                    color: '#333',
                    fontSize: 12
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#E5E5E5'
                    }
                }
            },
            radiusAxis: {
                type: 'category',
                data: data.map(item => item.key),
                z: 100,
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#D8D8D8'
                    }
                },
                axisLabel: {
                    show: true,
                    color: '#333',
                    fontSize: 12,
                    interval: 0      //设置为0 ，lable 全部显示
                }
            },
            polar: {
                center: ['50%', '51%'],
                radius: '88%'
            },
            series: [{
                type: 'bar',
                z: 10,
                data: data.map((item, index) => {
                    return {
                        value: item.value,
                        itemStyle: {
                            normal: {
                                color: colors[index]
                            }
                        }
                    };
                }),
                label: {
                    normal: {
                        show: true
                    }
                },
                stack: 'a',
                coordinateSystem: 'polar'
            }]
        };
    }

image.png