怎么自定义控制x轴和y轴的宽度,比如我要在页面显示出几百个小表格
配置项如下
option = {
title: { // 图表标题
text: '三测单'
},
tooltip: { // 这个是鼠标浮动时的工具条
trigger: 'axis'
},
legend: { // 这个就是图例
data: ['温度', '脉搏', '呼吸']
},
color: [
'#FF3333',
'#53FF53',
'#B15BFF'
],
toolbox: {
feature: {
restore: {
show: true
},
saveAsImage: {
show: true
} // 工具
}
},
//calculable: true, 容易搞错的属性,折线图、柱状图是否叠加
grid: {
show: false,
left: 10,
right: 10,
top: '0',
width: '100%',
height: '100%',
containLabel: true,
borderColor: '#ccc',
borderWidth: '1',
},
xAxis: [{
type: 'value', //类目轴category数值value时间轴time对数轴log
//inverse:true, 反向坐标轴
// position:'top',
boundaryGap: true, //坐标轴留白
axisTick: {
alignWithLabel: true //保证刻度线和标签对齐
},
// splitNumber:15,//该属性在类目轴中无效
// scale:true,
data: [0, 4, 8, 12, 16, 20, 0, 4, 8, 12, 16, 20, 0, 4, 8, 12, 16, 20, 0, 4, 8, 12, 16, 20, 0, 4, 8, 12, 16, 20, 0, 4, 8, 12, 16, 20, 0, 4, 8, 12, 16, 20] // X轴的定义
}],
yAxis: [{
type: 'value',
offset: 0, //定义多个y轴,防止重叠
//inverse:true,
boundaryGap: false,
name: '温度',
position: 'left',
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
formatter: '{value} °C'
}
}, {
type: 'value',
offset: 1,
name: '脉搏',
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: 'blue'
}
},
axisLabel: {
formatter: '{value} bpm'
}
}, {
type: 'value',
offset: 2,
name: '呼吸',
position: 'left',
axisLine: {
lineStyle: {
color: 'red'
}
},
axisLabel: {
formatter: '{value} R'
}
}],
series: [{
name: '温度',
type: 'line',
symbol: 'circle', //设置折线图中表示每个坐标点的符号;emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形
data: [7, 8, 9, 1, 2, 3, 0, 4, 8, 12, 16, 20, 0, 4, 8, 12, 16, 20]
}, {
name: '呼吸',
type: 'line',
symbol: 'emptycircle',
data: [4, 5, 6, 7, 8, 9]
}, {
name: '脉搏',
type: 'line',
symbol: 'emptydiamond',
data: [1, 2, 3, 4, 5, 6]
} // 这里就是数据了
]
};