示例圖

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>