Skip to content

Commit 4656600

Browse files
materialcodermaterialcoder
committed
chart-component
图表组件
1 parent b819f99 commit 4656600

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+2971
-0
lines changed

‎bar/css/H5ComponentBar.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* 柱状图组件样式 */
2+
.h5_component_bar {
3+
4+
}
5+
6+
.h5_component_bar .line {
7+
height: 15px;
8+
font-size: 12px;
9+
line-height: 15px;
10+
margin-bottom: 15px;
11+
}
12+
13+
.h5_component_bar .name {
14+
width: 60px;
15+
float: left;
16+
color: #000;
17+
text-align: center;
18+
}
19+
20+
.h5_component_bar .rate {
21+
height: 15px;
22+
margin-left: 5px;
23+
float: left;
24+
position: relative;
25+
}
26+
27+
.h5_component_bar .rate .bg {
28+
background-color: #99c0ff;
29+
width: 0%;
30+
height: 100%;
31+
position: absolute;
32+
left: 0;
33+
top: 0;
34+
border-radius: 3px;
35+
}
36+
37+
.h5_component_bar .per {
38+
width: 20px;
39+
color: #99c0ff;
40+
margin-left: 5px;
41+
float: left;
42+
opacity: 0;
43+
}
44+
45+
.h5_component_bar_load .rate .bg {
46+
-webkit-transition: all 1s .5s;
47+
transition: all 1s .5s;
48+
width: 100%;
49+
}
50+
51+
52+
.h5_component_bar_leave .rate .bg {
53+
-webkit-transition: all 1s;
54+
transition: all 1s;
55+
width: 0%;
56+
}
57+
58+
.h5_component_bar_load .per {
59+
-webkit-transition: all 1s 1.5s;
60+
transition: all 1s 1s;
61+
opacity: 1;
62+
}
63+
64+
.h5_component_bar_leave .per {
65+
opacity: 0;
66+
}

‎bar/index.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>柱状图组件</title>
6+
<style>
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
background-color: #000;
11+
font-size: 12px;
12+
font-family: "Microsoft Yahei";
13+
}
14+
.iphone {
15+
width: 340px;
16+
height: 540px;
17+
background-color: #fff;
18+
position: absolute;
19+
top: 50%;
20+
left: 50%;
21+
margin: -270px 0 0 -170px;
22+
overflow: hidden;
23+
}
24+
</style>
25+
<link rel="stylesheet" href="../css/H5ComponentBase.css">
26+
<script src="../js/lib/jquery.js"></script>
27+
<script src="../js/H5ComponentBase.js"></script>
28+
29+
<!-- 引入柱状图的资源 -->
30+
<link rel="stylesheet" type="text/css" href="css/H5ComponentBar.css">
31+
<script src="js/H5ComponentBar.js"></script>
32+
</head>
33+
<body>
34+
<!-- 用于开发测试 H5ComponentBar 对象 （柱状图组件） -->
35+
<div class="iphone">
36+
37+
</div>
38+
39+
<script>
40+
var cfg = {
41+
type: 'bar',
42+
width: 530,
43+
height: 600,
44+
data: [
45+
['JavaScript', .5, '#ff7676'],
46+
['HTML/CSS', .2],
47+
['CSS3', .1],
48+
['HTML5', .25],
49+
['jQuery', .15],
50+
['BootStrap', .3],
51+
['C++', .05]
52+
],
53+
css: {
54+
top: 100,
55+
opacity: 0
56+
},
57+
animateIn: {
58+
opacity: 1,
59+
top: 200
60+
},
61+
animateOut: {
62+
opacity: 0,
63+
top: 100
64+
},
65+
center: true
66+
}
67+
68+
var h5 = new H5ComponentBar('myBarComponent',cfg);
69+
$('.iphone').append(h5);
70+
71+
var leave = true;
72+
$('body').click(function() {
73+
leave = !leave;
74+
$('.h5_component').trigger( leave ? 'onLeave' : 'onLoad');
75+
})
76+
</script>
77+
</body>
78+
</html>

‎bar/js/H5ComponentBar.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* 柱状图表组件对象 */
2+
3+
var H5ComponentBar = function(name, cfg) {
4+
var component = new H5ComponentBase(name, cfg);
5+
$.each(cfg.data, function(idx, item) {
6+
var line = $('<div class="line">');
7+
var name = $('<div class="name">');
8+
var rate = $('<div class="rate">');
9+
var per = $('<div class="per">');
10+
11+
var width = item[1]*100 + '%';
12+
13+
if(item[2]) {
14+
var bgStyle = 'style="background-color:' + item[2] + '"';
15+
}
16+
rate.html('<div class="bg" '+ bgStyle +'></div>')
17+
18+
rate.css('width',width);
19+
20+
name.text(item[0]);
21+
22+
per.text(width);
23+
24+
line.append(name).append(rate).append(per);
25+
26+
component.append(line);
27+
});
28+
return component;
29+
}

