demo.html
2.29 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div id="chart" class="page out" data-title="图表插件">
<div id="chart-header"></div>
<div id="chart-a"></div>
<div id="chart-b"></div>
</div>
<script>
require(["NavHeader", "Chart"], function(NavHeader, Chart) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "chart-header",
option: {
title:"图表插件",
smallTitle:"chart"
}
}).render();
}
new Chart({
el: "chart-a",
option : {
data : [
{"name":"1月", "value":"30.0", "color":"#c23531", "background_color":"#c23531"},
{"name":"2月", "value":"26.0", "color":"#2f4554", "background_color":"#2f4554"},
{"name":"3月", "value":"42.0", "color":"#61a0a8", "background_color":"#61a0a8"},
{"name":"4月", "value":"55.0", "color":"#d48265", "background_color":"#d48265"},
{"name":"5月", "value":"12.0", "color":"#91c7ae", "background_color":"#91c7ae"},
{"name":"6月", "value":"33.0", "color":"#749f83", "background_color":"#749f83"}
],
/*
Column2D 2D柱状图, Column3D 3D柱状图, Pie2D 2D饼状图
Pie3D 3D饼状图, Donut2D 2D环形图, Line2D 2D折线图, Area2D 2D面积图
*/
chartType : "Column2D",
height : 300,
linecolor : "blue",
title : {
name : "月收支图(柱状图)",
color : "black",
font : "Verdana",
fontsize : 14,
fontweight : "normal"
},
valuesuffix : "万"
}
}).render().then(function() {
if (!hasClsPicker) return;
_u.vetically("#chart-a");
clsPicker.golalSetting({
container: ".wev-comp-Chart",
type: "Chart"
});
new clsPicker({
selector: ".wev-chart-container",
text: ".wev-chart-container",
lineYSkew: 40,
skew: [5, 7],
position: "top right"
});
});
if(!hasClsPicker) {
new Chart({
el: "chart-b",
option : {
data : "/mobilemode/mobile/demo/plugin/Chart/data.json",
/*
Column2D 2D柱状图, Column3D 3D柱状图, Pie2D 2D饼状图
Pie3D 3D饼状图, Donut2D 2D环形图, Line2D 2D折线图, Area2D 2D面积图
*/
chartType : "Area2D",
height : 300,
linecolor : "blue",
title : {
name : "月收支图(面积图)",
color : "black",
font : "Verdana",
fontsize : 14,
fontweight : "normal"
},
valuesuffix : "万"
}
}).render();
}
});
</script>