如图:
bar.png
html
<div id="gatechart1" style="width:90%;height:200px;">
<script>
setechart(id, xdata, gateStresslist, ntype) { // 柱形图
var myChart = echarts.init(document.getElementById(id));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
// legend: {
// data: ['安全', '超负', '破坏']
// },
grid: {
left: '10%',
right: '12%',
top: '10%',
bottom: '20%',
containLabel: false
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
lineStyle: { //坐标轴颜色
color: '#018baf',
}
},
axisLabel: { //坐标轴字体倾斜
interval: 0, //但是为了掩饰需要注释掉倾斜,当真正的为时间的时候需要倾斜
// rotate: 25 //但是为了掩饰需要注释掉倾斜,当真正的为时间的时候需要倾斜
},
data: xdata
// (function () {
// var now = new Date();
// var res = [];
// var len = 12;
// while (len--) {
// res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
// now = new Date(now - 2000);
// }
// return res;
// })()
// data : ['周一','周二','周三','周四','周五','周六','周日']
}],
yAxis: [{
// name:'百分比',
type: 'value',
splitLine: {
show: false, //控制网格线是否显示
lineStyle: {
color: ['#018baf'] //控制网格线颜色
}
},
axisLine: {
lineStyle: { //控制坐标轴颜色
color: '#018baf',
}
},
min: -0.50,
max: 0.50,
interval: 0.15,
}
],
series: [{
name: '安全',
// type: 'bar',
type: ntype,
barWidth: 10,
itemStyle: {
normal: {
// color: '#00ffea', // 柱状图的颜色
color: function (params) { //根据数值大小显示柱状图的颜色,同一类
var index_color = params.value;
if (Math.abs(index_color) >= 0 && Math.abs(index_color) < 0.25) {
return '#00ffea';
} else if (Math.abs(index_color) >= 0.25 && Math.abs(index_color) < 0.4) {
return '#f3ff68';
} else if (Math.abs(index_color) >= 0.4 && Math.abs(index_color) < 0.5) {
return '#bf5aff';
}
},
// color: function () {
// // for(var ite of gateStresslist){
// // if(ite>0.3){
// // return 'red'
// // }else{
// // return '#00ffea'
// // }
// // }
// // gateStresslist
// // return 'red'
// return '#00ffea'
// }
}
},
label: {
normal: {
show: true,
position: 'inside',
color: 'red'
}
},
// data:[0.200, 0.170, 0.240, 0.244, 0.200, 0.220, 0.210]
data: gateStresslist
}, ]
};
//======== start 这个是实时函数,根据当前时间一直改变横为当前时间轴时间点段范围,及柱形图的数据也会随机变化,但是为展示需要注释掉让其显示静态
setInterval(function () {
var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
var data0 = option.series[0].data;
data0.shift();
// var that = this
data0.push((Math.random() - 0.5).toFixed(2));
// that.sernum++
// if (that.sernum) {
// that.sernum=!that.sernum
// data0.push((Math.random() * 0.5).toFixed(2));
// // data0.push((parseFloat( (Math.random() * 0.5).toFixed(2))).toString());
// } else {
// that.sernum=!that.sernum
// data0.push(-(Math.random() * 0.5).toFixed(2));
//data0.push((-parseFloat( (Math.random() * 0.5).toFixed(2))).toString());
//}
// option.xAxis[0].data.shift(); //这个就是实时改变当前时间每添加一个新时间前除去一个旧时间
// option.xAxis[0].data.push(axisData);// 这个就是实时改变当前时间
myChart.setOption(option);
}, 2100);
//======== end 这个是实时函数,根据当前时间一直改变横为当前时间轴时间点段范围,及柱形图的数据也会随机变化,但是为展示需要注释掉让其显示静态
myChart.setOption(option);
}
//this.setechart('gatechart1', this.xdata(12), this.gateStress(12), 'bar') // 实时 动态的,根据当前时间
// setechart('gatechart2', this.xdata(9), this.gateStress(9), 'bar') // 实时 动态的,根据当前时间
var xdataone = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
datatwo = [1, 2, 3, 4, 5, 6, 7, 8, 9],
gateStressone = [0.20, 0.37, 0.24, -0.24, 0.20, -0.22, 0.21, -0.48, 0.11, -0.18, 0.17, 0.24],
gateStresstwo = [-0.24, 0.20, -0.22, 0.21, -0.38, 0.11, -0.18, 0.17, 0.44];
setechart('gatechart1', xdataone, this.gateStress(12), 'bar') // 实时 动态的,根据当前时间
setechart('gatechart2', datatwo, this.gateStress(9), 'bar') // 实时 动态的,根据当前时间
// setechart('gatechart1', xdataone, gateStressone, 'bar') // 静态的 为展示效果
// setechart('gatechart2', datatwo, gateStresstwo, 'bar') // // 静态的 为展示效果
</script>
网友评论