//计算两个日期相差天数
function DateDiff(sDate1, sDate2) {
//sDate1和sDate2是2006-12-18格式
var aDate, oDate1, oDate2, iDays
aDate = sDate1.split('-')
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
aDate = sDate2.split('-')
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数
return iDays
}
//获得两个日期间所有日期-fn1
Date.prototype.format = function() {
var s = ''
var mouth =
this.getMonth() + 1 >= 10
? this.getMonth() + 1
: '0' + (this.getMonth() + 1)
var day = this.getDate() >= 10 ? this.getDate() : '0' + this.getDate()
s += this.getFullYear() + '-' // 获取年份。
s += mouth + '-' // 获取月份。
s += day //获取日。
return s //返回日期。
}
//获得两个日期间所有日期-fn2
function getAll(begin, end) {
var return_ = []
var ab = begin.split('-')
// console.log(ab, 1111)
var ae = end.split('-')
// console.log(ae, 2222)
// var aaa = new Date()
// console.log(aaa.setUTCFullYear(1992))
var db = new Date()
db.setUTCFullYear(ab[0], ab[1] - 1, ab[2])
// console.log(db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]), 3333)
var de = new Date()
de.setUTCFullYear(ae[0], ae[1] - 1, ae[2])
// console.log(de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]), 4444)
var unixDb = db.getTime()
// console.log(unixDb, 5555)
var unixDe = de.getTime()
// console.log(unixDe, 6666)
for (var k = unixDb; k <= unixDe; ) {
// console.log(new Date(parseInt(k)).format())
return_.push(new Date(parseInt(k)).format())
k = k + 24 * 60 * 60 * 1000
}
return return_
}
var dataa = [
{
name: '某余热发电项目',
startTime: '2016-05-12',
latestTime: '2017-06-19'
},
{
name: '某8MW光伏发电项目',
startTime: '2017-05-14',
latestTime: '2017-12-17'
},
{
name: '某陶瓷公司设备改造项目',
startTime: '2018-02-14',
latestTime: '2018-09-17'
},
{
name: '某10MW太阳能发电项目',
startTime: '2018-02-14',
latestTime: '2018-07-17'
},
{
name: '某造纸厂设备改造项目',
startTime: '2016-06-14',
latestTime: '2018-12-17'
},
{
name: '某纺织厂光伏发电项目',
startTime: '2018-01-14',
latestTime: '2019-12-17'
},
{
name: '某点击改造项目',
startTime: '2017-11-14',
latestTime: '2018-10-17'
},
{
name: '某光伏发电示范项目',
startTime: '2018-04-14',
latestTime: '2019-12-17'
}
]
var start_ = '2016-05-12',
end_ = '2019-12-17' //用户自定义时间
var data$ = DateDiff(start_, end_) //用户自定义的时间长度
// console.log(data$)
var data1 = DateDiff(start_, dataa[0].startTime) //项目a 起始位置
var data1_1 = DateDiff(dataa[0].startTime, dataa[0].latestTime) //项目a 持续时间
var data2 = DateDiff(start_, dataa[1].startTime) //项目b 起始位置
var data2_1 = DateDiff(dataa[1].startTime, dataa[1].latestTime) //项目b 持续时间
var data3 = DateDiff(start_, dataa[2].startTime)
var data3_1 = DateDiff(dataa[2].startTime, dataa[2].latestTime)
var data4 = DateDiff(start_, dataa[3].startTime)
var data4_1 = DateDiff(dataa[3].startTime, dataa[3].latestTime)
var data5 = DateDiff(start_, dataa[4].startTime)
var data5_1 = DateDiff(dataa[4].startTime, dataa[4].latestTime)
var data6 = DateDiff(start_, dataa[5].startTime)
var data6_1 = DateDiff(dataa[5].startTime, dataa[5].latestTime)
var data7 = DateDiff(start_, dataa[6].startTime)
var data7_1 = DateDiff(dataa[6].startTime, dataa[6].latestTime)
var data8 = DateDiff(start_, dataa[7].startTime)
var data8_1 = DateDiff(dataa[7].startTime, dataa[7].latestTime)
x_ = getAll(start_, end_)
// console.log(x_)
var myChart = echarts.init(document.getElementById('main'))
var option = {
title: {
text: '项目监测预警表',
x: 'center'
},
legend: {
y: 'bottom',
data: ['时长'] //和series配置项里面的name一一对应
},
grid: {
containLabel: true,
left: 20
},
xAxis: {
type: 'value',
max: data$,
axisLabel: {
formatter: function(value, index) {
// console.log(value, index)
// console.log(x_)
return x_[value]
}
}
},
yAxis: {
type: 'category',
splitLine: { show: false },
data: [
'某余热发电项目',
'某8MW光伏发电项目',
'某陶瓷公司设备改造项目',
'某10MW太阳能发电项目',
'某造纸厂设备改造项目',
'某纺织厂光伏发电项目',
'某电机改造项目',
'某光伏发电示范项目'
]
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
// console.log(params)
var tar = params[1]
// console.log(tar.value)
return (
tar.name +
'<br/>' +
// tar.seriesName +
' 总共耗时为：' +
tar.value +
'小时'
)
}
},
series: [
{
name: '辅助',
type: 'bar',
stack: '时间',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [data1, data2, data3, data4, data5, data6, data7, data8]
},
{
//每个项目 持续时间长度
name: '时长',
type: 'bar',
stack: '时间',
label: {
normal: {
show: true,
position: 'inside'
}
},
itemStyle: {
color: function(params) {
// console.log(params)
if (params.value < 200) {
return '#4382EB'
}
if (params.value > 200 && params.value < 600) {
return '#00FF05'
}
if (params.value > 600) {
return '#FF2F35'
}
}
},
data: [
data1_1,
data2_1,
data3_1,
data4_1,
data5_1,
data6_1,
data7_1,
data8_1
]
}
]
}
myChart.setOption(option)
该配置适用于改变每个柱子的颜色的不同，比如某一个时间段的值大于或者小于某一个基准值，不同的情况柱子颜色不一样，可以直观看到效果，当然这些都是静态数据写死了，如果是发送ajax请求的数据可以看着在每一项里面去添加，柱子的颜色由series配置项里面的itemStyle控制，可以自己去定义基准值
