基于ECharts-JS图表库实现饼形图数据详细显示

在中采用标签式单文件引入：

在中为饼形图的存放准备一个具备宽高的

：

在中为分类数据详细展示准备一个

：

在自定义js文件中基于准备好的

初始化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 = "

"+name+"的知识点   "+val+"个

---

";
            addHtml += "

"+content+"

";
            document.getElementById('showContent').innerHTML = addHtml;
        });


效果图：