echarts 雷达图

最新推荐文章于 2025-02-23 11:54:36 发布

原创最新推荐文章于 2025-02-23 11:54:36 发布 · 537 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>雷达图例子</title>
       <script src="js/echarts-all.js"></script>
   </head>
   <style>
       #lei {
           width: 500px;
           height: 500px;

       }
   </style>

   <body>
       <div id="lei"></div>
       <script>
           var option = {
               color: ["#379EFC", "#3ECDC3"],
               title: {
                   text: '雷达图例子',
                   subtext: '纯属虚构'
               },
               tooltip: {
                   trigger: 'axis',
                   formatter:function(parms){//改变悬浮框内容
                   console.log(parms)

                       var str="";
                       str+="<div style='text-align: center;'>"+parms[0].indicator+"</div>"
                       for(var i=0;i<parms.length;i++){
                           str+="<div>"+parms[i].name+"/"+parms[i].value+"</div>"
                       }
                           return str;
                   }
               },
               legend: {//图例
                   orient: 'vertical',
                   x: 'right',
                   y: 'bottom',
                   data: ['预算分配', '实际开销']
               },
               polar: [{ //雷达指标列表
                   indicator: [{
                           text: '销售',
                           max: 6000
                       },
                       {
                           text: '管理',
                           max: 16000
                       },
                       {
                           text: '信息技术',
                           max: 30000
                       },
                       {
                           text: '客服',
                           max: 38000
                       },
                       {
                           text: '研发',
                           max: 52000
                       },
                       {
                           text: '市场',
                           max: 25000
                       }
                   ]
               }],
               calculable: false,//是否启用拖拽重计算特性
               series: [{           //雷达图里面的数据
                   name: '例子',
                   type: 'radar',
                   data: [{
                           value: [4300, 10000, 28000, 35000, 50000, 19000],
                           name: '预算分配'
                       },
                       {
                           value: [5000, 14000, 28000, 31000, 42000, 21000],
                           name: '实际开销'
                       }
                   ]
               }]
           };
           var myEcharts=echarts.init(document.getElementById("lei"))
           myEcharts.setOption(option)
       </script>
   </body>