<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<style>
.
chart{
border:
1px solid #f56868;
width:
300px;
height:
200px;
}
</style>
</head>
<body>
<div class="chart"></div>
</body>
<script>
$(
function () {
var people={
num:
10,
num2:
3,
num3:
7,
}
;
/*第一种 javascript 选择器
*document.getElementsByClassName("chart")[0]
* 必须加 [0] 标
*/
/*第二种 jQuery 选择器
*$(".chart")[0]
* 必须加 [0] 标
*/
// var echarts_1 = echarts.init($(".chart")[0]);
var echarts_1 =
echarts.init(
document.
getElementsByClassName(
"chart")[
0])
;
echarts_1.
setOption(option = {
title: {
// text: people.num2+'%',
/*原始方法未进行判断
*
* 推荐下面进行三目运算判断，
* 在people.num的值为0的时候，
* 饼图中间数据不会显示NAN
**/
text: people.
num==
0 ?
'0%': Math.
ceil(people.
num2*
100/people.
num)+
'%',
// subtext: '12月',
x:
'center',
y:
'center',
textStyle: {
fontWeight:
'normal',
fontSize:
15
}
}
,
backgroundColor:
"#fff",
color:[
"#1bb856","#dddddd"]
,
tooltip: {
trigger:
'item',
formatter:
function(params
, ticket
, callback) {
var res = params.
seriesName;
res +=
'<br/>' + params.name +
' : ' + params.value +
'人' +
'';
return res
;
}
}
,
selectedOffset:
5,
/* 可以需要的时候放开*/
// legend: {
// orient: 'vertical',
// right: '0%',
// bottom: '0%',
// data: ['已完成', '未完成'],
// itemWidth: 30,
// itemHeight: 10
// },
series: [{
name:
'总人数'+
' : '+ people.
num +
'人',
type:
'pie',
// minAngle:40, /*最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互*/
selectedMode:
'single',
radius: [
'65%', '80%']
,
avoidLabelOverlap:
false,
label: {
normal: {
show:
true,
position:
'outside',
formatter:
"{b}{c}人"
}
,
emphasis: {
show:
true
}
}
,
data: [{
value: people.
num2,
name:
'已完成'
}
, {
value: people.
num3,
name:
'未完成'
}]
,
labelLine: {
normal: {
show:
true,
length:
5,
length2:
10
}
}
}]
})
;
})
</script>
</html>
转载请注明原文地址: https://www.6miu.com/read-56288.html
