• 关于echarts生成雷达图的一些参数介绍


    export const industryFactorOption = {
        title: {
            text: '雷达图',
            textStyle: {
                color: 'rgba(221,221,221,1)', //标题颜色
                fontSize: 14,
                lineHeight: 20,
            },
            // 标题的位置,此时放在图的底边
            left: 'center',
            top: 'bottom',
        },
        // 图表的位置
        grid: {
            position: 'center',
         },
         tooltip : {
         //雷达图的tooltip不会超出div,也可以设置position属性,position定位的tooltip 不会随着鼠标移动而位置变化,不友好
            confine: true,
            enterable: true, //鼠标是否可以移动到tooltip区域内
         },
        radar: {
            shape: 'circle',
            splitNumber: 3, // 雷达图圈数设置
            name: {
                textStyle: {
                    color: '#838D9E',
                },
            },
            // 设置雷达图中间射线的颜色
            axisLine: {
                lineStyle: {
                    color: 'rgba(131,141,158,.1)',
                    },
            },
            indicator: [{
                name: '通信', max: 30,
                //若将此属性放在radar下,则每条indicator都会显示圈上的数值,放在这儿,只在通信这条indicator上显示
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    color: '#838D9E',
                    showMaxLabel: false, //不显示最大值,即外圈不显示数字30
                    showMinLabel: true, //显示最小数字,即中心点显示0
                },
            },
            { name: '零售', max: 30},
            { name: '电力', max: 30},
            { name: '交通', max: 30},
            { name: '食品', max: 30},
            { name: '建筑', max: 30},
            { name: '银行', max: 30},
            { name: '汽车', max: 30},
            { name: '电子工程', max: 30},
            ],
            //雷达图背景的颜色,在这儿随便设置了一个颜色,完全不透明度为0,就实现了透明背景
            splitArea : {
                show : false,
                areaStyle : {
                    color: 'rgba(255,0,0,0)', // 图表背景的颜色
                },
            },
            splitLine : {
                show : true,
                lineStyle : {
                    width : 1,
                    color : 'rgba(131,141,158,.1)', // 设置网格的颜色
                },
            },
        },
        series: [{
            name: '雷达图', // tooltip中的标题
            type: 'radar', //表示是雷达图
            symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等
            symbolSize: 8, // 拐点的大小
    
            areaStyle: {
                normal: {
                     1,
                    opacity: 0.2,
                },
            },
            data: [
                {
                    value: [17, 24, 27, 29, 26, 16, 13, 17, 25],
                    name: '2018-07',
                    // 设置区域边框和区域的颜色
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,225,0,.3)',
                            lineStyle: {
                                color: 'rgba(255,225,0,.3)',
                            },
                        },
                    },
                    //在拐点处显示数值
                    label: {
                        normal: {
                            show: true,
                            formatter: (params: any) => {
                                return params.value
                            },
                        },
                    },
                },
                {
                    value: [5, 20, 19, 11, 22, 17, 8, 19, 16],
                    name: '',
                     itemStyle: {
                        normal: {
                            color: 'rgba(60,135,213,.3)',
                            lineStyle: {
                                 1,
                                color: 'rgba(60,135,213,.3)',
                            },
                        },
                    },
                },
                 {
                    value: [7, 18, 19, 13, 22, 17, 8, 25, 9],
                    name: '',
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,74,74,.3)',
                            lineStyle: {
                                 1,
                                color: 'rgba(255,74,74,.3)',
                            },
                        },
                    },
                },
            ],
        }],
    }
    --------------------- 
    原文:https://blog.csdn.net/csdn_zsdf/article/details/81366738 
    

      

  • 相关阅读:
    oracle 将以逗号分隔的列拆成多行的的方法
    Oracle 如何循环查询结果集,进行新增或修改
    CSS 属性 伪类和伪元素的区别
    正则应用—queryURLParameter()
    老式浏览器兼容HTML5和CSS3的问题
    CSS3 常用新特性总结
    移动web资源整理
    移动webApp 1像素实现(点5像素的秘密)
    Git常用命令总结
    undefined与null的区别
  • 原文地址:https://www.cnblogs.com/lijianli/p/9847771.html
Copyright © 2020-2023  润新知