多x轴测试echarts 折线配置项内容和展示

      app.title = 'Alpha2B';

var colors = ['#5d8bc3', '#76b981'];
var names = ['基金净值', 'BTC走势'];
var btc = [7473.61, 7458.24, 7464.74, 7432.88, 7425.89, 7449.28, 7465.07, 7460.16, 7408.08, 7399.66, 7262.48, 7262.1, 7076.73, 6982.79, 6999.99, 6977.82, 6987.31, 6993.57, 6988.75, 6997.5, 7007.22, 7003.87, 6914.8, 6939.69, 6950.14]
var net = [1, 1.002322675, 0.997253137, 1.005398614, 1.007008361, 1.005958056, 1.002171108, 1.002624413, 1.007320166, 1.007984678, 1.024732433, 1.023483086, 1.046662805, 1.045482418, 1.036592564, 1.037228904, 1.034616939, 1.033634883, 1.029454721, 1.030605296, 1.027887702, 1.022713265, 1.033839751, 1.031862477, 1.030283172]
var time = ['8/4 11:00', '8/4 12:00', '8/4 13:00', '8/4 14:00', '8/4 15:00', '8/4 16:00', '8/4 17:00', '8/4 18:00', '8/4 19:00', '8/4 20:00', '8/4 21:00', '8/4 22:00', '8/4 23:00', '8/5 0:00', '8/5 1:00', '8/5 2:00', '8/5 3:00', '8/5 4:00', '8/5 5:00', '8/5 6:00', '8/5 7:00', '8/5 8:00', '8/5 9:00', '8/5 10:00', '8/5 11:00']


var leftMin = 0.94;
var leftMax = 1.06;
var rightMin = 6900;
var rightMax = 7500;
var axisFontSize = 16;
//----------------------------信号小图-------------------------------
let xdata = [
    '2018-08-04 11:12:59', '2018-08-04 11:16:59',
    '2018-08-04 11:58:00', '2018-08-04 15:51:17',
    '2018-08-04 16:39:59', '2018-08-04 17:03:10',
    '2018-08-04 17:10:01', '2018-08-04 17:49:59',
    '2018-08-04 18:14:59', '2018-08-04 18:45:59',
    '2018-08-04 19:02:01', '2018-08-04 19:28:04',
    '2018-08-04 19:59:02', '2018-08-04 21:40:59',
    '2018-08-04 22:01:08', '2018-08-04 22:53:04',
    '2018-08-04 22:58:59', '2018-08-04 23:07:00',
    '2018-08-04 23:15:01', '2018-08-04 23:49:59',
    '2018-08-04 23:59:11', '2018-08-05 00:11:05',
    '2018-08-05 00:35:27', '2018-08-05 01:01:01',
    '2018-08-05 01:19:02', '2018-08-05 01:45:58',
    '2018-08-05 02:41:01', '2018-08-05 03:27:06',
    '2018-08-05 03:56:00', '2018-08-05 04:02:59',
    '2018-08-05 04:13:02', '2018-08-05 05:09:00',
    '2018-08-05 05:53:01', '2018-08-05 06:17:59',
    '2018-08-05 06:50:04', '2018-08-05 07:06:59',
    '2018-08-05 07:27:56', '2018-08-05 07:53:59',
    '2018-08-05 08:24:38', '2018-08-05 09:21:01',
    '2018-08-05 09:52:59', '2018-08-05 10:31:59',
    '2018-08-05 11:03:11', '2018-08-05 11:11:56'
];
let ydata = [
    'up', 'down', 'up', 'up', 'down', 'up', 'down',
    'up', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down',
    'up', 'down', 'up', 'down', 'up', 'down', 'up',
    'down', 'up', 'down', 'up', 'down', 'up', 'down'
];
let xMin = '2018-08-04 11:00:00';
let xMax = '2018-08-05 11:00:00';
let downColor = '#FFAEB9';
let upColor = '#008B00';
let data = [];
let len = Math.min(xdata.length, ydata.length);
let y = ydata[0] == 'up' ? 1 : 0;
for (let i = 0; i < len; i++) {
    if (i > 0) {
        data.push({
            name: xdata[i],
            value: [xdata[i], y]
        })
    } else {
        data.push({
            name: xMin,
            value: [xMin, y]
        })

    }
    y = ydata[i] == 'up' ? 1 : -1;
    data.push({
        name: xdata[i],
        value: [xdata[i], y]
    })
}

