• 雷达图


    debugger;
    option = {
     title: {
            text: '* 该评估数据均为根据有企画独家算法引擎根据企业数据生成,仅供参考',
            left:'left',
            top:'bottom',
            textStyle:{
                fontSize:'12',
                color:'#CCCCCC',
                fontWeight:'none'
            }
        },
        tooltip: { // 提示框
        confine: true,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
          color: "#fff",
          fontSize: 14,
          lineHeight: 10
        },
        padding: 10,
        borderWidth: 1,
       // borderColor: "e1e3ec",
        axisPointer: {
          drossStyle: {
            color: "#999"
          }
        },
        extraCssText: "box-shadow: 0 0 0.05rem 0 rgba(0, 0, 0, 0.1)" // 自定义属性
      },
       
        //分割区域边框颜色
        color:'#f2f4fa',
       //鼠标滑过展示数据
       // tooltip:{},
        radar: {
            //shape: 'circle',
            splitNumber: 5, // 雷达图圈数设置
            //五个角落标识文字颜色
            name: {
                textStyle: {
                    color: '#000000',
                }
            },
             axisLine:{
                  lineStyle: {
                    color: 'rgba(131,141,158,.1)',
                    },
                 //不显示线条
                 //show:false
             },
             
             //刻度线_版本不支持
            /*axisLabel:{
                show:'true'
              },*/
              
             //分割线颜色
            splitLine : {
                show : true,
                lineStyle : {
                    width : 1,
                    color : '#1d70b8'
                }
            },
            //分割区域颜色
            splitArea : {
                show : true,   
                areaStyle : {
                    color:'#f2f4fa' 
                }
            },
            //max:设置各个角的最大值,根据实际情况调整
           indicator: [
               /*{
                name: '失信执行人', max: 50000,
                //若将此属性放在radar下,则每条indicator都会显示圈上的数值,放在这儿,只在通信这条indicator上显示
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    color: '#838D9E',
                    showMaxLabel:  true, //不显示最大值,即外圈不显示数字30
                    showMinLabel: true, //显示最小数字,即中心点显示0
                },
            },*/
                { name: '失信被执行人', max:50000},
                { name: '执行案件', max: 50000},
                { name: '经营异常', max: 50000},
                { name: '行政处罚', max: 50000},
                { name: '关联人风险', max: 50000} 
               /* { name: '失信被执行人', max: !<{"Code":"v1","DisplayName":"最大值1","Type":"Value"}>!},
                { name: '执行案件', max: !<{"Code":"v2","DisplayName":"最大值2","Type":"Value"}>!},
                { name: '经营异常', max: !<{"Code":"v3","DisplayName":"最大值3","Type":"Value"}>!},
                { name: '行政处罚', max: !<{"Code":"v4","DisplayName":"最大值4","Type":"Value"}>!},
                { name: '关联人风险', max: !<{"Code":"v5","DisplayName":"最大值5","Type":"Value"}>!} */
            ]
             
    
        },
        series: [{
            type: 'radar',
            symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等
            symbolSize: 2,// 拐点的大小
            //图表中图区域的颜色
             itemStyle: {
                 borderWidth:0,
                normal: {
                    
                    areaStyle: {
                        opacity: 0.5,// 
                        color:'#7b98cc' // 图表中图区域的颜色
                    }
                }
            },
            
     /*      data: [
                {   //tooltip上方名称显示
                    //name:'信用风险雷达',
                    value: [43000, 30000, 28000, 35000, 50000, 19000]
                }
            ] */
            //真实数据展现
         data: [
                 { 
                     name:'信用风险雷达',
                     value:[43000, 30000, 28000, 35000, 50000, 19000],
                     //value:!<{"Code":"Data","DisplayName":"图区域数据","Type":"Arr1"}>!,
                    symbol: 'circle',
                    symbolSize: 1,
                    label: { // 单个拐点文本的样式设置 
                    normal: {
                        show: true,
                        // 单个拐点文本的样式设置。[ default: false ]
                        position: 'top',
                        // 标签的位置。[ default: top ]
                        distance: 5,
                        // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。[ default: 5 ]
                        color: 'rgba(0,0,0,128)',
                        // 文字的颜色。如果设置为 'auto',则为视觉映射得到的颜色,如系列色。[ default: "#fff" ]
                        fontSize: 14,
                        // 文字的字体大小
                        formatter: function(params) {
                            return params.value;
                        }
                    }
                },
                itemStyle: { // 单个拐点标志的样式设置。
                    normal: {
                        borderColor: 'rgba(51,0,255,1)',
                        // 拐点的描边颜色。[ default: '#000' ]
                        borderWidth:  1 ,
                        // 拐点的描边宽度,默认不描边。[ default: 0 ]
                    }
                },
                lineStyle: { // 单项线条样式。
                    normal: {
                        opacity: 0.5 // 图形透明度
                    }
                },
                 }
                    ]
        }]
    };
  • 相关阅读:
    js实现深拷贝的5种方式
    react中Context的使用
    react中link参数传递以及url乱码解决
    js中forEach结束循环
    javaScript函数和方法的区别
    将逻辑运算字符串转化为逻辑运算进行运算
    redux的使用流程
    react类型检查
    for..in,for..of 和forEach的区别
    JavaScript基础知识(JSON、Function对象、原型、引用类型)
  • 原文地址:https://www.cnblogs.com/smile502/p/13469831.html
Copyright © 2020-2023  润新知