mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

done time sequence demo

Browse Source
This commit is contained in:
lb 2023-10-08 15:53:38 +08:00
parent bc2c5a4787
commit 4f7889ff60
1 changed files with 456 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/views/equipment/timing-diagram/status/demo.html
View File

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body>
<div <body>
id="app" <div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div>
style="width: 100vw; height: 80vh; background: #ccc3; margin: 24px"></div>
<script src="./echarts.js"></script> <script src="./echarts.js"></script>
<script> <script>
@ -112,7 +112,6 @@
// <span>${params[0].name}</span> // <span>${params[0].name}</span>
// </div> // </div>
// ` // `
console.log(params)
return ` return `
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1> <h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
@ -270,6 +269,42 @@
}, },
], ],
series: [ series: [
{
// 沉默的背景
xAxisIndex: 0,
yAxisIndex: 0,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '无数据',
value: [0, 1696694400000, 1696780800000, 0],
tooltip: { show: false },
// silent: true,
// animation: false,
// universalTransition: { enable: false },
// hoverAnimation: false,
// selectMode: true,
// select: { disabled: true },
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
// z: 0,
// zlevel: 0,
// emphasis: { disabled: true },
itemStyle: {
color: '#ccc',
opacity: 0.3,
}
}
]
},
{ {
name: '设备1', name: '设备1',
xAxisIndex: 0, xAxisIndex: 0,
@ -341,6 +376,42 @@
], ],
}, },
// ***************** 添加第二个设备 ***************** // ***************** 添加第二个设备 *****************
{
// 沉默的背景
xAxisIndex: 2,
yAxisIndex: 2,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '无数据',
value: [0, 1696694400000, 1696780800000, 0],
tooltip: { show: false },
// silent: true,
// animation: false,
// universalTransition: { enable: false },
// hoverAnimation: false,
// selectMode: true,
// select: { disabled: true },
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
// z: 0,
// zlevel: 0,
// emphasis: { disabled: true },
itemStyle: {
color: '#ccc',
opacity: 0.3,
}
}
]
},
{ {
name: '设备2', name: '设备2',
xAxisIndex: 2, xAxisIndex: 2,
@ -363,6 +434,7 @@
color: types[0].color, color: types[0].color,
}, },
}, },
// showBackground: true,
}, },
{ {
name: '运行', name: '运行',
@ -420,5 +492,6 @@
console.log('mychart', myChart); console.log('mychart', myChart);
myChart.setOption(option); myChart.setOption(option);
</script> </script>
</body> </body>
</html> </html>