基於ECharts-JS圖表庫實現餅形圖數據詳細顯示

在<head>中採用標籤式單文件引入：
<script type="text/javascript" src="http://sunyanweblog.blog.163.com/blog/ECharts/echarts-all.js"></script>
在<body>中爲餅形圖的存放準備一個具備寬高的<div>：
<div id="container" style="height:550px;margin-top:20px;"></div>
在<body>中爲分類數據詳細展示準備一個<div>：
<div id="showContent" style="width:450px;height:500px;margin-top:210px;margin-left:250px;position:absolute;"></div>
在自定義js文件中基於準備好的<div>初始化echarts圖表：
var myChart = echarts.init(document.getElementById('container'));
自定義option數據：
option = {
            tooltip : {
                trigger: 'item',
                textStyle : {
                    fontSize : '20',
                    color:'white',
                    fontFamily:'幼圓'
                },
                formatter: "{b} : {c}個   約 {d}%",
            },
            legend: {
                orient : 'vertical',
                x : 'right',
                textStyle : {
                    fontSize : '20',
                    color:'white',
                    fontFamily:'幼圓'
                },
                data:['掌握得很好','掌握得良好','掌握得一般','掌握得不好','未掌握']
            },
            toolbox: {
                show : false,
            },
            calculable : true,
            series : [{
                name:'',
                type:'pie',
                radius : [20, 150],
                center : ['50%', 200],
                roseType : 'radius',
                width: '40%',
                max: 60,
                itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        }
                    },
                    emphasis : {
                        label : {
                            show : true,
                            textStyle : {
                                fontSize : '20',
                                fontFamily:'幼圓'
                            }
                        },
                        labelLine : {
                            show : true,
                        }
                    }
                },
                data:[
                    {value:levelArr[4], name:'掌握得很好',content:knowledgeArr[4]},
                    {value:levelArr[3], name:'掌握得良好',content:knowledgeArr[3]},
                    {value:levelArr[2], name:'掌握得一般',content:knowledgeArr[2]},
                    {value:levelArr[1], name:'掌握得不好',content:knowledgeArr[1]},
                    {value:levelArr[0], name:'未掌握',content:knowledgeArr[0]},
                ]
            }]
        };
爲echarts對象加載數據：
myChart.setOption(option);
綁定點擊事件：
var ecConfig = echarts.config;
        myChart.on(ecConfig.EVENT.CLICK, function (param){
            var val = option.series[param.seriesIndex].data[param.dataIndex].value;
            var name = option.series[param.seriesIndex].data[param.dataIndex].name;
            var content = option.series[param.seriesIndex].data[param.dataIndex].content;
            var addHtml = "<p style='font-size:25;color:#FFFFFF;font-family:\"幼圓\";'>"+name+"的知識點&nbsp;  "+val+"個</p><br><hr style='margin-top:-5px;color:#FFFFFF;'><br>";
            addHtml += "<p style='font-size:20;color:#00FFFF;font-family:\"幼圓\";'>"+content+"</p>";
            document.getElementById('showContent').innerHTML = addHtml;
        });

效果圖：