echarts同时显示折线图与散点图

想要的效果

主要遇到的问题如下

散点图显示错位

option = {xAxis: {type: 'category'data: [1,2]},yAxis: {},series: [{symbolSize: 20,data: [[10.0, 8.04],[8.07, 6.95]],type: 'scatter'}]
};

原因是我使用的data是二维数组，第一个值为x，第二个值为y表示两个点(10.0,8.04)、(8.07,6.95)。由于折线图使用的x轴type为类型的。散点图的data在类型下会变为(x[10],8.04)、(x[8],6.95)

所以需要设置两个x轴，给折线图使用，value给散点图使用

option = {xAxis: [{type: 'category',data: [...],max: 1000,}, {type: 'value',max: x1[1000],show: false}],yAxis: {},series: [{symbolSize: 20,data: [[10.0, 8.04],[8.07, 6.95]],type: 'scatter',xAxisIndex: 1,}]
};

散点图使用value的x轴

散点图x轴与折线图x轴坐标不一致

需要设置相同的max值，注意轴的最大值是指[1000]（数组下标从1开始），需要让value轴的最大值 = 轴的[1000]

option = {xAxis: [{type: 'category',data: x1_data,max: 1000,}, {type: 'value',max: x1_data[1000],show: false}]
};

放大时只放大了折线图

需要用数组设置两个坐标轴下标

dataZoom: [{type: 'slider',xAxisIndex: [0, 1],
}, {type: 'inside',xAxisIndex: [0, 1],
}]