时间轴数据echarts 折线配置项内容和展示

      app.title = 'Alpha2B';

//----------------------------原始数据-------------------------------
let btc = [6111.15,6126.51,6117.40,6113.89,6101.06,6105.93,6126.26,6108.05,6086.78,6105.70,6086.57,6085.01,6093.46,6108.82,6108.62,6113.89,6120.69,6125.99,6118.63,6117.05,6110.09,6145.90,6100.81,6112.49,6411.27,6403.19,6376.81,6368.17,6372.35,6377.93,6371.47,6384.20,6376.80,6381.48,6377.32,6383.28,6378.81,6394.29,6383.30,6211.55,6264.98,6264.16,6252.24,6253.22,6269.52,6278.64,6265.16,6276.14,6266.60,6262.23,6321.49,6329.59,6313.53,6320.25,6321.37,6301.48,6297.36,6304.62,6314.23,6325.43,6314.76,6327.20,6327.89,6336.44,6320.03,6322.36,6310.39,6256.15,6249.37,6263.93,6308.51,6313.06,6320.57,6322.02,6320.85,6322.13,6318.71,6301.07,6303.20,6299.38,6294.90,6310.31,6296.91,6318.93,6310.45,6322.06,6333.24,6329.01,6332.98,6346.11,6343.03,6312.50,6328.08,6335.62,6325.17,6320.12,6352.31,6354.46,6348.75,6352.79,6345.33,6343.66,6334.01,6339.39];
let net = [1.0,0.9974928629839827,0.9974928629839827,0.9980655262064274,0.9980655262064274,0.9972694838160584,0.9972694838160584,1.000242654844503,1.000242654844503,0.9971431591225287,0.9971431591225287,0.997398794417825,0.997398794417825,0.9948909376660697,0.9948909376660697,0.994033369858749,0.994033369858749,0.9931733657026449,0.9931733657026449,0.9934298968602797,0.9934298968602797,0.9876415298828531,0.9876415298828531,0.9857543033893895,0.9857543033893895,0.9869981981936022,0.9869981981936022,0.9883373057287957,0.9883373057287957,0.9874726173164164,0.9874726173164164,0.9855036115806254,0.9855036115806254,0.9847808706330401,0.9847808706330401,0.9838613913075251,0.9838613913075251,0.9814795515196143,0.9814795515196143,1.0086175626397846,1.0086175626397846,1.008749594133451,1.008749594133451,1.0085915036453104,1.0085915036453104,1.0071264802464144,1.0071264802464144,1.0053645296281832,1.0053645296281832,1.006066107659408,1.006066107659408,1.0047786410980601,1.0047786410980601,1.0037103111319703,1.0037103111319703,1.0068784237163815,1.0068784237163815,1.005718966468176,1.005718966468176,1.0039382096778164,1.0039382096778164,1.0019643521534152,1.0019643521534152,1.000612363464039,1.000612363464039,1.0002436045185072,1.0002436045185072,1.0089155853867864,1.0089155853867864,1.0065704424935498,1.0065704424935498,1.0058449788493986,1.0058449788493986,1.005614281189579,1.005614281189579,1.0054106810927885,1.0054106810927885,1.0082253529524057,1.0082253529524057,1.0088367497641997,1.0088367497641997,1.0063731347731981,1.0063731347731981,1.0028661586826724,1.0028661586826724,1.0010244684579186,1.0010244684579186,1.0016935041367336,1.0016935041367336,0.9996210163120165,0.9996210163120165,1.004455619025364,1.004455619025364,1.003260219779915,1.003260219779915,1.004061860272483,1.004061860272483,1.0037221409258217,1.0037221409258217,1.0030838328046119,1.0030838328046119,1.0033478996052891,1.0033478996052891,1.0024963962745463];
//目前两组数据对应的x值是一样的
//即2018-08-04 11:12:59同时对应btc-7473.61，net-1，ydata-'up'
let xdata = ['2018-08-11 16:16:02','2018-08-11 16:24:00','2018-08-11 16:48:00','2018-08-11 17:15:01','2018-08-11 17:24:00','2018-08-11 17:51:01','2018-08-11 18:57:15','2018-08-11 19:52:02','2018-08-11 20:04:00','2018-08-11 20:17:00','2018-08-11 20:26:45','2018-08-11 20:54:00','2018-08-11 21:15:36','2018-08-11 21:28:02','2018-08-11 21:50:00','2018-08-11 22:20:00','2018-08-11 22:58:00','2018-08-11 23:06:00','2018-08-11 23:11:01','2018-08-11 23:37:19','2018-08-11 23:47:00','2018-08-12 00:22:05','2018-08-12 00:39:00','2018-08-12 00:54:00','2018-08-12 02:15:00','2018-08-12 02:47:01','2018-08-12 03:01:00','2018-08-12 03:28:42','2018-08-12 04:19:00','2018-08-12 04:37:06','2018-08-12 04:43:49','2018-08-12 04:47:00','2018-08-12 05:12:00','2018-08-12 05:36:01','2018-08-12 05:52:00','2018-08-12 06:18:00','2018-08-12 06:48:00','2018-08-12 07:03:01','2018-08-12 07:22:00','2018-08-12 08:24:00','2018-08-12 09:07:01','2018-08-12 09:28:00','2018-08-12 09:43:21','2018-08-12 09:58:27','2018-08-12 10:39:00','2018-08-12 10:58:00','2018-08-12 11:20:00','2018-08-12 11:44:00','2018-08-12 12:01:01','2018-08-12 12:37:00','2018-08-12 14:06:01','2018-08-12 14:45:00','2018-08-12 15:11:27','2018-08-12 15:37:01','2018-08-12 15:59:00','2018-08-12 16:33:01','2018-08-12 17:02:00','2018-08-12 17:21:01','2018-08-12 17:52:01','2018-08-12 18:00:00','2018-08-12 18:05:01','2018-08-12 18:18:00','2018-08-12 18:56:00','2018-08-12 19:43:17','2018-08-12 20:07:02','2018-08-12 20:43:01','2018-08-12 20:48:01','2018-08-12 21:15:00','2018-08-12 21:35:02','2018-08-12 21:47:00','2018-08-12 22:41:39','2018-08-12 23:08:43','2018-08-12 23:48:01','2018-08-13 00:22:01','2018-08-13 00:46:01','2018-08-13 01:13:00','2018-08-13 01:34:00','2018-08-13 02:02:00','2018-08-13 02:30:01','2018-08-13 02:55:00','2018-08-13 03:10:00','2018-08-13 03:25:56','2018-08-13 03:46:01','2018-08-13 04:11:02','2018-08-13 04:13:33','2018-08-13 04:37:01','2018-08-13 05:07:00','2018-08-13 05:27:02','2018-08-13 06:12:48','2018-08-13 06:35:57','2018-08-13 06:45:15','2018-08-13 07:57:01','2018-08-13 08:54:00','2018-08-13 09:08:02','2018-08-13 09:32:00','2018-08-13 10:35:07','2018-08-13 11:46:20','2018-08-13 11:55:01','2018-08-13 12:15:00','2018-08-13 12:34:17','2018-08-13 12:43:36','2018-08-13 13:05:01','2018-08-13 13:33:00','2018-08-13 14:06:00'];
let ydata = ['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'];
//----------------------------配置参数-------------------------------
let colors = ['#5d8bc3', '#76b981'];
let names = ['基金净值', 'BTC走势'];
let xMin = '2018-08-11 16:00:00';
let xMax = '2018-08-13 15:00:00';
let downColor = '#FFAEB955';
let upColor = '#008B0055';
let leftMin = 0.90;
let leftMax = 1.05;
let rightMin = 6000;
let rightMax = 7500;
let axisFontSize = 16;
let circleSize = 7; //设置为0即去掉折线上的圆圈
//----------------------------组织绘图数据-------------------------------
let btcLen = Math.min(btc.length, xdata.length);
let btcList = [];
let netList = [];
for (let i = 0; i < btcLen; i++) {
    btcList.push({
        name: xdata[i],
        value: [xdata[i], btc[i]]
    });
    netList.push({
        name: xdata[i],
        value: [xdata[i], net[i]]
    })
}
let firstData = [{
        name: names[0],
        data: netList,
        type: 'line',
        yAxisIndex: 0,
        lineStyle: {
            normal: {
                width: 2.5,
                color: colors[0]
            }
        },
        symbolSize: circleSize,
    },
    {
        name: names[1],
        data: btcList,
        type: 'line',
        yAxisIndex: 1,
        lineStyle: {
            normal: {
                width: 2.5,
                color: colors[1]
            }
        },
        symbolSize: circleSize,
    }
];
let shadowLen = Math.min(xdata.length, ydata.length);
for (let index = 1; index < shadowLen; index++) {
    let preIndex = index - 1;
    let color = downColor;
    if (ydata[preIndex] == 'up') {
        color = upColor;
    }
    firstData.push({
        name: '信号',
        symbol: 'none',
        type: 'line',
        yAxisIndex: 0,
        data: [{
                name: xdata[preIndex],
                value: [xdata[preIndex], leftMax]
            },
            {
                name: xdata[index],
                value: [xdata[index], leftMax]
            }
        ],
        lineStyle: {
            color: '#FFFFFF00'
        },
        areaStyle: {
            color: color
        }
    })
}
//----------------------------走势主图-------------------------------
option = {
    color: colors,
    grid: [{
        left: '10%',
        right: '10%',
        bottom: 60
    }],
    legend: {
        itemWidth: 25,
        itemHeight: 15,
        data: names,
        textStyle: {
            fontSize: 16
        }
    },
    xAxis: [{
        type: 'time',
        min: xMin,
        max: xMax,
        splitLine: false,
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: "#b5b5b5"
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontFamily: "PingFang-SC-Medium",
                fontSize: 16,
                color: "#ffffff"
            }
        }
    }],
    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"
                }
            }
        }
    ],
    series: firstData
};

//----------------------------组织绘图数据-------------------------------
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'
            },
        })
    }
}
//----------------------------信号小图-------------------------------
// option.grid.push({
//     left: '10%',
//     right: '10%',
//     height: 80,
//     bottom: 60
// });
// option.xAxis.push({
//     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
//     }
// });

// option.yAxis.push({
//     id: 2,
//     gridIndex: 1,
//     axisLabel: false,
//     type: 'value',
//     min: -1,
//     max: 1,
//     interval: 1,
//     axisLine: {
//         show: false,
//         lineStyle: {
//             color: '#999'
//         }
//     },
//     axisTick: {
//         show: false
//     },
//     splitLine: {
//         show: false,
//         lineStyle: {
//             type: 'dashed'
//         }
//     },
// });

// option.series = option.series.concat(seriesData);