饼图-使用graphic饼图中间显示文字，label带边框和百分比

 

var midText = '多行显示的文字效果展示';
var _midText = showFontNum(midText);
var _value = [1, 2, 3, 4];
var _name = ["深圳", "广州", "北京", "上海"];
var _color = ['#a5be', '#5eccf8', 'pink', 'yellow'];
var pieData = []; //存储主导饼图的数据
for (var i = 0; i < _name.length; i++) {
    var item = {
        value: _value[i],
        name: _name[i],
        itemStyle: {
            color: _color[i]
        }
    };
    pieData.push(item);
}
var _rich = {
    // 对【城市展示】的设置
    a: {
        color: '#999',
        lineHeight: 22,
        align: 'center'
    },
    // 对【城市展示】背景的设置
    abg: {
        backgroundColor: '#333',
        width: '100%',
        align: 'right',
        height: 22,
        borderRadius: [4, 4, 0, 0]
    },
    // 下划线的设置
    hr: {
        borderColor: 'blue',
        width: '100%',
        borderWidth: 0.5,
        height: 0
    },
    // legend名称设置
    b: {
        fontSize: 16,
        lineHeight: 33
    },
    // 百分比设置
    per: {
        color: '#eee',
        backgroundColor: '#334455',
        padding: [2, 4],
        borderRadius: 2
    }
};
option = {
    backgroundColor: '#1A4D83',
    graphic: [{ //2、中心的文字设置
        type: 'text',
        z: 100,
        left: 'center',
        top: 'middle',
        style: {
            x: 0,
            y: 0,
            fill: '#fff',
            text: _midText,
            font: 'bolder 16px  "Microsoft YaHei", sans-serif',
            textAlign: 'center', //3、居中显示
        }

    }],
    tooltip: {
        show: true,
        trigger: 'item',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: "{a}</br>{b}: {c}</br>占比：{d}%"
    },
    legend: {
        orient: 'vertical',
        right: '0%',
        bottom: '15%',
        textStyle: {
            fontWeight: 'normal',
            fontSize: '16'
        },
        data: ['男男', '女女', '男女', '不详']
    },
    series: [{ //显示中间文字的辅助图1
            type: 'pie',
            radius: ['22%', '28%'], //28% 和主导图的左值一致
            silent: true, //禁用鼠标悬浮效果
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    color: '#164270',
                },
            },
            data: [2],
            zlevel: 1,
        },
        { //显示外部边框的辅助图2
            type: 'pie',
            radius: ['50%', '56%'], //50% 和主导图的右值一致
            silent: true, //禁用鼠标悬浮效果
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    color: '#164270',
                },
            },
            data: [2],
            zlevel: 2,
        },
        { //主导内容
            name: '城市展示',
            type: 'pie',
            radius: ['28%', '50%'],
            startAngle: 190, //设置起始的角度
            avoidLabelOverlap: false,
            hoverAnimation: false,
            zlevel: 3,
            label: {
                normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    shadowBlur: 3,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2,
                    shadowColor: '#999',
                    padding: [0, 7],
                    rich: _rich,
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 20,
                    length2: 40,
                    lineStyle: {
                        type: 'dashed',
                        width: 2
                    }
                }
            },
            data: pieData,
        }
    ]
};
//文字显示函数
function showFontNum(midText) {
    var newParamsName = ""; // 最终拼接成的字符串
    var paramsNameNumber = midText.length; // 实际文字个数
    var provideNumber = 4; // 每行能显示的字的个数
    var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
    /**
     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
     */
    if (paramsNameNumber > provideNumber) {
        /** 循环每一行,p表示行 */
        for (var p = 0; p < rowNumber; p++) {
            var tempStr = ""; // 表示每一次截取的字符串
            var start = p * provideNumber; // 开始截取的位置
            var end = start + provideNumber; // 结束截取的位置
            // 此处特殊处理最后一行的索引值
            if (p === rowNumber - 1) {
                // 最后一次不换行
                tempStr = midText.substring(start, paramsNameNumber);
            } else {
                // 每一次拼接字符串并换行
                tempStr = midText.substring(start, end) + "\n\n";
            }
            newParamsName += tempStr; // 最终拼成的字符串
        }
    } else {
        newParamsName = midText;
    }
    return newParamsName;
}