update time sequence status
This commit is contained in:
bovenliggende
ab8e9cb2a5
commit
bc2c5a4787
@ -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],
|
||||
|
||||
Laden…
Verwijs in nieuw issue
Block a user