容器
<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;
}