用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 : '个人情况 满分15', max : 15}, 52 {text : '信用记录 满分35', max : 35}, 53 {text : '经济实力 满分30', max : 30}, 54 {text : '稳定情况 满分15', max : 15}, 55 {text : '贷款情况 满分25', max : 25}, 56 {text : '工作情况 满分30', max : 30}, 57 {text : '家庭情况 满分15', max : 15}, 58 {text : '保障情况 满分15', max : 15}, 59 {text : '其他 满分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>