Echart如何實現(xiàn)下圖的樣式？

圖片描述

有個項目很急用到Echarts，自己搞了很久，也看了官網(wǎng)不少示例
現(xiàn)在不明白的地方是，
1.怎么把那個百分比和男性女性的名字顯示到圖標的中間
2.那個下方圖例怎么制作...白色背景然后里面有帶顏色的小方塊..

求熟悉Echart的大神來幫我T_T

回答

編輯回答

糖豆豆

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

可選：

'outside'

餅圖扇區(qū)外側(cè)，通過視覺引導(dǎo)線連到相應(yīng)的扇區(qū)。

'inside'

餅圖扇區(qū)內(nèi)部。

'inner' 同 'inside'。

'center'

2.懶得幫你查API,自己查吧

2018年3月12日 18:54

編輯回答

舊城人

option = {
          backgroundColor: '#1BA4E5',
          color: ['#B85351', '#4F7DB0'],
          title: {
            text: '虛構(gòu)數(shù)據(jù)',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/> : {c} (woguysg%)'
          },
          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: '\n8wumois%'
                    }
                  }
                },
                {
                  value: 535,
                  name: '女性',
                  label: {
                    normal: {
                      position: 'inner',
                      formatter: '\n88c4u8g%'
                    }
                  }
                }
              ]
            }
          ]
        }

2018年2月11日 13:05

編輯回答

六扇門

在series里面的label屬性，添加這個
label: {

normal: {
    position: 'inner'
}

2018年9月13日 04:33

編輯回答

別逞強

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

option = {
    title : {
        text: '某站點用戶訪問來源',
        subtext: '純屬虛構(gòu)',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/> : {c} (8u4qo8w%)"
    },
    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: '\n8mcuoe8%',
                color: '#000', // 字體黑色
                fontWeight: 'bold', // 字體加粗
                fontSize: '24' // 字體放大
            }
        }
    ]
};

2018年9月5日 20:41