echarts 之（2）环形图 属性

<script type="text/javascript">
    var imgUrl = null;
    var fileLocation ='${NewechartsPath}/echarts';
        require.config({
              paths:{ 
                 echarts: fileLocation,
                }
        });
    // 作为入口
    require(
        [
            'echarts',
            'echarts/chart/pie'//引入需要的jar包
        ],  
        myPieChart    
    );
    var echarts;
    var pieChart;
function myPieChart(ec) {
    //柱状图
    echarts = ec;
    var a =document.getElementById('pie');
    var pieChart = ec.init(a);      
    var pieChartOtion = getPieChartOption(${a},${b},${c},${d},${e},${aSla},${fSla},${sSla},${graphStyleA},${graphStyleB},${graphStyleC},${graphStyleD},${graphStyleE},"${title2}","${title1}"); 
    pieChart.setOption(pieChartOtion);
    imgUrl = encodeURIComponent(pieChart.getDataURL());
}   
    //获得bar图的选项和数据
    function getPieChartOption(a,b,c,d,e,aSla,fSla,sSla,graphStyleA,graphStyleB,graphStyleC,graphStyleD,graphStyleE,MainTitle,newbiaoti){//从后台传过来的参数
        var labelTop = {//上层样式
                normal : {
                    color :'#0099cc',
                    label : {
                        show : true,
                        position : 'center',
                        formatter : '{b}',
                        textStyle: {
                            baseline : 'bottom'
                        }
                    },
                    labelLine : {
                        show : false
                    }
                }
            };
          var labelFromatter = {//环内样式
            normal : {//默认样式
                label : {//标签
                    formatter : function (a,b,c){return 100 - c + '%'},
                   // labelLine.length：30,  //线长，从外边缘起计算，可为负值
                    textStyle: {//标签文本样式
                        color:'black',
                        align :'center',
                        baseline : 'top'//垂直对其方式
                    }
                }
            },
          };
        var labelBottom = {//底层样式
            normal : {
                color: '#99ccff',
                label : {
                    show : true,
                    position : 'center'
                },
                labelLine : {
                    show : false
                }
            },
            emphasis: {//悬浮式样式
                color: 'rgba( 0,0,0,0)'
            }
        };
        var radius = [42,65];// 半径[内半径，外半径]


    var pieChartOption = {
        title : {
                text: MainTitle,
                subtext: newbiaoti,     
                    x:'center',
                    //正标题样式
                    textStyle: {
                          fontSize:24,
                          fontFamily:'Arial',
                          fontWeight:100,
                          //color:'#1a4eb0',
                    },
                    //副标题样式
                    subtextStyle: {
                          fontSize:18,
                          fontFamily:'Arial',
                          color:"#1a4eb0",  
                        },
        },
        animation:false,
        tooltip : {         // 提示框. Can be overwrited by series or data
            trigger: 'axis',
            //show: true,   //default true
            showDelay: 0,
            hideDelay: 50,
            transitionDuration:0,
            borderRadius : 8,
            borderWidth: 2,
            padding: 10,    // [5, 10, 15, 20]
        },
        series : [
            {
                type : 'pie',
                center : ['33.5%', '40%'],//圆心坐标（div中的%比例）
                radius : radius,//半径
                x: '0%', // for funnel
                itemStyle : graphStyleA=='labelTop'?labelTop:labelFromatter,//graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏
                data : [
                    {name:'当日完成', value:a,itemStyle : labelTop},
                    {name:'', value:100-(a*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['68.5%', '40%'],
                radius : radius,
                x:'20%', // for funnel
                itemStyle : graphStyleB=='labelTop'?labelTop:labelFromatter,//graphStyleB,// 当查到的数据不存在（并非为0），此属性隐藏
                tooltip : {             // Series config.
                    trigger: 'item',
                    position:['810','120'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '全流程服务时长2小时内达标'
                },
                data : [
                    {name:'全流程', value:b,itemStyle : labelTop},
                    {name:'', value:100-(b*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['15%', '78%'],
                radius : radius,
                x:'40%', // for funnel
                itemStyle : graphStyleC=='labelTop'?labelTop:labelFromatter,//graphStyleC,// 当查到的数据不存在（并非为0），此属性隐藏
                tooltip : {             // Series config.
                    trigger: 'item',
                    position:['350','260'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '评估SLA标准'+aSla+'分钟'
                },
                data : [
                    {name:'评估', value:c,itemStyle : labelTop},
                    {name:'', value:100-(c*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['50%', '78%'],
                radius : radius,
                x:'60%', // for funnel
                itemStyle : graphStyleD=='labelTop'?labelTop:labelFromatter,//graphStyleD,// 当查到的数据不存在（并非为0），此属性隐藏
                tooltip : {             // Series config.
                    trigger: 'item',
                    position:['630','260'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '面审SLA标准'+fSla+'分钟'
                },
                data : [
                    {name:'面审', value:d,itemStyle : labelTop},
                    {name:'', value:100-(d*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['85%', '78%'],
                radius : radius,
                x:'80%', // for funnel
                itemStyle : graphStyleE=='labelTop'?labelTop:labelFromatter,//graphStyleE,  // 当查到的数据不存在（并非为0），此属性隐藏
                tooltip : {             // 鼠标--悬浮
                    trigger: 'item',
                    position:['680','260'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '合同SLA标准'+sSla+'分钟'
                },
                data : [
                    {name:'合同', value:e,itemStyle : labelTop},
                    {name:'', value:100-(e*1), itemStyle : labelBottom}
                      ]
                }
        ]


};
return pieChartOption;
}
function myPieChart2(a,b,c,d,e,aSla,fSla,sSla,graphStyleA,graphStyleB,graphStyleC,graphStyleD,graphStyleE,MainTitle,newbiaoti) {
    a = a.replaceAll('"','');
    b = b.replaceAll('"','');
    c = c.replaceAll('"','');
    d = d.replaceAll('"','');
    e = e.replaceAll('"','');
    graphStyleA = graphStyleA.replaceAll('"','');
    graphStyleB = graphStyleB.replaceAll('"','');
    graphStyleC = graphStyleC.replaceAll('"','');
    graphStyleD = graphStyleD.replaceAll('"','');
    graphStyleE = graphStyleE.replaceAll('"','');
    //柱状图
    var asd =document.getElementById('pie');
    var pieChart = echarts.init(asd);       
    var pieChartOtion = getPieChartOption(a,b,c,d,e,aSla,fSla,sSla,graphStyleA,graphStyleB,graphStyleC,graphStyleD,graphStyleE,MainTitle,newbiaoti);    
    pieChart.setOption(pieChartOtion);
    imgUrl = encodeURIComponent(pieChart.getDataURL());
}
String.prototype.replaceAll = function(s1,s2){
    return this.replace(new RegExp(s1,"gm"),s2);
};
</script>