191 lines
4.1 KiB
JavaScript
191 lines
4.1 KiB
JavaScript
|
|
// 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
|
|
}
|
|
]
|
|
}; |