1. 程式人生 > >echart餅狀圖上顯示百分比

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:'搜尋引擎'}
            ]
        }
    ]

因為沒有仔細看版本,糾結了好半天寫法,果然學前端最重要的就是:認真看文件,認真看文件,認真看文件!重要的事情說三遍!!!