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

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

@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div
id="app"
style="width: 100vw; height: 80vh; background: #ccc3; margin: 24px"></div>
<script src="./echarts.js"></script> <head>
<script> <meta charset="UTF-8" />
function getStartTime(timestamp) { <meta name="viewport" content="width=device-width, initial-scale=1.0" />
return new Date(new Date(timestamp).toLocaleDateString()).getTime(); <title>Document</title>
} </head>
function renderItem(params, api) { <body>
var categoryIndex = api.value(0); <div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div>
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]); <script src="./echarts.js"></script>
console.log(` <script>
function getStartTime(timestamp) {
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
}
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]);
console.log(`
categoryIndex: ${categoryIndex}, categoryIndex: ${categoryIndex},
start: ${start}, start: ${start},
end: ${end}, end: ${end},
@ -32,393 +32,466 @@
api.style(): ${JSON.stringify(api.style())} api.style(): ${JSON.stringify(api.style())}
`); `);
var height = api.size([0, 1])[1] * 2; var height = api.size([0, 1])[1] * 2;
// 用一个矩形去截取另一个矩形 // 用一个矩形去截取另一个矩形
var rectShape = echarts.graphic.clipRectByRect( var rectShape = echarts.graphic.clipRectByRect(
// 被截取矩形 // 被截取矩形
{ {
x: start[0], x: start[0],
y: start[1] - height / 2, y: start[1] - height / 2,
width: end[0] - start[0], width: end[0] - start[0],
height: height, height: height,
}, },
// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行... // {x: 0, y: 0, width: 2000, height: 60 } // <== 也行...
// 截取矩形 // 截取矩形
{ {
// 截取掉grid以外的部分，实质是计算方块的偏移量 // 截取掉grid以外的部分，实质是计算方块的偏移量
x: params.coordSys.x, // {number} grid rect 的 x x: params.coordSys.x, // {number} grid rect 的 x
// y: params.coordSys.y, // {number} grid rect 的 y // y: params.coordSys.y, // {number} grid rect 的 y
y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位 y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位
// width: end[0] - start[0], // width: end[0] - start[0],
width: params.coordSys.width, // {number} grid rect 的 width width: params.coordSys.width, // {number} grid rect 的 width
height: params.coordSys.height, // {number} grid rect 的 height height: params.coordSys.height, // {number} grid rect 的 height
} }
); );
console.log(`------------- ${JSON.stringify(rectShape)} -------------- `) console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
return ( return (
rectShape && { rectShape && {
type: 'rect', type: 'rect',
transition: ['shape'], transition: ['shape'],
shape: rectShape, shape: rectShape,
style: api.style(), style: api.style(),
} }
); );
} }
function getXaxisRange(startTime) { function getXaxisRange(startTime) {
return Array(24) return Array(24)
.fill(startTime) .fill(startTime)
.map((item, index) => { .map((item, index) => {
return new Date(item + index * 3600 * 1000) return new Date(item + index * 3600 * 1000)
.toLocaleTimeString() .toLocaleTimeString()
.split(':') .split(':')
.slice(0, 2) .slice(0, 2)
.join(':'); .join(':');
}); });
} }
function getTodayStart(today) { function getTodayStart(today) {
const [y, m, d] = [ const [y, m, d] = [
today.getFullYear(), today.getFullYear(),
today.getMonth(), today.getMonth(),
today.getDate(), today.getDate(),
];
return new Date(y, m, d).getTime();
}
/** 颜色配置 */
const types = [
{ name: '运行', color: '#288AFF' },
{ name: '故障', color: '#FC9C91' },
{ name: '计划停机', color: '#FFDC94' },
{ name: '空白', color: '#F2F4F9' },
]; ];
return new Date(y, m, d).getTime();
}
const option = { /** 颜色配置 */
tooltip: { const types = [
trigger: 'item', { name: '运行', color: '#288AFF' },
axisPointer: { { name: '故障', color: '#FC9C91' },
type: 'none', { name: '计划停机', color: '#FFDC94' },
// label: { { name: '空白', color: '#F2F4F9' },
// backgroundColor: '#6a7985', ];
// },
}, const option = {
formatter: (params) => { tooltip: {
// console.log('formatter', params) trigger: 'item',
// return ` axisPointer: {
// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div> type: 'none',
// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;"> // label: {
// <span>${params[0].seriesName}</span> // backgroundColor: '#6a7985',
// <span>${params[0].name}</span> // },
// </div> },
// ` formatter: (params) => {
console.log(params) // console.log('formatter', params)
return ` // return `
// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
// <span>${params[0].seriesName}</span>
// <span>${params[0].name}</span>
// </div>
// `
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>
<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> <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>
<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div> <div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
` `
} }
},
grid: [
{
id: 0,
top: 10,
left: 128,
right: 64,
height: 56,
}, },
grid: [ // {
{ // id: 1,
id: 0, // top: 80,
top: 10, // height: 56,
left: 128, // },
right: 64, // ***************** 添加第二个grid *****************
height: 56, {
id: 1,
top: 180,
left: 128,
right: 64,
height: 56
}
],
xAxis: [
{
id: 'asdf',
gridIndex: 0,
axisTick: {
alignWithLabel: true,
inside: true,
}, },
// { type: 'time',
// id: 1, min: getTodayStart(new Date()), // <===
// top: 80, max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
// height: 56, splitNumber: 10,
// }, axisLabel: {
// ***************** 添加第二个grid ***************** margin: 12,
{ // rotate: -15,
id: 1, formatter: function (val) {
top: 180, return new Date(val)
left: 128, .toLocaleTimeString()
right: 64, .split(':')
height: 56 .slice(0, 2)
} .join(':');
],
xAxis: [
{
id: 'asdf',
gridIndex: 0,
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())),
}, },
{ boundaryGap: false,
id: 'asdff', // data: getXaxisRange(getTodayStart(new Date())),
gridIndex: 0, },
axisLabel: { show: false }, {
axisLine: { show: false }, id: 'asdff',
gridIndex: 0,
axisLabel: { show: false },
axisLine: { show: false },
},
// ***************** 添加第二个 xAxis *****************
{
id: 'asdfjk',
gridIndex: 1,
axisTick: {
alignWithLabel: true,
inside: true,
}, },
// ***************** 添加第二个 xAxis ***************** type: 'time',
{ min: getTodayStart(new Date()), // <===
id: 'asdfjk', max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
gridIndex: 1, splitNumber: 10,
axisTick: { axisLabel: {
alignWithLabel: true, margin: 12,
inside: true, // rotate: -15,
formatter: function (val) {
return new Date(val)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
}, },
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())),
}, },
{ boundaryGap: false,
id: 'fjkd', // data: getXaxisRange(getTodayStart(new Date())),
gridIndex: 1, },
axisLabel: { show: false }, {
axisLine: { show: false }, id: 'fjkd',
gridIndex: 1,
axisLabel: { show: false },
axisLine: { show: false },
},
],
yAxis: [
// 主y轴
{
id: 0,
gridIndex: 0,
type: 'value',
splitLine: { show: false },
name: '设备1',
nameLocation: 'center',
nameGap: 56,
nameRotate: 0,
nameTextStyle: {
fontSize: 18,
}, },
], axisLine: {
yAxis: [ show: true,
// 主y轴 lineStyle: {},
{
id: 0,
gridIndex: 0,
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轴 axisLabel: { show: false },
{ axisTick: { show: false },
id: 1, },
gridIndex: 0, // 辅y轴
type: 'value', {
splitLine: { show: false }, id: 1,
axisLabel: { show: false }, gridIndex: 0,
axisTick: { show: false }, type: 'value',
splitLine: { show: false },
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,
}, },
// ***************** 添加第二个 yAxis ***************** axisLine: {
{ show: true,
id: 2, lineStyle: {},
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轴 axisLabel: { show: false },
{ axisTick: { show: false },
id: 3, },
gridIndex: 1, // 辅y轴
type: 'value', {
splitLine: { show: false }, id: 3,
axisLabel: { show: false }, gridIndex: 1,
axisTick: { show: false }, type: 'value',
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
},
],
series: [
{
// 沉默的背景
xAxisIndex: 0,
yAxisIndex: 0,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
}, },
], encode: {
series: [ x: [1, 2],
{ y: 0,
name: '设备1',
xAxisIndex: 0,
yAxisIndex: 0,
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],
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,
},
},
},
],
}, },
// ***************** 添加第二个设备 ***************** data: [
{ {
name: '设备2', name: '无数据',
xAxisIndex: 2, value: [0, 1696694400000, 1696780800000, 0],
yAxisIndex: 2, tooltip: { show: false },
type: 'custom', // silent: true,
renderItem: renderItem, // animation: false,
itemStyle: { // universalTransition: { enable: false },
opacity: 0.8, // hoverAnimation: false,
}, // selectMode: true,
encode: { // select: { disabled: true },
x: [1, 2], // emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
y: 0, // z: 0,
}, // zlevel: 0,
data: [ // emphasis: { disabled: true },
{ itemStyle: {
name: '运行', color: '#ccc',
value: [0, 1696694400000, 1696699400000, 0], opacity: 0.3,
itemStyle: { }
normal: { }
color: types[0].color, ]
}, },
}, {
}, name: '设备1',
{ xAxisIndex: 0,
name: '运行', yAxisIndex: 0,
value: [0, 1696730000000, 1696734040450, 0], type: 'custom',
itemStyle: { renderItem: renderItem,
normal: { itemStyle: {
color: types[0].color, opacity: 0.8,
},
},
},
{
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,
},
},
},
],
}, },
], 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],
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,
},
},
},
],
},
// ***************** 添加第二个设备 *****************
{
// 沉默的背景
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',
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,
},
},
// showBackground: true,
},
{
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,
},
},
},
],
},
],
};
const el = document.getElementById('app'); const el = document.getElementById('app');
const myChart = echarts.init(el); const myChart = echarts.init(el);
console.log('mychart', myChart); console.log('mychart', myChart);
myChart.setOption(option); myChart.setOption(option);
</script> </script>
</body> </body>
</html>
</html>