zoukankan      html  css  js  c++  java
  • echar生成雷达图

     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);//执行函数
  • 相关阅读:
    Linux上的SQL Server的起步
    SQL Server 2016 SP1 标准版等同企业版?!
    为什么简单恢复模式模式真的是坏主意?
    在SQL Serve里停用行和页层级锁
    SQL Server里的闩锁耦合(Latch Coupling)
    我有几个NUMA节点
    SQL Server里在文件组间如何移动数据?
    对于SQL Server,我需要多少内存
    SQL Server里的文件和文件组
    重启SQL Server——总是好事?
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/7204551.html
Copyright © 2011-2022 走看看