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

饼图-使用graphic饼图中间显示文字,label带边框和百分比_第1张图片

 

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}
{b}: {c}
占比:{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; }

 

你可能感兴趣的:(Echarts学习笔记)