-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathradar.html
96 lines (95 loc) · 3.67 KB
/
radar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,null, {renderer: 'svg'});
var app = {};
var color = ['#2f4554','#c23531','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#4d638c','#e9bba9','#7abed1','#b86c99','‘#ffc300']
var fontSize = 20
var radarData = [ //雷达图数据集,每一个dict对应一组数据,value分别是每个指标的值,name与legend对应
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配(Allocated Budget)'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销(Actual Spending)'
}
]
var legend_data = ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
option = null;
option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
color:color,
textStyle:{
fontSize:fontSize
},
// title: {//标题样式
// text: '基础雷达图',
// left:'center', //居中
// top:150,
// textStyle:{
// fontSize:fontSize
// }
// },
tooltip: {},
legend: {
orient: 'vertical',
right: 100, //图例位置
bottom:100,
data: legend_data
},
grid: {//设置图大小
left: '10%',
right: '10%',
bottom: '10%',
},
radar: {
// shape: 'circle',
name: {
textStyle: { //设置指标名称样式
color: 'black',
// backgroundColor: '#999',
// borderRadius: 3,
// padding: [3, 5]
}
},
indicator: [ //每一轴的指标名称和取值范围
{ name: '销售(sales)', max: 6500},
{ name: '管理(Administration)', max: 16000},
{ name: '信息技术(Information Techology)', max: 30000},
{ name: '客服(Customer Support)', max: 38000},
{ name: '研发(Development)', max: 52000},
{ name: '市场(Marketing)', max: 25000}
]
},
series: [{ //数据集
name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
// areaStyle: {normal: {}}, //通过areaStyle可以设置雷达图样式,是否填充和透明度等,默认无填充
data: radarData
}]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>