饼图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