echarts如何生成下图,是使用的是echarts的 散点图吗 + grid + sries?请问有什么思路
下面是接口的数据
每次点击键盘的左右键都会加载新的数据,如何保证 在按左右键展示或加载数据时。 X轴的刻度线位置不变(刻度上的数字会变)
部分前段代码片段
],
grid: [{
left: 50,
right: 50,
height: "12%",
top: "5%"
}, {
left: 50,
right: 50,
height: "12%",
top: "20%"
},
{
left: 50,
right: 50,
height: "12%",
top: "35%"
},
//右轨
{
left: 50,
right: 50,
height: "12%",
top: "50%"
},
{
left: 50,
right: 50,
height: "12%",
top: "65%"
},
{
left: 50,
right: 50,
height: "10%",
top: "80%"
}
],
xAxis: [
{
show:true,
scale:true,
min:this.min,
max:this.max,
gridIndex: 0,
type:'category',
splitLine: this.splitLine(),
},
{
show:true,
scale:true,
min:this.min,
max:this.max,
gridIndex: 1,
type:'category',
splitLine: this.splitLine()
},
{
show:true,
scale:true,
min:this.min,
max:this.max,
gridIndex: 2,
type:'category',
splitLine: this.splitLine()
},
{
show:true,
scale:true,
min:this.min,
max:this.max,
gridIndex: 3,
type:'category',
splitLine: this.splitLine()
},
{
show:true,
scale:true,
min:this.min,
max:this.max,
gridIndex: 4,
type:'category',
splitLine: this.splitLine()
},
{
show:true,
scale:true,
min:this.min,
max:this.max,
gridIndex: 5,
// axisLabel: this.getPosBy(),
type:'category',
splitLine: this.splitLine()
}
],
yAxis: [
{
type:'value',
name: '左轨(阀门1)',
interval : 42,
min:0,
max:84,
inverse:true,
gridIndex: 0,
nameLocation:'middle',
nameTextStyle:nameTextStyle,
splitLine:this.YSplitLine()
},
{
name: '左轨(阀门2)',
type:'value',
gridIndex: 1,
inverse:true,
min:0,
max:204,
interval : 102,
nameLocation:'middle',
nameTextStyle:nameTextStyle,
splitLine:this.YSplitLine()
},
{
name: '左轨',
interval : 98,
type:'value',
inverse:true,
min:0,
max:197,
gridIndex: 2,
nameLocation:'middle',
nameTextStyle:nameTextStyle,
splitLine:this.YSplitLine()
},
{
type:'value',
name: '右轨(阀门1)',
interval : 42,
inverse:true,
min:0,
max:84,
gridIndex: 3,
nameLocation:'middle',
nameTextStyle:nameTextStyle,
splitLine:this.YSplitLine()
},
{
name: '右轨(阀门2)',
type:'value',
gridIndex: 4,
inverse:true,
min:0,
max:204,
interval : 102,
nameLocation:'middle',
nameTextStyle:nameTextStyle,
splitLine:this.YSplitLine()
},
{
name: '右轨(图片)',
interval : 98,
min:0,
max:197,
gridIndex: 5,
inverse:true,
nameLocation:'middle',
nameTextStyle:nameTextStyle,
splitLine:this.YSplitLine()
},
],
series:[
]
};
//左轨 阀门1 i+1
for (var i =0; i < 12; i++) {
if(i === 3 || i === 4 || i === 5 || i === 6 || i === 8 || i === 9) {
//左轨闸门1s
option.series.push(xxxxxx)
}
this.myChart.setOption(option, true);