雷达图总集echarts radar配置项内容和展示

      var plagpath = 'path://M54.227,12.611c-0.338-0.336-0.736-0.505-1.196-0.505c-0.229,0-0.712,0.188-1.446,0.559  c-0.735,0.372-1.515,0.786-2.336,1.248c-0.823,0.459-1.797,0.875-2.921,1.247c-1.123,0.371-2.163,0.559-3.12,0.559  c-0.884,0-1.664-0.168-2.336-0.505c-2.229-1.044-4.168-1.823-5.814-2.337c-1.646-0.513-3.416-0.771-5.311-0.771  c-3.272,0-6.999,1.064-11.177,3.188c-0.862,0.43-1.48,0.763-1.88,1.007l-0.397-2.911c0.897-0.779,1.476-1.914,1.476-3.195  c0-2.347-1.902-4.249-4.249-4.249c-2.347,0-4.249,1.902-4.249,4.249c0,1.531,0.818,2.862,2.032,3.61l5.74,42.09  c0.171,1.253,1.243,2.162,2.474,2.162c0.112,0,0.226-0.007,0.341-0.022c1.368-0.188,2.326-1.447,2.139-2.815L19.69,38.303  c4.186-2.077,7.807-3.124,10.853-3.124c1.293,0,2.554,0.193,3.783,0.583c1.23,0.391,2.253,0.815,3.067,1.274  c0.814,0.46,1.775,0.886,2.88,1.274c1.107,0.39,2.2,0.585,3.279,0.585c2.726,0,5.991-1.027,9.796-3.08  c0.478-0.248,0.828-0.492,1.049-0.731c0.221-0.239,0.332-0.579,0.332-1.021V13.806C54.729,13.347,54.562,12.948,54.227,12.611z';
var fjpath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

//中间的
var indicators = [{
    name: '项目一', //指示器名称。
    min: 70,
    max: 95
}, {
    name: '项目二',
    min: 70,
    max: 88
}, {
    name: '项目三',
    min: 70,
    max: 89
}, {
    name: '项目四',
    min: 70,
    max: 97
}, {
    name: '项目五',
    min: 70,
    max: 90
}];
var series = [{
    name: 'red vs green', //系列名称
    type: 'radar',
    symbol: plagpath, //标记的图形。roundRect实心，arrow箭头,rect正方形
    symbolSize: 15, //标记的大小,[10,20] ，width10,height20
    symbolRotate: 50, //标记的旋转角度
    symbolOffset: [0, '50%'],
    label: {
        normal: {
            show: true,
            textStyle: {
                color: '#f00',
            },
            //formatter: '{b}: {c}'
        }
    },
    lineStyle: {
        normal: {
            //线的颜色,支持径向渐变，线性渐变，纹理填充，RGB等
            //线性渐变
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'red'
                }, // 0% 处的颜色
                {
                    offset: 1,
                    color: 'blue'
                } // 100% 处的颜色
            ], false),
            width: 2,

        }
    },
    areaStyle: { //区域填充样式
        normal: {
            // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
                    offset: 0,
                    color: 'pink'
                }, // 0% 处的颜色
                {
                    offset: 1,
                    color: 'green'
                } // 100% 处的颜色
            ], false)
        }
    },
    data: [ //雷达图的数据是多变量（维度）的
        {
            value: [87, 83, 78, 80, 75],
            name: 'red', //数据项名称
            symbol: fjpath, //单个数据标记的图形。
        }, {
            value: [87, 80, 84, 80, 80],
            name: 'green'
        }
    ]
}];
var strarr = [];

option = {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    title: { //标题组件，包含主标题和副标题。
        text: '雷达图',
        left: 'center', //居中
        padding: [10, 20],
        backgroundColor: '#ddd',
        textStyle: {
            color: '#fff',
            fontSize: 29,
            fontWeight: 'bold'
        },
        borderColor: '#ff0',
        borderWidth: 2,
    },
    tooltip: { //提示框组件
        trigger: 'item',
        backgroundColor: 'rgba(0,0,250,0.2)',
        // formatter:function(params){

        // },
        formatter: '{b0}: {c0}<br />{b1}: {c1}'
    },
    radar: {
        center: ['50%', '60%'], //中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
        radius: '70%', //半经，相对于容器高宽中
        triggerEvent: true, //坐标轴的标签是否响应和触发鼠标事件
        name: { //雷达图每个指示器名称的配置项。
            show: true,
            formatter: function(value, indicator) {
                return value;
            },
            // formatter: '【{value}】',
            textStyle: {
                color: '#000',
                fontWeight: 'bold',
                fontSize: 12
            }
        },
        splitNumber: 4, //指示器轴的分割段数。
        splitArea: { //分隔区域，背景色、
            areaStyle: {
                color: ['#fff', '#ff0', '#f00', '#000']
            }
        },
        splitLine: { // 区域中的分隔线,环状
            lineStyle: {
                color: '#ddd',
                width: 3,
                type: 'dotted'
            }
        },
        axisLabel: { //坐标轴刻度标签
            show: true,
            textStyle: {
                color: '#dd0'
            },
            formatter: function(value, index) {
                if (!strarr[index] == value || strarr[index] == undefined) {
                    strarr.push(value);
                    str = value
                } else {
                    str = " "
                }
                return str;
            }
        },
        axisLine: { //坐标轴轴线的颜色线 
            lineStyle: {
                color: '#ccc',
                width: 2,
                type: 'dashed',
                opacity: 0.5
            }
        },
        indicator: indicators, //雷达图的指示器，用来指定雷达图中的多个变量（维度）
    },
    series: series
};