echar生成雷达图

Posted 2020-09-28 小猪冒泡

 function createRadarChart(indicatorData, personData) {
        var myChart = echarts.init(document.getElementById(‘fl2Grid‘));

        var option = {
            legend: {//图例设置
                data: [{ name: personData[0].name, icon: ‘rect‘ }, { name: personData[1].name, icon: ‘rect‘ }],//名字和图形
                left: 0,
                itemGap: 30,
                itemWidth: 14
            },
            radar: {//雷达图形设置
                name: {
                    textStyle: {
                        color: ‘#333333‘
                    }
                },
                indicator: indicatorData,//雷达数据最大值
                splitArea: {
                    show: false //是否显示隔断色
                },
                splitLine: {
                    lineStyle: {
                        color: [‘#D1D1D1‘]//雷达的线条色
                    }
                }
            },
            series: [{
                type: ‘radar‘,
                data: [{
                    value: personData[0].value,//第一个数据线条
                    name: personData[0].name,
                    lineStyle: {
                        normal: {
                            color: ‘#e4b2b2‘
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: ‘#E4B2B2‘
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: ‘rgba(255,47,47,.3)‘
                        }
                    }
                }, {
                    value: personData[1].value,//第二个数据线条
                    name: personData[1].name,
                    itemStyle: {
                        normal: {
                            color: ‘#FF5758‘
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: ‘#FFD52F‘
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: ‘rgba(255,204,51,.5)‘
                        }
                    }
                }]
            }]
        };;
        myChart.setOption(option);
    }
    //生成雷达图
    var indicatorData = [//雷达图最大值设置
        { name: ‘客户向导‘, max: 10 },
        { name: ‘信任协作‘, max: 10 },
        { name: ‘鼓励创新‘, max: 10 },
        { name: ‘高效执行‘, max: 10 },
        { name: ‘战略选择‘, max: 10 },
        { name: ‘精细管理‘, max: 10 },
        { name: ‘成就团队‘, max: 10 },
        { name: ‘专 业 力‘, max: 10 },
        { name: ‘学习敏锐度‘, max: 10 },
        { name: ‘客户向导‘, max: 10 }
    ];
    //具体的雷达图数据
    var personData = [{ name: ‘王二三‘, value: [2.7, 5.2, 3.3, 7.8, 3.5, 6.5, 6.6, 3.4, 7.9, 4.8] }, { name: ‘平均‘, value: [3.7, 4.2, 6.3, 6.8, 3.2, 8.5, 7.6, 8.4, 5.9, 4.8] }];

    createRadarChart(indicatorData, personData);//执行函数