echart餅狀圖上顯示百分比

效果如下：

echart 3.0寫法：

option = {
    //提示框組件,鼠標移動上去顯示的提示內容
    tooltip: {
       trigger: 'item',
       formatter: "{a} <br/>{b}: {c} ({d}%)"//模板變量有 {a}、{b}、{c}、{d}，分別表示系列名，數據名，數據值，百分比。
    },
    //圖例
    legend: {
        //圖例垂直排列
        orient: 'vertical',
        x: 'left',
        //data中的名字要與series-data中的列名對應，方可點擊操控
        data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
    },
    series: [
        {
            name:'訪問來源',
            type:'pie',
            //餅狀圖
           // radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            //標籤
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{d}%',//模板變量有 {a}、{b}、{c}、{d}，分別表示系列名，數據名，數據值，百分比。{d}數據會根據value值計算百分比

                   textStyle : {                   
                    align : 'center',
                    baseline : 'middle',
                    fontFamily : '微軟雅黑',
                    fontSize : 15,
                    fontWeight : 'bolder'
                 }
                },
            },
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

echart 2.0寫法：

    //其餘部分相同，label部分有所區別,在2.0中label是itemStyle的一項屬性
    series: [
        {
            name:'訪問來源',
            type:'pie',
            //餅狀圖
           // radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            //標籤
            itemStyle : {
                normal : {
                    label:{
                        show : true,
                        position : 'inner',
                        formatter: '{d}%',
                        distance : 0.7 //這項是標識距離中心點的距離
                        textStyle : {                   
                            align : 'center',
                            baseline : 'middle',
                            fontFamily : '微軟雅黑',
                            fontSize : 15,
                            fontWeight : 'bolder'
                         }
                    },
                    labelLine:{
                        show : false
                    }
                }
            },
            data:[
                {value:335, name:'直接訪問'},
                {value:310, name:'郵件營銷'},
                {value:234, name:'聯盟廣告'},
                {value:135, name:'視頻廣告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]

因爲沒有仔細看版本，糾結了好半天寫法，果然學前端最重要的就是：認真看文檔，認真看文檔，認真看文檔！重要的事情說三遍！！！

另外推薦2個官網網站，可以實施編輯echart，非常方便：
這是echart3.0：
http://www.echartsjs.com/gallery/editor.html?c=pie-doughnut，
這是echart2.0:
http://echarts.baidu.com/echarts2/doc/example.html