容器
<div id='pm' styel="width:240px;height:270px;"></div>
js
/**
*
* pm2.5
* obj:顏色對象
*/
result = 11;
function pm(result,obj) {
//var myChart = echarts.init(document.getElementById('pm'));
var myChart = echarts.getInstanceByDom(document.getElementById('pm'));
if(!myChart){
myChart = echarts.init(document.getElementById('pm'));
}
var zhishu="";
var zhishucolor='#32CD32';//圓圈顏色
var zhishucolor=obj.line;//圓圈顏色
//var backgroundColor='#21272A';//背景顏色
var backgroundColor=obj.bg;//背景顏色
//var title_color='yellow';//大標題字體顏色
var title_color=obj.title;//大標題字體顏色
var ss=0;
if(result=='0'){
ss =0;
}else{
ss=(result/300)*10;
}
//var ss=(result/300)*10;
var result1= 0;
if(result!=null){
if(result>300){
result1 = 300;
ss=10;
}else{
result1 = result;
}
}
if(result1<=35){
zhishu ="優";
zhishucolor='#018CC5';//圓圈顏色
}else if(result1<=75){
zhishu ="良";
zhishucolor='#74A141';
}else if(result1<=115){
zhishu="輕度污染";
zhishucolor='#F09837';
}else if(result1<=150){
zhishu="中度污染";
zhishucolor='#F09837';
}else if(result1<=250){
zhishu="重度污染";
zhishucolor='#F34B01';
}else{
zhishu="嚴重污染";
zhishucolor='#AA0201';
}
placeHolderStyle = {
normal: {
label: {
show: false,
position: "center"
},
labelLine: {
show: false
},
color: "#2b426e",
borderColor: "#2b426e",
borderWidth: 0,
},
emphasis: {
color: "#2b426e",
borderColor: "#2b426e",
borderWidth: 0
}
};
option = {
backgroundColor: backgroundColor,
series: [{
name: '值',
type: 'pie',
clockWise: true, //順時加載
hoverAnimation: false, //鼠標移入變大
avoidLabelOverlap: false,
/* animationDuration: function (idx) {//初始動畫的時長
// 越往後的數據延遲越大
return idx * 5000;
},*/
radius: [60, 71],//圓環粗細 (寬度)
startAngle:270, // 餅圖起始角度(起始生長位置)
label:{
normal:{
show:false
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
},
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
},
borderWidth: 3,
shadowBlur: 40,
/*borderColor: zhishucolor,//被color漸變替換*/
color: new echarts.graphic.LinearGradient(//環形顏色漸變
0, 0, 1, 0,
[{
offset: 0,
color: '#498bf9'
},
{
offset: 1,
color: '#52d9fd'
}]
),
shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
}
},
data: [{
value: ss,
name: '70%'
}, {
value: 10-ss,
name: '30%',
itemStyle: placeHolderStyle
}]
}, {
name: '白',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: [100, 100],
label: {
normal: {
position: 'center'
}
},
data: [{
value: 1,
label: {
normal: {
formatter: 'PM2.5',
textStyle: {
color: '#8f8f8f',//中間上方字體顏色
fontSize: 20////中間上方字體大小
}
}
}
}, {
tooltip: {
show: false
},
label: {
normal: {
formatter: '\n'+result+'',
textStyle: {
color: '#55f4ff',//中間字體顏色
fontSize: 25//中間字體大小
}
}
}
},{
tooltip: {
show: false
},
label: {
normal: {
formatter: zhishu,
textStyle: {
color: '#8f8f8f',//中間最下放字體顏色
fontSize: 20//中間 最下放字體大小
}
}
}
}]
}]
};
myChart.setOption(option);
return myChart;
}