echarts之（2）环形图属性
<script type="text/javascript">
var imgUrl = null;
var fileLocation ='${NewechartsPath}/echarts';
paths:{
echarts: fileLocation,
}
});
// 作为⼊⼝
require(
[
'echarts',
'echarts/chart/pie'//引⼊需要的jar包
],
myPieChart
);
var echarts;
var pieChart;
function myPieChart(ec) {
//柱状图
echarts = ec;
var a =ElementById('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 = DataURL());
}
//获得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 : [htmlborder
{
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 = placeAll('"','');
graphStyleB = placeAll('"','');
graphStyleC = placeAll('"','');
graphStyleD = placeAll('"','');
graphStyleE = placeAll('"','');
//柱状图
var asd =ElementById('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 = DataURL());
}
placeAll = function(s1,s2){
place(new RegExp(s1,"gm"),s2);
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。