zoukankan      html  css  js  c++  java
  • echarts 雷达图

     var evalateStaTableOption = {
            title: {
                // text: '基础雷达图'
            },
    
            tooltip : {
                trigger: 'radar'
            },
            color:['#ff6384','#95a5a6'],//这里需要和下面lineStyle的颜色设置一致了才行
            legend: {
                data: ['目标值', '实际值'],
                orient: 'vertical',
                right: '10%',
                top: '2%'
            },
            radar: {
                shape: 'circle',
                name: {
                    textStyle: {
                        color: '#000',
                        backgroundColor: '#f2f2f2',
                        borderRadius: 3,
                        padding: [3, 5] //文字的颜色
                   }
                },
                center:['50%','54%'],
                indicator: [
                   { name: '指数1', max: 2}, { name: '指数2', max: 1.5}, { name: '指数3', max: 1.5}, { name: '过率4', max: 1.5}, { name: '组率', max: 1.5}
                ],
                splitArea : {
                    show : false,
                    areaStyle : {
                        color: 'rgba(0,255,158,0)' // 图表背景的颜色
                    }
                },
                splitLine : {
                    show : true,
                    lineStyle : {
                        width : 1,
                        color : '#e6e6e6' // 设置网格的颜色
                    }
                },
                lineStyle:{
                    normal:{
                        color:'red'
                    }
                }
            },
            series: [{
                name: '目标值 vs实际值',
                type: 'radar',
    
                data : [
                    {
                        value : [1.5, 0.9, 1, 0.8, 0.8],
                        name : '目标值',
                        itemStyle: {
                            color:'#ff6384',
                            normal: {
                                lineStyle: {
                                     1,
                                    color: '#ff6384'
                                }
                            }
                        }
                    },
                    {
                        value : [1.3, 0.8, 0.9, 0.7, 0.9],
                        name : '实际值',
                        itemStyle: {
                            color:'#95a5a6',
                            normal: {
                                lineStyle: {
                                     1,
                                    color: '#95a5a6'
                                }
                            }
                        }
                    }
                ]
            }]
        };
  • 相关阅读:
    springboot springcloud zuul 过滤器
    springboot springcloud eureka 熔断器
    javaweb servlet filter
    maven nexus 搭建私服(二)
    springboot springcloud zuul 网关入门
    springboot springcloud 配置中心
    springboot springcloud eureka 入门
    java rabbitmq
    java jvm调优
    maven nexus 搭建私服(一)
  • 原文地址:https://www.cnblogs.com/slfmeimei/p/10723294.html
Copyright © 2011-2022 走看看