<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<style></style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:460px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var PM_value = 80;//真实值，可以变化
var rightColor = '';
var PM_txt = '';
var boxPosition = [100, 0];
if(PM_value > 100) {
rightColor = '#DF2229';
PM_txt = '空气污染';
} else if(PM_value > 50) {
rightColor = '#E5EB25';
PM_txt = '空气良好';
} else {
rightColor = '#5BB927';
PM_txt = '空气清新';
boxPosition = [100, -120];
}
if(PM_value > 150) {
PM_value = 150;
}
var option = {
backgroundColor: '#0C2F6F',
title: {
text: 'pm2.5',
show: false
},
yAxis: [{
show: false,
min: 0,
max: 151,
axisLine: {
show: false
},
}, {
show: true,
type: 'category',
data: ['0-50', '50-100', '100以上'],
position: 'left',
offset: -10,
axisLabel: {
fontSize: 10,
color: 'white'
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}, {
type: 'category',
data: ['', '', '', '', '', '', '', '', '', '', 'mg/m³'],
position: 'left',
offset: -110,
axisLabel: {
fontSize: 10,
color: 'white'
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
xAxis: [{
show: false,
min: -10,
max: 80,
data: []
}, {
show: false,
min: -10,
max: 80,
data: []
}, {
show: false,
min: -10,
max: 80,
data: []
}, {
show: false,
min: -5,
max: 80,
}],
series: [{
name: 'green',
type: 'bar',
data: [50],
stack: 'a',
barWidth: 40,
itemStyle: {
normal: {
color: '#308568',
barBorderRadius: 10
}
}
}, {
name: 'yellow',
type: 'bar',
data: [50],
stack: 'a',
barWidth: 40,
itemStyle: {
normal: {
color: '#717C3F',
barBorderRadius: 10
}
}
}, {
name: 'red',
type: 'bar',
data: [50],
stack: 'a',
barWidth: 40,
itemStyle: {
normal: {
color: '#663056',
barBorderRadius: 10
}
}
}, {
name: 'show',
type: 'bar',
barGap: '-100%',
data: [{
value: PM_value,
label: {
normal: {
show: true,
position: boxPosition,
backgroundColor: {
image: 'plugin/subway_beijing/images/power/bg5Valuebg.png',
},
width: 200,
height: 100,
formatter: '{back| ' + PM_value + ' }{unit|mg/m³}\n{downTxt|' + PM_txt + '}',
rich: {
back: {
align: 'center',
lineHeight: 50,
fontSize: 40,
fontFamily: 'digifacewide',
color: rightColor
},
unit: {
fontFamily: '微软雅黑',
fontSize: 15,
lineHeight: 50,
color: rightColor
},
downTxt: {
lineHeight: 50,
fontSize: 25,
align: 'center',
color: '#fff'
}
}
}
}
}],
barWidth: 40,
itemStyle: {
normal: {
color: rightColor,
barBorderRadius: 10,
}
}
}, {
name: '透明框',
type: 'bar',
xAxisIndex: 1,
barGap: '-100%',
data: [150],
barWidth: 50,
itemStyle: {
normal: {
color: '#0C2E6D',
barBorderRadius: 10,
}
},
z: 1
}, {
name: '外框',
type: 'bar',
xAxisIndex: 2,
barGap: '-100%',
data: [151],
barWidth: 60,
itemStyle: {
normal: {
color: '#4577BA',
barBorderRadius: 10,
}
},
z: 0
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
