构建容器
<div id="main"></div>
封装函数
// 基于准备好的dom，初始化echarts实例;
function makeBar(dataList, level, colorList, id) {
var myChart = echarts.init(document.getElementById(id));
option = {
tooltip: {
trigger: 'none'
},
xAxis: {
data: [''],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
name: '最上层立体圆',
type: 'pictorialBar',
animation: false,
symbolSize: [300, 45],
symbolOffset: [0, -20],
z: 12,
itemStyle: {
normal: {
color: '#363F5E'
}
},
data: [{
value: 100,
symbolPosition: 'end'
}]
}, {
name: '中间立体圆',
animation: false,
type: 'pictorialBar',
symbolSize: [300, 45],
symbolOffset: [0, -20],
z: 12,
itemStyle: {
normal: {
color: colorList
}
},
data: [{
value: dataList,
symbolPosition: 'end'
}]
}, {
name: '最底部立体圆',
animation: false,
type: 'pictorialBar',
symbolSize: [300, 45],
symbolOffset: [0, 20],
z: 12,
itemStyle: {
normal: {
color: colorList
}
},
data: [100 - dataList]
}, {
//底部立体柱
stack: '1',
animation: false,
type: 'bar',
itemStyle: {
normal: {
color: colorList,
opacity: .7
}
},
label: {
show: true,
position: 'inside',
color: "#FFFE00",
fontSize: 50,
formatter: function () {
return level + " 米";
}
},
silent: true,
barWidth: 300,
barGap: '-100%', // Make series be overlap
data: [dataList]
}, {
//上部立体柱
stack: '1',
type: 'bar',
animation: false,
itemStyle: {
normal: {
color: '#36405E',
opacity: .7
}
},
silent: true,
barWidth: 300,
barGap: '-100%', // Make series be overlap
data: [100 - dataList]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
颜色函数
//获取背景色;
function getBgColor(num) {
var min = '1', max = '2';
if (num > max) {
return '#DB2F2C'
}
if (num >= min && num <= max) {
return '#438a7a'
}
if (num < min) {
return '#3EC6F0'
}
}
调用函数
//设备高度;
var towerHight = 3;
var timerKpi;
var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
if (level >= 3) {
level = 2.99;
}
var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
//渲染图表;
makeBar(dataList, level, getBgColor(level), "main");
clearInterval(timerKpi);
setInterval(function () {
var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
if (level >= 3) {
level = 2.99;
}
var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
//渲染图表;
makeBar(dataList, level, getBgColor(level), "main");
}, 3000);
lockdatav done!
