|
@@ -0,0 +1,191 @@ |
|
|
|
|
|
|
|
|
|
|
|
// filename: gantt.vue |
|
|
|
|
|
// author: liubin |
|
|
|
|
|
// date: 2023 -09 - 25 14: 28: 12 |
|
|
|
|
|
// description: 甘特图 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* |
|
|
|
|
|
* @param {*} params |
|
|
|
|
|
* @param {*} api |
|
|
|
|
|
* |
|
|
|
|
|
* https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params |
|
|
|
|
|
*/ |
|
|
|
|
|
function renderItem(params, api) { } |
|
|
|
|
|
|
|
|
|
|
|
export default class Gantt { |
|
|
|
|
|
constructor(el) { |
|
|
|
|
|
this.chart = echarts.init(el); |
|
|
|
|
|
let options = { |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'custom', |
|
|
|
|
|
coordinateSystem: 'cartesian2d', |
|
|
|
|
|
renderItem: renderItem, |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
this.chart.setOption(options); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
update(options) { |
|
|
|
|
|
this.chart.setOption(options); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
resize() { |
|
|
|
|
|
// todo |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
destroy() { |
|
|
|
|
|
this.chart.dispose(); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var data = []; |
|
|
|
|
|
var categories = ['设备1', '设备2', '设备3']; |
|
|
|
|
|
var types = [ |
|
|
|
|
|
{ name: '运行', color: '#7b9ce1' }, |
|
|
|
|
|
{ name: '故障', color: '#bd6d6c' }, |
|
|
|
|
|
{ name: '停机', color: '#75d874' }, |
|
|
|
|
|
]; |
|
|
|
|
|
// return new Date(new Date(timestamp).toLocaleDateString()).getTime() |
|
|
|
|
|
// })(1691568181000)) |
|
|
|
|
|
function getStartTime(timestamp) { |
|
|
|
|
|
return new Date(new Date(timestamp).toLocaleDateString()).getTime() |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
data.push({ |
|
|
|
|
|
name: 'running', |
|
|
|
|
|
value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60], |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
color: types[0].color |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function renderItem(params, api) { |
|
|
|
|
|
var categoryIndex = api.value(0); |
|
|
|
|
|
var start = api.coord([api.value(1), categoryIndex]); |
|
|
|
|
|
var end = api.coord([api.value(2), categoryIndex]); |
|
|
|
|
|
var height = api.size([0, 1])[1] * 0.8; |
|
|
|
|
|
var rectShape = echarts.graphic.clipRectByRect( |
|
|
|
|
|
{ |
|
|
|
|
|
x: start[0], |
|
|
|
|
|
y: start[1] - height / 2, |
|
|
|
|
|
width: end[0] - start[0], |
|
|
|
|
|
height: height |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
x: params.coordSys.x, |
|
|
|
|
|
y: params.coordSys.y, |
|
|
|
|
|
width: params.coordSys.width, |
|
|
|
|
|
height: params.coordSys.height |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
return ( |
|
|
|
|
|
rectShape && { |
|
|
|
|
|
type: 'rect', |
|
|
|
|
|
transition: ['shape'], |
|
|
|
|
|
shape: rectShape, |
|
|
|
|
|
style: api.style() |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
option = { |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
// show: false, |
|
|
|
|
|
formatter: function (params) { |
|
|
|
|
|
return params.marker + params.name + ': ' + new Date(params.value[1]).toLocaleTimeString() + ' - ' + new Date(params.value[2]).toLocaleTimeString(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
// title: { |
|
|
|
|
|
// text: 'Profile', |
|
|
|
|
|
// left: 'center' |
|
|
|
|
|
// }, |
|
|
|
|
|
// dataZoom: [ |
|
|
|
|
|
// { |
|
|
|
|
|
// type: 'slider', |
|
|
|
|
|
// filterMode: 'weakFilter', |
|
|
|
|
|
// showDataShadow: false, |
|
|
|
|
|
// top: 400, |
|
|
|
|
|
// labelFormatter: '' |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// type: 'inside', |
|
|
|
|
|
// filterMode: 'weakFilter' |
|
|
|
|
|
// } |
|
|
|
|
|
// ], |
|
|
|
|
|
grid: { |
|
|
|
|
|
height: 300 |
|
|
|
|
|
}, |
|
|
|
|
|
xAxis: { |
|
|
|
|
|
type: 'time', |
|
|
|
|
|
min: getStartTime(1691568181000), |
|
|
|
|
|
max: getStartTime(1691568181000 + 3600 * 24 * 1000), |
|
|
|
|
|
splitNumber: 10, |
|
|
|
|
|
// interval: 60*3600*1000, |
|
|
|
|
|
// scale: true, |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
// rotate: -15, |
|
|
|
|
|
formatter: function (val) { |
|
|
|
|
|
return new Date(val).toLocaleTimeString() |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
axisTick: { |
|
|
|
|
|
show: true |
|
|
|
|
|
}, |
|
|
|
|
|
splitLine: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
yAxis: [{ |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
// show: false, |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: '' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
fontSize: 14, |
|
|
|
|
|
}, |
|
|
|
|
|
axisTick: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
}, |
|
|
|
|
|
splitLine: { |
|
|
|
|
|
show: true |
|
|
|
|
|
}, |
|
|
|
|
|
data: categories |
|
|
|
|
|
}, { |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
// show: false, |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: '' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
data: [] |
|
|
|
|
|
}], |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
type: 'custom', |
|
|
|
|
|
renderItem: renderItem, |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
opacity: 0.8 |
|
|
|
|
|
}, |
|
|
|
|
|
encode: { |
|
|
|
|
|
x: [1, 2], |
|
|
|
|
|
y: 0 |
|
|
|
|
|
}, |
|
|
|
|
|
data: data |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
}; |