您的位置：首页 > Web前端 > JavaScript

详解JavaScript模块化开发

2017-10-26 16:59 375 查看

一、效果图

二、代码

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="pieDiagram" class="floatLeft" style="height:400px;width:400px;"></div>
<script src="js/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
4000

<script src="js/echarts/echarts.min.js" type="text/javascript"></script>
<script src="js/PercentPie.js"></script>
<script type="text/javascript">
var option1 = {
value:20,//百分比,必填
name:'及格率',//必填
title:'学习成绩',
backgroundColor:null,
color:['#38a8da','#d4effa'],
fontSize:16,
domEle:document.getElementById("pieDiagram")//必填
},percentPie1 = new PercentPie(option1);
percentPie1.init();
</script>
</body>
</html>

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
[/code]

PercentPie.js

function PercentPie(option){
this.backgroundColor = option.backgroundColor||'#fff';
this.color           = option.color||['#38a8da','#d4effa'];
this.fontSize        = option.fontSize||12;
this.domEle          = option.domEle;
this.value           = option.value;
this.name            = option.name;
this.title           = option.title;
}

PercentPie.prototype.init = function(){
var _that = this;
var option = {
backgroundColor:_that.backgroundColor,
color:_that.color,
title: {
text: _that.title,
top:'3%',
left:'1%',
textStyle:{
color: '#333',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 16,
}
},
series: [{
name: '来源',
type: 'pie',
radius: ['60%', '75%'],
avoidLabelOverlap: false,
hoverAnimation:false,
label: {
normal: {
show: false,
position: 'center',
textStyle: {
fontSize: _that.fontSize,
fontWeight: 'bold'
},
formatter:'{b}\n{c}%'
}
},
data: [{
value: _that.value,
name: _that.name,
label:{
normal:{
show:true
}
}
},
{
value: 100-_that.value,
name: ''
}
]
}]
};

echarts.init(_that.domEle).setOption(option);
};

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
[/code]

(function () {('pre.prettyprint code').each(function () {
var lines = (this).text().split(′\n′).length;varnumbering = $('').addClass('pre-numbering').hide();
(this).addClass(′has−numbering′).parent().append(numbering);
for (i = 1; i

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航