Skip to content

Commit c88d96d

Browse files
materialcodermaterialcoder
committed
新增环形图和立式柱状图
1 parent 4656600 commit c88d96d

22 files changed

+1139
-24
lines changed

‎barvertical/css/H5ComponentBarvertical.css

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

‎barvertical/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/H5ComponentBarvertical.css">
31+
<script src="js/H5ComponentBarvertical.js"></script>
32+
</head>
33+
<body>
34+
<!-- 用于开发测试 H5ComponentBarvertical 对象 （柱状图组件-立式） -->
35+
<div class="iphone">
36+
37+
</div>
38+
39+
<script>
40+
var cfg = {
41+
type: 'barvertical',
42+
width: 530,
43+
height: 500,
44+
data: [
45+
['JavaScript', .9, '#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: 100
60+
},
61+
animateOut: {
62+
opacity: 0,
63+
top: 200
64+
},
65+
center: true
66+
}
67+
68+
var h5 = new H5ComponentBarvertical('myBarverticalComponent',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>

‎barvertical/js/H5ComponentBarvertical.js

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

‎css/H5ComponentBarvertical.css

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

‎css/H5ComponentPolyline.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
bottom: -20px;
1919
height: 20px;
2020
line-height: 20px;
21-
transform: scale(.8); /*Chrome不会显示字体小于12px的效果，所以采用缩放*/
21+
/*transform: scale(.8); Chrome不会显示字体小于12px的效果，所以采用缩放*/
2222
-webkit-transition: all 1s 1.5s;
2323
transition: all 1s 1.5s;
2424
opacity: 0;

‎css/H5ComponentRing.css

+30
Original file line numberDiff line numberDiff line change
@@ -1 +1,31 @@
11
/* 环图组件样式 */
2+
.h5_component_ring {
3+
4+
}
5+
6+
.h5_component_ring canvas {
7+
position: absolute;
8+
left: 0;
9+
top: 0; /*用canvas做动画，会进行分层，要用到z-index*/
10+
width: 100%;
11+
height: 100%;
12+
}
13+
14+
.h5_component_ring .text {
15+
position: absolute;
16+
text-align: center;
17+
z-index: 999;
18+
height: 24px;
19+
font-size: 16px;
20+
opacity: 0;
21+
transition: all 1s;
22+
}
23+
.h5_component_ring .per {
24+
position: absolute;
25+
text-align: center;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
font-size: 18px;
30+
opacity: 0;
31+
}

‎css/H5ComponentRingbig.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* 大环图组件样式 */
2+
.h5_component_ringbig {
3+
4+
}
5+
6+
.h5_component_ringbig canvas {
7+
position: absolute;
8+
left: 0;
9+
top: 0; /*用canvas做动画，会进行分层，要用到z-index*/
10+
width: 100%;
11+
height: 100%;
12+
}
13+
14+
.h5_component_ringbig .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/H5ComponentScatter.css

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
position: absolute;
77
border-radius: 50%;
88
color: #fff;
9-
transition: all .5s;
9+
opacity: 0;
1010
}
1111
.h5_component_scatter .name {
1212
height: auto;
@@ -21,4 +21,10 @@
2121

2222
.h5_component_scatter .per {
2323
font-size: 0.5em;
24+
}
25+
.h5_component_scatter_load .scatter {
26+
opacity: 1;
27+
}
28+
.h5_component_scatter_leave .scatter {
29+
opacity: 0;
2430
}

0 commit comments

Comments
 (0)