【Echarts】雷达图常见的option属性参数

最新推荐文章于 2024-01-08 17:13:47 发布

骑着蜗牛ひ追导弹'

最新推荐文章于 2024-01-08 17:13:47 发布

阅读量779

点赞数

分类专栏： # Flask&Echart可视化文章标签： echarts

本文链接：https://blog.csdn.net/qq_45797116/article/details/115065435

版权

Flask&Echart可视化专栏收录该内容

39 篇文章 8 订阅

订阅专栏

雷达图常见的option属性参数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height:100%">
<div style="height:100%" id="container"></div>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    var budget = [{% for item in sheets %}{{ item.budget }},{% endfor %}];
    var actual = [{% for item in sheets %}{{ item.actual }},{% endfor %}];

    var option = null;
    option = {
        title:{
           text:"雷达图"
        },
        tooltip:{
           show:true
        },
        legend:{
           show:true
        },
        radar:[
           {
              name:{                 // 雷达图每个指示器名称的配置项。
                  textStyle: {       // 文本样式
                       color: '#fff',
                       backgroundColor: '#999',
                       borderRadius: 3,
                       padding: [3, 5]
                  }
              },
              indicator:[            // 指示器：显示类型及其本轴的最大值
                  {name:'销售',max:6500},
                  {name:'管理',max:16000},
                  {name:'信息技术',max:65000},
                  {name:'客服',max:38000},
                  {name:'研发',max:52000},
                  {name:'市场',max:25000},
              ],
              center: ['50%', '50%'],// 设置位置
              radius: 300,           // 半径大小
              startAngle: 0,         // 开始时的角度
              splitNumber: 5,        // 指示器轴的分割段数。
              shape: 'polygon',      // 雷达图绘制类型，支持 'polygon' 和 'circle'。
              axisLine: {            // 轴线
                 lineStyle: {
                    color: 'rgba(0, 0, 0, 0.4)'
                 }
              },
              splitLine: {           // 分割线
                 lineStyle: {
                    color: 'rgba(0, 0, 0, 0.4)'
                 }
              }
           }
        ],
        series:[
           {
               name:'预算 vs 开销（Budget vs spending）',
               type:'radar',
               areaStyle:{},         // 填充
               data:[                // 数组形式：每一份不同数据为一组
                  {
                     name:'预算分配',
                     value:budget,
                     emphasis: {     // 高亮状态的配置。
                        lineStyle: {
                            width: 4
                        }
                     },
                  },{
                     name:'实际开销',
                     value:actual,
                     emphasis: {
                        lineStyle: {
                            width: 4
                        }
                     }
                  }
               ]
           }
        ]
    };

    if (option && typeof option == "object"){
       myChart.setOption(option);
    }
</script>
</body>
</html>