带刻度的雷达图

import React, { Component } from 'react';
import EchartBase from 'components/common/echarts/base/EchartBase';
import echarts from 'echarts';
import styles from './radar.scss';// 样式
import cns from 'classnames';
export default class Radar extends Component {
    constructor(props){
        super(props);
        this.state = {
            data: {
                indicator: [
                    { name: 'AA级', max: 100},
                    { name: 'A级', max: 100},
                    { name: 'B级', max: 100},
                    { name: 'C级', max: 100},
                    { name: 'D级', max: 100}
                ],
                value: [78, 75, 96, 54, 68]
            } 
        };
    }
    render() {
        const {data, data: {indicator, value}} = this.state;
        let num = Array.isArray(value) ? value.reduce((pre, cur)=>pre + cur) : 0;
        // console.log('num', ((4300 / num).toFixed(4) * 100).toFixed(2));
        return <div style={{width: '100%', height: '100%'  }} className={cns(styles.topCity)} >
                  
                    <div style={{width: '63%', height: '100%'  }} className={cns(styles.charts, 'foatL')}  >
                        <EchartBase option={setOption(data)}  />
                    </div>
                    <div style={{width: '36%', height: '90%'  }} className={cns(styles.probox, 'foatL')}   >
                       {
                            indicator.map(
                                (p, index)=><div className={cns(styles.value)} >
                                    <div className={cns(styles.line)}>{p.name}企业数量:<span>{value[index]}</span></div>
                                    <div className={cns(styles.line)}>{p.name}企业占比:<span>{((value[index] / num).toFixed(4) * 100).toFixed(2)}%</span></div>
                                    </div>
                            )
                       }
                    </div>
               </div>;
        
    }
}
const setOption = (data) => {
    return {
        tooltip: {},
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            center: ['50%', '40%'], // zuo shang
            shape: 'circle',
            radius: '70%',
            startAngle: 130,
            indicator: data.indicator,
            splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: true,
                areaStyle: { // 分隔区域的样式设置。
                    color: '#01134C' // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                }
            },
            axisLine: { // 指向外圈文本的分隔线样式
                lineStyle: {
                    color: '#0090FF'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#0090FF', // 分隔线颜色
                    width: 1 // 分隔线线宽
                }
            }
        },
        polar: {
            center: ['50%', '40%'],
            radius: '70%'

        },
        angleAxis: {
            min: 0,
            max: 360,
            interval: 5,
            clockwise: false,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        radiusAxis: {
            min: 0,
            max: 100,
            // interval: 10,
            splitArea: {
                show: false
            },
            nameTextStyle: {
                color: '#fff'
            },
            axisTick: {
                show: true,
                inside: true,
                lineStyle: {
                    color: '#fff',
                    fontSize: 12
                } 
               
            },
            axisLine: {     
                lineStyle: {
                    color: '#0940D9'   // 坐标轴线
                }
            },
            axisLabel: {
                color: '#fff'   // 刻度标签文字的颜色
            }
        },
        series: [{
            type: 'radar',
            data: [{
                value: data.value,
                name: '信用评价等级分布'
            }],
            areaStyle: {
                normal: {
                    color: 'rgba(255,218,43,0.5)'
                }
            },
            lineStyle: {
                normal: {
                    // type: 'dashed',
                    color: 'rgba(255,218,43, 1)',
                    width: 2
                }
            },
            itemStyle: {
                normal: {
                    color: '#FFDA2B'
                }
            }
        }]
    };
};

image.png

把polar图和radar图合并，显示刻度