|
|
@@ -42,12 +42,14 @@ |
|
|
|
width: end[0] - start[0], |
|
|
|
height: height, |
|
|
|
}, |
|
|
|
// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行... |
|
|
|
// 截取矩形 |
|
|
|
{ |
|
|
|
// 截取掉grid以外的部分,实质是计算方块的偏移量 |
|
|
|
x: params.coordSys.x, // {number} grid rect 的 x |
|
|
|
// y: params.coordSys.y, // {number} grid rect 的 y |
|
|
|
y: params.coordSys.y - 16, // {number} grid rect 的 y,并多减掉 16 个单位 |
|
|
|
// width: end[0] - start[0], |
|
|
|
width: params.coordSys.width, // {number} grid rect 的 width |
|
|
|
height: params.coordSys.height, // {number} grid rect 的 height |
|
|
|
} |
|
|
@@ -94,7 +96,7 @@ |
|
|
|
|
|
|
|
const option = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
trigger: 'item', |
|
|
|
axisPointer: { |
|
|
|
type: 'none', |
|
|
|
// label: { |
|
|
@@ -110,9 +112,13 @@ |
|
|
|
// <span>${params[0].name}</span> |
|
|
|
// </div> |
|
|
|
// ` |
|
|
|
console.log(params) |
|
|
|
return ` |
|
|
|
<h1 style="font-size: 18px; font-weight: 600; letter-spacing: 1px;">${params[0].name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params[0].color} "></span></h1> |
|
|
|
<div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div> |
|
|
|
<div style="display: flex; align-items: center; justify-content: space-between"> |
|
|
|
<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1> |
|
|
|
<h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2> |
|
|
|
</div> |
|
|
|
<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div> |
|
|
|
` |
|
|
|
} |
|
|
|
}, |
|
|
@@ -129,10 +135,18 @@ |
|
|
|
// top: 80, |
|
|
|
// height: 56, |
|
|
|
// }, |
|
|
|
// ***************** 添加第二个grid ***************** |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
top: 180, |
|
|
|
left: 128, |
|
|
|
right: 64, |
|
|
|
height: 56 |
|
|
|
} |
|
|
|
], |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
id: 0, |
|
|
|
id: 'asdf', |
|
|
|
gridIndex: 0, |
|
|
|
axisTick: { |
|
|
|
alignWithLabel: true, |
|
|
@@ -157,11 +171,43 @@ |
|
|
|
// data: getXaxisRange(getTodayStart(new Date())), |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
id: 'asdff', |
|
|
|
gridIndex: 0, |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisLine: { show: false }, |
|
|
|
}, |
|
|
|
// ***************** 添加第二个 xAxis ***************** |
|
|
|
{ |
|
|
|
id: 'asdfjk', |
|
|
|
gridIndex: 1, |
|
|
|
axisTick: { |
|
|
|
alignWithLabel: true, |
|
|
|
inside: true, |
|
|
|
}, |
|
|
|
type: 'time', |
|
|
|
min: getTodayStart(new Date()), // <=== |
|
|
|
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <=== |
|
|
|
splitNumber: 10, |
|
|
|
axisLabel: { |
|
|
|
margin: 12, |
|
|
|
// rotate: -15, |
|
|
|
formatter: function (val) { |
|
|
|
return new Date(val) |
|
|
|
.toLocaleTimeString() |
|
|
|
.split(':') |
|
|
|
.slice(0, 2) |
|
|
|
.join(':'); |
|
|
|
}, |
|
|
|
}, |
|
|
|
boundaryGap: false, |
|
|
|
// data: getXaxisRange(getTodayStart(new Date())), |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 'fjkd', |
|
|
|
gridIndex: 1, |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisLine: { show: false }, |
|
|
|
}, |
|
|
|
], |
|
|
|
yAxis: [ |
|
|
|
// 主y轴 |
|
|
@@ -193,6 +239,35 @@ |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisTick: { show: false }, |
|
|
|
}, |
|
|
|
// ***************** 添加第二个 yAxis ***************** |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
gridIndex: 1, |
|
|
|
type: 'value', |
|
|
|
splitLine: { show: false }, |
|
|
|
name: '设备1', |
|
|
|
nameLocation: 'center', |
|
|
|
nameGap: 56, |
|
|
|
nameRotate: 0, |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 18, |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: {}, |
|
|
|
}, |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisTick: { show: false }, |
|
|
|
}, |
|
|
|
// 辅y轴 |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
gridIndex: 1, |
|
|
|
type: 'value', |
|
|
|
splitLine: { show: false }, |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisTick: { show: false }, |
|
|
|
}, |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
@@ -208,13 +283,87 @@ |
|
|
|
x: [1, 2], |
|
|
|
y: 0, |
|
|
|
}, |
|
|
|
//function getTimestamp(point) { |
|
|
|
// const t = new Date(); |
|
|
|
// const [y,m,d] = [t.getFullYear(),t.getMonth(),t.getDate()] |
|
|
|
// const [h,M] = point.split(':') |
|
|
|
// return new Date(y,m,d,h,M,0,0).getTime() |
|
|
|
//} |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696694400000, 1696699400000, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: types[0].color, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696730000000, 1696734040450, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: types[0].color, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '故障', |
|
|
|
value: [0, 1696737040000, 1696754040450, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: types[1].color, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '计划停机', |
|
|
|
value: [0, 1696755000000, 1696759000000, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: types[2].color, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696759000000, 1696769000000, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: types[0].color, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '计划停机', |
|
|
|
value: [0, 1696769400000, 1696779000000, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: types[2].color, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
// ***************** 添加第二个设备 ***************** |
|
|
|
{ |
|
|
|
name: '设备2', |
|
|
|
xAxisIndex: 2, |
|
|
|
yAxisIndex: 2, |
|
|
|
type: 'custom', |
|
|
|
renderItem: renderItem, |
|
|
|
itemStyle: { |
|
|
|
opacity: 0.8, |
|
|
|
}, |
|
|
|
encode: { |
|
|
|
x: [1, 2], |
|
|
|
y: 0, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696694400000, 1696699400000, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: types[0].color, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '运行', |
|
|
|
value: [0, 1696730000000, 1696734040450, 0], |
|
|
|