demo.html
1.88 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="gaugechart" class="page out" data-title="仪表盘插件">
<div id="gaugechart-header"></div>
<div id="gaugechart-a"></div>
</div>
<script>
require(["NavHeader", "GaugeChart"], function(NavHeader, GaugeChart) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "gaugechart-header",
option: {
title:"仪表盘插件",
smallTitle:"gauge chart"
}
}).render();
}
new GaugeChart({
el: "gaugechart-a",
option: {
data: [
{name: "业务指标", label: "完成率", value: "79.99", min: 0, max: 100}
],//图表数据
height: 300,//图表高度
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: {
axisLine: { // 坐标轴线
lineStyle: { // 坐标轴先颜色
color: [[0.2, "#d48265"], [0.8, "#bda29a"], [1, "#546570"]]
}
},
axisLabel: { //仪表盘标签数字
color: "#999",
fontSize: 14
},
title: { //仪表盘标题
fontSize: 14,
color: "#999"
},
radius: "85%",
detail: { //仪表盘显示数值
formatter:'{value}',
fontSize: 20
},
},
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("#gaugechart-a");
clsPicker.golalSetting({
container: "#gaugechart-a",
type: "Gaugechart"
});
new clsPicker({
selector: ".wev-chart-container",
text: ".wev-chart-container",
skew: [10, 9],
lineYSkew: 30,
position: "bottom right"
});
});
});
</script>