update demo

This commit is contained in:
lb 2023-09-27 14:42:38 +08:00
parent 5c796cd44f
commit 7ab5f1b812

View File

@ -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轴
{
id: 1,
gridIndex: 0,
type: 'value',
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
}, },
{ {
id: 2,
gridIndex: 1, gridIndex: 1,
type: 'value', type: 'value',
axisLine: {}, axisLine: {},
splitLine: { show: false } 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, xAxisIndex: 2,
yAxisIndex: 1, yAxisIndex: 2,
data: [1, 2, 3, 4, 5], data: [1, 2, 3, 4, 5],
type: 'line', type: 'line',
}, },