let seriesData = [];
len = data.length;
for (let i = 1; i < len; i++) {
    let preValue = data[i - 1].value;
    let currentValye = data[i].value;
    if (currentValye[1] == 1) {
        seriesData.push({
            name: '信号',
            xAxisIndex: 1,
            yAxisIndex: 2,
            symbol: 'none',
            type: 'line',
            data: data.slice(i - 1, i + 1),
            areaStyle: {
                color: upColor
            },
            lineStyle: {
                color: '#FFFFFF00'
            }
        })
    } else {
        seriesData.push({
            name: '信号',
            xAxisIndex: 1,
            yAxisIndex: 2,
            symbol: 'none',
            type: 'line',
            data: data.slice(i - 1, i + 1),
            areaStyle: {
                color: downColor
            },
            lineStyle: {
                color: '#FFFFFF00'
            },
        })
    }
}

let firstData = [{
        name: names[0],
        data: net,
        type: 'line',
        yAxisIndex: 0,
        lineStyle: {
            normal: {
                width: 2.5,
                color: colors[0]
            }
        },
        symbolSize: 7,
    },
    {
        name: names[1],
        data: btc,
        type: 'line',
        yAxisIndex: 1,
        lineStyle: {
            normal: {
                width: 2.5,
                color: colors[1]
            }
        },
        symbolSize: 7,
    }
];

option = {
    color: colors,
    grid: [{
        left: '10%',
        right: '10%',
        bottom: 160
    }, {
        left: '10%',
        right: '10%',
        height: 80,
        bottom: 40
    }],
    legend: {
        itemWidth: 25,
        itemHeight: 15,
        data: names,
        textStyle: {
            fontSize: 16
        }
    },
    xAxis: [{
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: time,
            axisLine: {
                lineStyle: {
                    color: "#b5b5b5"
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    fontFamily: "PingFang-SC-Medium",
                    fontSize: 16,
                    color: "#ffffff"
                }
            }
        },
        {
            id: 1,
            gridIndex: 1,
            type: 'time',
            min: xMin,
            max: xMax,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisPointer: {
                triggerTooltip: true
            }
        }
    ],
    yAxis: [{
            id: 0,
            type: 'value',
            name: names[0],
            min: leftMin,
            max: leftMax,
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            },
            nameTextStyle: {
                fontSize: 15
            },
            axisLabel: {
                show: true,
                textStyle: {
                    fontFamily: "PingFang-SC-Medium",
                    fontSize: axisFontSize,
                    color: "#ffffff"
                }
            }
        },
        {
            id: 1,
            type: 'value',
            name: names[1],
            min: rightMin,
            max: rightMax,
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: colors[1]
                }
            },
            nameTextStyle: {
                fontSize: 15
            },
            axisLabel: {
                show: true,
                textStyle: {
                    fontFamily: "PingFang-SC-Medium",
                    fontSize: axisFontSize,
                    color: "#ffffff"
                }
            }
        },
        {
            id: 2,
            gridIndex: 1,
            axisLabel: {
                formatter: function(value,index){
                    if(value == 1){
                        return 'up';
                    }
                    if(value == -1){
                        return 'down';
                    }
                    return '';
                }
            },
            type: 'value',
            min: -1,
            max: 1,
            interval: 1,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#999'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
        }
    ],
    series: firstData.concat(seriesData)
};