yudao-dev/src/views/equipment/timing-diagram/status/demo.html
2023-10-08 15:00:38 +08:00

425 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<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>
<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},
start: ${start},
end: ${end},
api.value0: ${api.value(0)}
api.value1: ${api.value(1)}
api.value2: ${api.value(2)}
params.coordSys: ${JSON.stringify(params.coordSys)}
api.size: ${api.size([0, 1])}
api.style(): ${JSON.stringify(api.style())}
`);
var height = api.size([0, 1])[1] * 2;
// 用一个矩形去截取另一个矩形
var rectShape = echarts.graphic.clipRectByRect(
// 被截取矩形
{
x: start[0],
y: start[1] - height / 2,
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
}
);
console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style(),
}
);
}
function getXaxisRange(startTime) {
return Array(24)
.fill(startTime)
.map((item, index) => {
return new Date(item + index * 3600 * 1000)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
});
}
function getTodayStart(today) {
const [y, m, d] = [
today.getFullYear(),
today.getMonth(),
today.getDate(),
];
return new Date(y, m, d).getTime();
}
/** 颜色配置 */
const types = [
{ name: '运行', color: '#288AFF' },
{ name: '故障', color: '#FC9C91' },
{ name: '计划停机', color: '#FFDC94' },
{ name: '空白', color: '#F2F4F9' },
];
const option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'none',
// label: {
// backgroundColor: '#6a7985',
// },
},
formatter: (params) => {
// console.log('formatter', params)
// 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>
// `
console.log(params)
return `
<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>
`
}
},
grid: [
{
id: 0,
top: 10,
left: 128,
right: 64,
height: 56,
},
// {
// id: 1,
// top: 80,
// height: 56,
// },
// ***************** 添加第二个grid *****************
{
id: 1,
top: 180,
left: 128,
right: 64,
height: 56
}
],
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())),
},
{
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轴
{
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轴
{
id: 1,
gridIndex: 0,
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,
},
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: [
{
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,
},
},
},
],
},
// ***************** 添加第二个设备 *****************
{
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],
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 myChart = echarts.init(el);
console.log('mychart', myChart);
myChart.setOption(option);
</script>
</body>
</html>