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为category类型的。散点图的data在category类型下会变为(x[10],8.04)、(x[8],6.95)
所以需要设置两个x轴，category给折线图使用，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值，注意category轴是离散的其最大值是指x1_data[1000]（x1_data数组下标从1开始），需要让value轴的最大值 = category轴的x1_data[1000]

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

dataZoom放大时只放大了折线图

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

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