餅圖type=pie參數說明

餅圖帶入：

<script src="js/dist/echarts-all.js"></script>
<div id="mianw" style="height:400px;"></div>
<script type="text/javascript">
        // 基於准備好的dom，初始化echarts圖表
        var mymianw = echarts.init(document.getElementById('mianw')); 
        
        var option = {
           tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            calculable : false,
            series : [
            {
            name:'訪問來源',
            type:'pie',
            radius : ['30%', '55%'],
            center: ['50%', '50%'],
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner',
                        formatter : function (params) {                         
                          return (params.percent - 0).toFixed(0) + '%'
                        }
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true,
                        formatter : "{b}\n{d}%"
                    }
                }
                
            },
            data:[
                {value:780, name:'客勝'},
                {value:1365, name:'主勝'}
            ]
        }
    ]
};
                  
        // 為echarts對象加載數據 
        mymianw.setOption(option); 
    </script>

參數說明：

tooltip：提示框組件；

第一方式：tooltip參數說明：

tooltip：{
   show:true,   //默認true,是否顯示提示框組件，包括提示框浮層
   trigger:'item',   //數據項圖形觸發，主要在餅圖等無類目軸的圖表中使用
   formatter: "{a} <br/>{b} : {c} ({d}%)",   //提示框浮層內容格式器，支持字符串模板和回調函數兩種方式，餅圖：{a}（系列名稱），{b}(數據項名稱)，{c}(數值)，{d}(百分比)
   backgroundColor:"#f00",   //提示框浮層的背景顏色
   
}

tooltip-show說明：當show=false時候，提示框消失；

tooltip-backgroundColor說明：當backgroundColor="#f00"時候，背景顏色變化；

tooltip-formatter提示框浮層說明：（字符串模板）

formatter: "{a} <br/>{b} : {c} ({d}%)"

tooltip-formatter提示框浮層說明：（回調函數方式）

tooltip: {
  trigger: 'axis',
  formatter:function(params){
     var arr=[
         ''+params[0].name+' <br />',
         '<span style="display:inline-block; margin-right:5px; color:'+params[0].color+'">●</span>'+params[0].seriesName+'：'+params[0].value+' ('+num_per_down[params[0].dataIndex]+'%) <br />',
         '<span style="display:inline-block; margin-right:5px; color:'+params[1].color+'">●</span>'+params[1].seriesName+'：'+params[1].value+' ('+num_per_up[params[1].dataIndex]+'%)'
         ];
         return arr.join('\n')
  },
  rich:{},
  axisPointer: {            // 坐標軸指示器，坐標軸觸發有效
     type: 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
  }
},

tooltip.formatter 文字來自：http://echarts.baidu.com/option.html#tooltip.formatter

第二種方式：series系列參數說明：

series：[
    {
       type:'pie',    //餅圖類型
       name:'訪問來源',   //系列名稱，用於tooltip的顯示；
       radius:['30%','50%'],  //餅圖的半徑，數組的第一項是內半徑，第二項是外半徑，支持設置成百分比，相對於容器高寬中較小的一項的一半；
       radius:'55%', //也可以這樣設置是一個實心圓
       center:['25%','40%'],   //餅圖的中心(圓心)坐標，數組的第一項是橫坐標，第二項是縱坐標，支持設置百分比，設置成百分比時第一項是相對於容器寬度，第二項是相對於容器高度；
    }
]

series-radius= ['30%','50%']時候，是圖一，當series-radius='55%'時候，是圖二；

serier-center

 

 

 

 

 

 

 

 

eCharts 3.0插件參數說明：http://echarts.baidu.com/option.html#tooltip.backgroundColor