|
@@ -13,10 +13,19 @@ |
|
|
<script src="./echarts.js"></script> |
|
|
<script src="./echarts.js"></script> |
|
|
<script> |
|
|
<script> |
|
|
const option = { |
|
|
const option = { |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
trigger: 'axis', |
|
|
|
|
|
axisPointer: { |
|
|
|
|
|
type: 'line', |
|
|
|
|
|
label: { |
|
|
|
|
|
backgroundColor: '#6a7985', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
grid: [ |
|
|
grid: [ |
|
|
{ |
|
|
{ |
|
|
id: 0, |
|
|
id: 0, |
|
|
top: 0, |
|
|
|
|
|
|
|
|
top: 10, |
|
|
height: 40, |
|
|
height: 40, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
@@ -30,41 +39,93 @@ |
|
|
id: 0, |
|
|
id: 0, |
|
|
gridIndex: 0, |
|
|
gridIndex: 0, |
|
|
type: 'category', |
|
|
type: 'category', |
|
|
// axisTick: { show: false }, |
|
|
|
|
|
|
|
|
axisTick: { |
|
|
|
|
|
alignWithLabel: true, |
|
|
|
|
|
inside: true, |
|
|
|
|
|
}, |
|
|
|
|
|
boundaryGap: false, |
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
type: 'category', |
|
|
|
|
|
id: 1, |
|
|
id: 1, |
|
|
|
|
|
gridIndex: 0, |
|
|
|
|
|
axisLabel: { show: false }, |
|
|
|
|
|
axisLine: { show: false }, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 2, |
|
|
gridIndex: 1, |
|
|
gridIndex: 1, |
|
|
// axisTick: { show: false }, |
|
|
|
|
|
|
|
|
type: 'category', |
|
|
|
|
|
axisTick: { |
|
|
|
|
|
alignWithLabel: true, |
|
|
|
|
|
inside: true, |
|
|
|
|
|
}, |
|
|
|
|
|
boundaryGap: 10, |
|
|
data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'], |
|
|
data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'], |
|
|
}, |
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 3, |
|
|
|
|
|
gridIndex: 1, |
|
|
|
|
|
axisLabel: { show: false }, |
|
|
|
|
|
axisLine: { show: false }, |
|
|
|
|
|
}, |
|
|
], |
|
|
], |
|
|
yAxis: [ |
|
|
yAxis: [ |
|
|
|
|
|
// 主y轴 |
|
|
{ |
|
|
{ |
|
|
|
|
|
id: 0, |
|
|
gridIndex: 0, |
|
|
gridIndex: 0, |
|
|
type: 'value', |
|
|
type: 'value', |
|
|
axisLine: {}, |
|
|
|
|
|
splitLine: { show: false } |
|
|
|
|
|
|
|
|
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轴 |
|
|
{ |
|
|
{ |
|
|
gridIndex: 1, |
|
|
|
|
|
|
|
|
id: 1, |
|
|
|
|
|
gridIndex: 0, |
|
|
type: 'value', |
|
|
type: 'value', |
|
|
axisLine: {}, |
|
|
|
|
|
splitLine: { show: false } |
|
|
|
|
|
|
|
|
splitLine: { show: false }, |
|
|
|
|
|
axisLabel: { show: false }, |
|
|
|
|
|
axisTick: { show: false }, |
|
|
}, |
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 2, |
|
|
|
|
|
gridIndex: 1, |
|
|
|
|
|
type: 'value', |
|
|
|
|
|
axisLine: {}, |
|
|
|
|
|
splitLine: { show: false }, |
|
|
|
|
|
name: '设备2', |
|
|
|
|
|
nameLocation: 'center', |
|
|
|
|
|
nameGap: 56, |
|
|
|
|
|
nameRotate: 0, |
|
|
|
|
|
nameTextStyle: { |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ id: 3, gridIndex: 1 }, |
|
|
], |
|
|
], |
|
|
series: [ |
|
|
series: [ |
|
|
{ |
|
|
{ |
|
|
xAxisIndex: 0, |
|
|
xAxisIndex: 0, |
|
|
yAxisIndex: 0, |
|
|
yAxisIndex: 0, |
|
|
data: [150, 230, 224, 218, 135, 147, 260], |
|
|
|
|
|
|
|
|
data: [1, 2, 3, 4, 5], |
|
|
type: 'line', |
|
|
type: 'line', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
xAxisIndex: 1, |
|
|
|
|
|
yAxisIndex: 1, |
|
|
|
|
|
|
|
|
xAxisIndex: 2, |
|
|
|
|
|
yAxisIndex: 2, |
|
|
data: [1, 2, 3, 4, 5], |
|
|
data: [1, 2, 3, 4, 5], |
|
|
type: 'line', |
|
|
type: 'line', |
|
|
}, |
|
|
}, |
|
|