echarts 之（2）環形圖 屬性
阿新 • • 發佈：2019-02-03
<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>