echarts雷达图 - 爱码网

用echarts展现雷达图的定制
  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>echarts雷达图</title>
  6     <link rel="shortcut icon" href="favicon.png">
  7     <style>
  8         .main {
  9             height: 330px;
 10             overflow: hidden;
 11             padding : 10px;
 12             margin-bottom: 10px;
 13         }
 14     </style>
 15 </head>
 16 <body>
 17     <div id="main" class="main"></div>
 18 
 19     <script src="echarts.source.js"></script>
 20     <script>
 21         var myChart;
 22         var domMain = document.getElementById(\'main\');
 23         
 24         var option = {
 25             title : {
 26                 text: \'评估得分\',
 27                 subtext: \'评估得分mini\',
 28                 show: false
 29             },
 30             tooltip : {
 31                 trigger: \'axis\'
 32             },
 33             legend: {
 34                 x : \'center\',
 35                 data:[\'评估得分\'],
 36                 show: false
 37             },
 38             toolbox: {
 39                 show : false,
 40                 feature : {
 41                     mark : {show: false},
 42                     dataView : {show: false, readOnly: false},
 43                     restore : {show: false},
 44                     saveAsImage : {show: false}
 45                 }
 46             },
 47             calculable : false,
 48             polar : [
 49                 {
 50                     indicator : [
 51                         {text : \'个人情况\n满分15\', max  : 15},
 52                         {text : \'信用记录\n满分35\', max  : 35},
 53                         {text : \'经济实力\n满分30\', max  : 30},
 54                         {text : \'稳定情况\n满分15\', max  : 15},
 55                         {text : \'贷款情况\n满分25\', max  : 25},
 56                         {text : \'工作情况\n满分30\', max  : 30},
 57                         {text : \'家庭情况\n满分15\', max  : 15},
 58                         {text : \'保障情况\n满分15\', max  : 15},
 59                         {text : \'其他\n满分20\', max  : 20}
 60                         
 61                     ],
 62                     radius : 130
 63                 }
 64             ],
 65             series : [
 66                 {
 67                     name: \'评估得分\',
 68                     type: \'radar\',
 69                     itemStyle: {
 70                         normal: {
 71                             areaStyle: {
 72                                 type: \'default\'
 73                             }
 74                         }
 75                     },
 76                     data : [
 77                         {
 78                             value : [10,22,20,10,16,15,6,8,15],
 79                             name : \'评估得分\',
 80                             itemStyle: {
 81                                 normal: {
 82                                     color: \'#2c87e5\',
 83                                     label: {
 84                                         show: true,
 85                                         formatter:function(params) {
 86                                             return params.value;
 87                                         }
 88                                     },
 89                                     areaStyle: {
 90                                         color: \'rgba(44,135,229,0.3)\'
 91                                     }
 92                                 }
 93                             }
 94                         }
 95                     ]
 96                 }
 97             ]
 98         };
 99                     
100         
101         myChart = echarts.init(domMain);
102         myChart.setOption(option, true)
103     </script>
104 </body>
105 </html>