示例圖
demo6.png
<div id="pie" style="width:400px;height:300px;" ></div>
<!-- js部分 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript">
var option = {
grid:{x:0,y:5,x2:0,y2:0},
backgroundColor: '#001848',
color: ['#52bbff','#4ef2f2','#f4536a','#e6923e','#357aae','#45bcf2'],
series: [{
type: 'pie',
radius: ['39%', '55%'],
itemStyle: {
normal:{
label:{
show:true,
textStyle:{color:'#3c4858',fontSize:"18"},
formatter:function(val){
return '{a|' + val.name + '}{b| ' + val.value+'%}'
},
rich: {
a: { color: '#fff',fontSize: 15},
b: {color: '#ff9900',fontSize: 15}
}
},
labelLine:{
show:true,
lineStyle:{color:'#45bcf2'}
}
},
},
}],
};
var pie = echarts.init(document.getElementById('pie'));
var pie1Data = [
{value: 20, name: '數(shù)學(xué)'},
{value: 20, name: '英語'},
{value: 15, name: '語文'},
{value: 15, name: '物理'},
{value: 15, name: '化學(xué)'},
{value: 30, name: '生物'}
]
makePie();
function makePie(){
option.series[0].data = pie1Data
pie.setOption(option);
}
</script>
