用echarts展现雷达图的定制
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>echarts雷达图</title>
<link rel="shortcut icon" href="favicon.png">
<style>
.main {
height: 330px;
overflow: hidden;
padding : 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="main" class="main"></div> <script src="echarts.source.js"></script>
<script>
var myChart;
var domMain = document.getElementById('main'); var option = {
title : {
text: '评估得分',
subtext: '评估得分mini',
show: false
},
tooltip : {
trigger: 'axis'
},
legend: {
x : 'center',
data:['评估得分'],
show: false
},
toolbox: {
show : false,
feature : {
mark : {show: false},
dataView : {show: false, readOnly: false},
restore : {show: false},
saveAsImage : {show: false}
}
},
calculable : false,
polar : [
{
indicator : [
{text : '个人情况\n满分15', max : 15},
{text : '信用记录\n满分35', max : 35},
{text : '经济实力\n满分30', max : 30},
{text : '稳定情况\n满分15', max : 15},
{text : '贷款情况\n满分25', max : 25},
{text : '工作情况\n满分30', max : 30},
{text : '家庭情况\n满分15', max : 15},
{text : '保障情况\n满分15', max : 15},
{text : '其他\n满分20', max : 20} ],
radius : 130
}
],
series : [
{
name: '评估得分',
type: 'radar',
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data : [
{
value : [10,22,20,10,16,15,6,8,15],
name : '评估得分',
itemStyle: {
normal: {
color: '#2c87e5',
label: {
show: true,
formatter:function(params) {
return params.value;
}
},
areaStyle: {
color: 'rgba(44,135,229,0.3)'
}
}
}
}
]
}
]
}; myChart = echarts.init(domMain);
myChart.setOption(option, true)
</script>
</body>
</html>