‎css/H5.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* H5对象的全局样式 */
2+
3+
.h5 {
4+
height: 100%;
5+
}
6+
.h5_page {
7+
position: relative;
8+
width: 100%;
9+
height: 100%;
10+
background-color: #ddd;
11+
background-size: 100%;
12+
background-repeat: no-repeat;
13+
}

‎css/H5ComponentBar.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* 柱状图组件样式 */
2+
.h5_component_bar {
3+
4+
}
5+
6+
.h5_component_bar .line {
7+
height: 15px;
8+
font-size: 12px;
9+
line-height: 15px;
10+
margin-bottom: 15px;
11+
}
12+
13+
.h5_component_bar .name {
14+
width: 60px;
15+
float: left;
16+
color: #000;
17+
text-align: center;
18+
}
19+
20+
.h5_component_bar .rate {
21+
height: 15px;
22+
margin-left: 5px;
23+
float: left;
24+
position: relative;
25+
}
26+
27+
.h5_component_bar .rate .bg {
28+
background-color: #99c0ff;
29+
width: 0%;
30+
height: 100%;
31+
position: absolute;
32+
left: 0;
33+
top: 0;
34+
border-radius: 3px;
35+
}
36+
37+
.h5_component_bar .per {
38+
width: 20px;
39+
color: #99c0ff;
40+
margin-left: 5px;
41+
float: left;
42+
opacity: 0;
43+
}
44+
45+
.h5_component_bar_load .rate .bg {
46+
-webkit-transition: all 1s .5s;
47+
transition: all 1s .5s;
48+
width: 100%;
49+
}
50+
51+
52+
.h5_component_bar_leave .rate .bg {
53+
-webkit-transition: all 1s;
54+
transition: all 1s;
55+
width: 0%;
56+
}
57+
58+
.h5_component_bar_load .per {
59+
-webkit-transition: all 1s 1.5s;
60+
transition: all 1s 1s;
61+
opacity: 1;
62+
}
63+
64+
.h5_component_bar_leave .per {
65+
opacity: 0;
66+
}

‎css/H5ComponentBase.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* 基本图文组件样式 */
2+
3+
.h5_component {
4+
background-size: 100%;
5+
background-repeat: no-repeat;
6+
position: absolute;
7+
}

‎css/H5ComponentPie.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* 雷达图组件样式 */
2+
.h5_component_pie {
3+
4+
}
5+
6+
.h5_component_pie canvas {
7+
position: absolute;
8+
left: 0;
9+
top: 0; /*用canvas做动画，会进行分层，要用到z-index*/
10+
width: 100%;
11+
height: 100%;
12+
}
13+
14+
.h5_component_pie .text {
15+
position: absolute;
16+
text-align: center;
17+
z-index: 999;
18+
height: 24px;
19+
font-size: 12px;
20+
transition: all 1s;
21+
}

‎css/H5ComponentPolyline.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* 折线图组件样式 */
2+
.h5_component_polyline {
3+
4+
}
5+
6+
.h5_component_polyline canvas {
7+
position: absolute;
8+
left: 0;
9+
top: 0; /*用canvas做动画，会进行分层，要用到z-index*/
10+
width: 100%;
11+
height: 100%;
12+
}
13+
14+
.h5_component_polyline .text {
15+
position: absolute;
16+
font-size: 12px;
17+
text-align: center;
18+
bottom: -20px;
19+
height: 20px;
20+
line-height: 20px;
21+
transform: scale(.8); /*Chrome不会显示字体小于12px的效果，所以采用缩放*/
22+
-webkit-transition: all 1s 1.5s;
23+
transition: all 1s 1.5s;
24+
opacity: 0;
25+
}
26+
27+
.h5_component_polyline_load .text {
28+
opacity: 1;
29+
}
30+
31+
.h5_component_polyline_onleave .text {
32+
opacity: 0;
33+
}

‎css/H5ComponentRadar.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* 雷达图组件样式 */
2+
.h5_component_radar {
3+
4+
}
5+
6+
.h5_component_radar canvas {
7+
position: absolute;
8+
left: 0;
9+
top: 0; /*用canvas做动画，会进行分层，要用到z-index*/
10+
width: 100%;
11+
height: 100%;
12+
}
13+
14+
.h5_component_radar .text {
15+
position: absolute;
16+
font-size: 12px;
17+
transition: all 1s;
18+
}

‎css/H5ComponentRing.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* 环图组件样式 */

‎css/H5ComponentScatter.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* 散点图组件样式 */
2+
.h5_component_scatter { }
3+
.h5_component_scatter .scatter {
4+
display: block;
5+
background-color: #ccc;
6+
position: absolute;
7+
border-radius: 50%;
8+
color: #fff;
9+
transition: all .5s;
10+
}
11+
.h5_component_scatter .name {
12+
height: auto;
13+
width: 100%;
14+
text-align: center;
15+
position: absolute;
16+
top: 50%;
17+
/*margin-top: -15px;*/
18+
transform: translateY(-50%);
19+
font-size: 22px;
20+
}
21+
22+
.h5_component_scatter .per {
23+
font-size: 0.5em;
24+
}

0 commit comments

Comments
 (0)