ECharts饼图实例

92 阅读 0 评论 61 点赞

我是靠谱客的博主笨笨夏天，这篇文章主要介绍ECharts饼图实例，现在分享给大家，希望可以做个参考。

ECharts饼图实例

1、引入jQuery的js文件

2、引入echarts的js文件

test.html页面

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AzzanTest</title>
<script src="jQuery/jquery-1.9.1.min.js"></script>
<script src="echarts/echarts.min.js"></script>
</head>
<body>
<div id="echartsPie" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var echartsPie;
var json = [
{value:30,name:'高圆圆'},
{value:26,name:'赵丽颖'},
{value:24,name:'江莱'}
];
var option = {
title : {
text: '女神年龄分布',
subtext: '独家报道',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} 岁"
},
legend: {
orient : 'vertical',
x : 'left',
data:['高圆圆','赵丽颖','江莱']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'女神',
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '60%'],//饼图的位置
data:json
}
]
};
echartsPie = echarts.init(document.getElementById('echartsPie'));
$(function(){
echartsPie.setOption(option);
});
</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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AzzanTest</title>
<script src="jQuery/jquery-1.9.1.min.js"></script>
<script src="echarts/echarts.min.js"></script>
</head>
<body>
<div id="echartsPie" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var echartsPie;
var json = [
{value:30,name:'高圆圆'},
{value:26,name:'赵丽颖'},
{value:24,name:'江莱'}
];
var option = {
title : {
text: '女神年龄分布',
subtext: '独家报道',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} 岁"
},
legend: {
orient : 'vertical',
x : 'left',
data:['高圆圆','赵丽颖','江莱']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'女神',
type:'pie',
radius : '55%',//饼图的半径大小
center: ['50%', '60%'],//饼图的位置
data:json
}
]
};
echartsPie = echarts.init(document.getElementById('echartsPie'));
$(function(){
echartsPie.setOption(option);
});
</script>
</body>
</html>