工作中遇到要使用甘特图的情况 简单记录下来
代码如下：
html: <div style="width:100%;height:500px" ref="charts2"></div>
js方法：initCharts2 () {
let option = {
// tooltip: {
// trigger: 'axis',
// formatter (params) {
// var arrKey = []
// var arrVale = []
// var res = params[0].name + '</br>'
// for (var i = 0; i < params.length; i++) {
// if (i === 0) continue
// var date0 = params[i - 1].data
// var date1 = params[i].data
// var name = params[i].seriesName
// if (arrKey.length <= 0) {
// arrKey.push(name)
// let html = name + ':</br>' + date0 + '~' + date1 + '</br>'
// arrVale[0] = html
// }
// var add = true
// for (let j = 0; j < arrKey.length; j++) {
// if (name.indexOf(arrKey[j]) >= 0) {
// add = false
// break
// }
// }
// if (add) {
// var index = arrKey.push(name)
// let html = name + ':</br>' + date0 + '~' + date1 + '</br>'
// arrVale[index - 1] = html
// }
// for (let j = 0; j < arrKey.length; j++) {
// if (name !== arrKey[j] && name.indexOf(arrKey[j]) >= 0) {
// let html = ' ' + date0 + '~' + date1 + '</br>'
// arrVale[j] += html
// break
// }
// }
// }
// for (var k = 0; k < arrVale.length; k++) {
// res += arrVale[k]
// }
// return res
// }
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
position: 'top',
// data : ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '0:00'],
splitLine: {
show: false
}
},
color: ['transparent', '#8dbafe'],
dataZoom: [{
type: 'inside',
show: true,
xAxisIndex: [0],
left: 'auto',
top: 0,
start: 0,
end: 100 // 初始化滚动条
}, {
type: 'inside',
yAxisIndex: [0],
start: 50,
end: 100
}],
yAxis: {
type: 'category',
data: ['8号通道', '7号通道', '6号通道', '5号通道', '4号通道', '3号通道', '2号通道', '1号通道'],
splitLine: {
show: true,
lineStyle: {
color: ['#ccc'],
width: 1,
type: 'dash'
}
}
},
series: [
{
name: '起始隐藏线',
type: 'bar',
stack: '总量',
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
normal: {
show: true,
position: 'inside'
},
formatter: '啦啦啦啦啦啦啦'
},
// barMinHeight: 40,
data: [
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05']
},
{
name: '起始时间',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside'
},
formatter: '啦啦啦啦啦啦啦'
},
data: [
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05',
'2017-06-05']
}, {
name: '结束时间',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside'
},
formatter: '啦啦啦啦啦啦啦'
},
data: [
'2017-06-07',
'2017-06-07',
'2017-06-08',
'2017-06-08',
'2017-06-06',
'2017-06-07',
'2017-06-08',
'2017-06-06']
}, {
name: '结束时间2',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside'
},
formatter: '啦啦啦啦啦啦啦sdsdsadsad'
},
data: ['', '', '', '', '', '', '', '', '', '']
}, {
name: '结束时间2',
type: 'bar',
stack: '总量',
label: {
// normal: {
// show: true,
// position: 'inside'
// },
formatter: '啦啦啦啦啦啦啦sdsdsadsad'
},
data: ['', '', '', '', '2017-06-07', '', '', '2017-06-07']
}, {
name: '结束时间3',
type: 'bar',
stack: '总量',
label: {
// normal: {
// show: true,
// position: 'inside'
// },
formatter: '啦啦啦啦啦啦啦sdsdweqwewqewqesadsad'
},
data: ['', '', '', '', '2017-06-08', '', '', '2017-06-08']
}]
}
this.$nextTick(() => {
this.charts2 = this.$echarts.init(this.$refs.charts2).setOption(option)
})
}
这个只能实现不同项目下 开始时间和结束时间 具体某个时间段里面增加数据 无法添加，后期我用highcharts完成了产品的需求，有时间的话 贴上来
