Echart如何实现下图的样式？

Question

有个项目很急用到Echarts，自己搞了很久，也看了官网不少示例
现在不明白的地方是，
1.怎么把那个百分比和男性女性的名字显示到图标的中间
2.那个下方图例怎么制作...白色背景然后里面有带颜色的小方块..

求熟悉Echart的大神来帮我T_T

Answer 1

datas = [
    {value:298, name:'女性'},
    {value:359, name:'男性'}
];
legends = {};
datas.forEach(v=>{legends[v.name]=v.value});

option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',//底部纵向无效
        bottom: '20',    //bottom改成像素，纵向排列
        formatter: function (name) {
            return name + ':' + legends[name] + '人';
        },
        backgroundColor:'#fff'
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            data: datas,
            label:{
                position: 'inside',
                formatter: '{b}\n{d}%',
                color: '#000', // 字体黑色
                fontWeight: 'bold', // 字体加粗
                fontSize: '24' // 字体放大
            }
        }
    ]
};

Answer 2

在series里面的label属性，添加这个
label: {

normal: {
    position: 'inner'
}

},

Answer 3

1.标签的位置。API

series[i]-pie.label.normal.position string
[ default: 'outside' ]
标签的位置。

可选：

'outside'

饼图扇区外侧，通过视觉引导线连到相应的扇区。

'inside'

饼图扇区内部。

'inner' 同 'inside'。

'center'

2.懒得帮你查API,自己查吧

Answer 4

option = {
          backgroundColor: '#1BA4E5',
          color: ['#B85351', '#4F7DB0'],
          title: {
            text: '虚构数据',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            y: 'bottom',
            left: 'center',
            backgroundColor: '#fff',
            data: ['男性', '女性']
          },
          series: [
            {
              type: 'pie',
              radius: '65%',
              center: ['50%', '50%'],
              selectedMode: 'single',
              data: [
                {
                  value: 748,
                  name: '男性',
                  label: {
                    normal: {
                      position: 'inner',
                      formatter: '{b}\n{d}%'
                    }
                  }
                },
                {
                  value: 535,
                  name: '女性',
                  label: {
                    normal: {
                      position: 'inner',
                      formatter: '{b}\n{d}%'
                    }
                  }
                }
              ]
            }
          ]
        }