百度Echarts实现环形包并包围标签效果

利用echarts中饼图的特性
相关API详见series-pie

实现：

function aroundChart(id, name, number, color, unit) {
    var dom = document.getElementById(id);
    var chart = echarts.init(dom);
    var opt = {
        series: [{
            name: "",
            type: "pie",
            toolbox: {
                feature: {
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            radius: ["50%", "70%"],
            color: [color, "transparent"],
            startAngle: 225,
            label: {
                normal: {
                    show: false,
                    position: "center"
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 75,
                name: name,
                label: {
                    normal: {
                        show: true,
                        formatter: name + "\n\n\n",
                        textStyle: {
                            color: "#000",
                            fontSize: 12
                        }
                    }
                }
            }, {
                value: 25,
                name: number,
                label: {
                    normal: {
                        show: true,
                        formatter: number,
                        textStyle: {
                            color: color,
                            fontSize: 14
                        }
                    }
                }
            }, {
                value: 0,
                name: "%",
                label: {
                    normal: {
                        show: true,
                        formatter: "\n\n\n" + unit,
                        textStyle: {
                            color: "#000",
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
    };
    chart.clear();
    chart.setOption(opt);
}