pie-nest.html

<!DOCTYPE html>
<html style="height: 100%">
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/>
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="js/echarts.min.js"></script>
       <script type="text/javascript" src="js/echarts-gl.min.js"></script>
       <script type="text/javascript" src="js/ecStat.min.js"></script>
       <script type="text/javascript" src="js/dataTool.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} {b}: {c} ({d}%)'
    },
    legend: {
        x:'right',
        y:'bottom',
        orient: 'horizontal',
        left: 10,
        data: [ '带头人', '骨干成员', '一般人员', '专家顾问', '购置费', '材料费', '差旅费', '其它']
    },
    series: [
        {
            name: '主项',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                position: 'inner',
                formatter: '{b|{b}} ',
                borderWidth: 11,
                rich: {
                    b: {
                        fontSize: 20,
                        color:'#eee'
                    }
                }
            },
            labelLine: {
                show: true
            },
            data: [
                {value: 4.5, name: '人员费'},
                {value: 5, name: '设备费'},
                {value: 2.3, name: '相关\n业务费'},
                {value: 1.2, name: '其它\n费\n用'}
            ]
        },
        {
            name: '单位：万元',
            fontSize: 26,
            type: 'pie',
            radius: ['35%', '55%'],
            label: {
                formatter: '{b|{b}_}{c|{c}} ',
                backgroundColor: '#eee',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                    b: {
                        fontSize: 26,
                        lineHeight: 33
                    },
                    c: {
                        fontSize: 26
                    }
                }
            },
            data: [
                {value: 0.5, name: '带头人'},
                {value: 2, name: '骨干成员'},
                {value: 1, name: '一般人员'},
                {value: 1, name: '专家顾问'},
                {value: 5, name: '购置费'},
                {value: 1, name: '材料费'},
                {value: 1.3, name: '差旅费'},
                {value: 1.2, name: '其它'}
            ]
        }
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>