用饼图画太极,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>太极</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width:800;height:500;position:absolute;top:10%;left:20%;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
backgroundColor: '#515151',
title: {
text: '太极',
left: 'center',
top:'5%',
textStyle: {
color: '#ccc'
}
},
color: ['#FFFFFF', '#000000'],
series: [{
name: '大圆',
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
data: [{
value: 50,
name: '阴'
}, {
value: 50,
name: '阳'
},],
roseType: 'radius',
hoverAnimation: false,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false,
}
}
}, {
name: '白色圆',
type: 'pie',
zlevel: 2,
radius: '30%',
center: ['50%', '65%'],
data: [{
value: 50,
name: ''
},],
roseType: 'radius',
hoverAnimation: false,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false,
}
}
},
{
name: '黑色圆',
type: 'pie',
zlevel: 2,
radius: '30%',
center: ['50%', '35%'],
data: [{
value: 50,
name: ''
},],
roseType: 'radius',
hoverAnimation: false,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false,
}
},
itemStyle: {
label: {
color: '#000000'
}
}
},
{
name: '白色圆小',
type: 'pie',
zlevel: 3,
radius: '10%',
center: ['50%', '35%'],
data: [{
value: 50,
name: ''
},],
roseType: 'radius',
hoverAnimation: false,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false,
}
}
},
{
name: '黑色圆小',
type: 'pie',
zlevel: 3,
radius: '10%',
center: ['50%', '65%'],
data: [{
value: 50,
name: ''
},],
roseType: 'radius',
hoverAnimation: false,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false,
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
如图,