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>

 

posted @ 2016-07-12 14:02  sonicwater  阅读(8712)  评论(0)  编辑  收藏  举报