echarts极坐标图

    getChartPie = (data) => {
        let legendData = ['欺诈风险', '违约风险', '违法风险', '违规风险'];
        let option = {
            backgroundColor: 'transparent',
            grid: {
                top: 40,
                left: 10,
                right: 10,
                bottom: 0,
                containLabel: true
            },      //图形的位置
            tooltip: {
                show: true,
                backgroundColor: 'rgba(0,0,0, 0)',
                textStyle: {
                    color: '#666',
                    fontWeight: 'bold'
                },
                formatter: function (v) {
                    return `<div class="screenTooltip riskMap"><div class="content">${v.name}：<span style='color: #00BAFF'>${thousands(v.value)}</span></div></div>`;
                }
            },
            angleAxis: {
                splitNumber: 12, // 坐标轴分割段数
                min: 0,
                max: 100,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0, 219, 255, 0.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 219, 255, 0.2)'
                    }
                },
                axisLabel: {
                    fontSize: 12,
                    color: '#fff',
                    fontFamily: 'Microsoft YaHei'
                },
                
                axisTick: {
                    show: false
                }
            },
            radiusAxis: {
                type: 'category',
                data: legendData,
                z: 10,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0, 219, 255, 0.2)'
                    }
                },
                
                axisLabel: {
                    show: false,
                    textStyle: {
                        fontSize: 12,
                        interval: 0,
                        color: '#fff',
                        fontFamily: 'Microsoft YaHei'
                    }
                }
            },
            polar: {
                center: ['50%', '51%'],    //图中心点的位置
                radius: ['0%', '74%']         //图的半径，跟饼图的一样的配置
            },
            series: [{
                type: 'bar',
                data: data,
                coordinateSystem: 'polar',
                name: 'A',
                stack: 'a',
                itemStyle: {
                    normal: {
                        barBorderRadius: 80,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                            offset: 0, color: '#023059'
                        },
                        {
                            offset: 1, color: '#00D7FB'
                        }], false)
                        // 'rgba(0,219,255,0.5)'
                    }
                }
            }],
            legend: {
                show: false,
                data: []
            }
        };
        this.setState({ pieOption: option, loading: false });
    }

    data格式：     let data = [1200, 1000, 300, 800];

image.png