急 请问Echart 怎么实现如下图的效果?

clipboard.png
现在有个需求是做成上图这样, 查了些资料捣鼓了很久还是只能做到下图这个样子

clipboard.png

求SF的echart大神告诉我..那个小圆点和labelline跨过上面两行字怎么能实现??T_T

目前的代码

var scale = 1;

var echartData = [{
    value: 30,
    name: '56岁及以上'
}, {
    value: 8,
    name: '46至55岁'
}, {
    value: 13,
    name: '其他'
}]

var rich = {
    top: {
        color: "rgb(104,104,104)",
        fontSize: 30 * scale,
        fontWeight:'bold',
        padding: [0, 0, 0, 0],
        align: 'center'
    },
    total: {
        color: "rgb(104,104,104)",
        fontSize: 80 * scale,
        fontWeight: 'bold',
        align: 'center'
    },
    //这个是每一栏的字体
    bottom: {
        color: "rgb(104,104,104)",
        align: 'center',
        fontSize: 14 * scale,
        padding: [10, 0]
    }
}
option = {

    title: {
        text: '年龄情况',
        left: 'center',
        bottom: '5%',
        textStyle: {
            color: 'rgb(57,57,56)'
        }
    },
    legend: { //图例
        selectedMode: false,
        formatter: function(name) {
            var total = 0; 
            echartData.forEach(function(value, index, array) {
                total += value.value;
            });
            return '{total|' + total + '}';
        },
       
        //这里好像必须要设置一下
        data: [echartData[1].name],
        
      
        left: 'center',
        top: 'center',
        icon: 'none',
        align: 'center',
        
        textStyle: {
            color: "rgb(104,104,104)",
            fontSize: 32 * scale,
            rich: rich
        },
    },
    series: [{
        
        type: 'pie',
        radius: ['25%', '38%'],
        hoverAnimation: false,
        color: ['rgb(243,152,0)', 'rgb(0,206,243)', 'rgb(193,109,231)'],
        label: {
            normal: {
                formatter: function(params, ticket, callback) {
                    return '{top|' + params.value + '人}\n{bottom|' + params.name + '}';
                },
                rich: rich
            },
        },
 
        data: echartData
    }]
};
阅读 4.1k
2 个回答

如果必须效果完全一样 自己用zrender封装吧

好像实现不了,echarts的饼图的线啊啥的没有自定义的功能

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题