done time sequence demo
This commit is contained in:
parent
bc2c5a4787
commit
4f7889ff60
@ -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);
|
||||||
|
myChart.setOption(option);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
console.log('mychart', myChart);
|
|
||||||
myChart.setOption(option);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user