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}]};
放大时只放大了折线图
需要用数组设置两个坐标轴下标
【echarts同时显示折线图与散点图】dataZoom: [{type: 'slider',xAxisIndex: [0, 1],}, {type: 'inside',xAxisIndex: [0, 1],}]