demo.html
2.2 KB
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
<div id="radarchart" class="page out" data-title="雷达图插件">
<div id="radarchart-header"></div>
<div id="radarchart-a"></div>
<div id="radarchart-b"></div>
</div>
<script>
require(["NavHeader", "RadarChart"], function(NavHeader, RadarChart) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "radarchart-header",
option: {
title:"雷达图插件",
smallTitle:"radarchart"
}
}).render();
}
new RadarChart({
el: "radarchart-a",
option: {
data: [
{ "name": "销售", "预算分配": "4300", "实际开销": "5000", "max": "6500"},
{ "name": "管理", "预算分配": "10000", "实际开销": "14000", "max": "16000"},
{ "name": "信息技术", "预算分配": "28000", "实际开销": "28000", "max": "30000"},
{ "name": "客服", "预算分配": "35000", "实际开销": "31000", "max": "38000"},
{ "name": "研发", "预算分配": "50000", "实际开销": "42000", "max": "52000"},
{ "name": "市场", "预算分配": "19000", "实际开销": "21000", "max": "25000"}
],//图表数据
height: 400,//图表高度
title: {
show: true,
text: "基础雷达图"//标题
},
radar: {
center: ["50%", "50%"], //中心点坐标
radius: "50%", //雷达图半径
shape: "polygon" //图形形状 polygon 多边形 circle 圆形
},
legend: {
show: true,//是否显示图例
bottom: 10,//图例底部边距
textStyle: {
color: "#333"//字体颜色
}
},
color: "#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色，默认
click: function (params) {
var url = "/mobilemode/mobile/demo/plugin/NewChart/detail.html?name=" + params.name + "&seriesname=" + params.seriesName + "&value=" + params.value;
//$u(url, true);
}
}
}).render().then(function(){
if (!hasClsPicker) return;
_u.vetically("#radarchart-a");
clsPicker.golalSetting({
container: "#radarchart-a",
type: "Radarchart"
});
new clsPicker({
selector: ".wev-chart-container",
text: ".wev-chart-container",
skew: [10, 9],
lineYSkew: 30,
position: "bottom right"
});
});
});
</script>