2018/7/22 23:45echarts 折线配置项内容和展示

时间轴+多Y轴

配置项如下
      function formatTime(timeStr) {
    var result = new Date(timeStr);
    var years = [result.getFullYear(), result.getMonth() + 1, result.getDate()].join('/');
    var times = [result.getHours(), result.getMinutes()].join(':');
    return [years, times].join(' ');
}

var buyCost = [7527.85, 7527.8, 7524.742303, 7526.52, 7533.44, 7537.77, 7528.63, 7517.86, 7516.06, 7508.36, 7498.04, 7501.93, 7525.354081, 7514.19, 7527.75, 7537.52, 7528.29273, 7546.98, 7424.66, 7422.71, 7399.1, 7400.683932, 7372.38, 7394.96, 7390.78, 7377.67, 7420.9, 7402.33, 7405.93, 7414.71992, 7406.67, 7400, 7453.92, 7623.83, 7612.36, 7610.79, 7617.86, 7634.01, 7626.45, 7620.95, 7639.601059, 7646.65, 7641.03, 7645.26, 7667.61, 7649.209673, 7661.1, 7652.49, 7651.33, 7649.7, 7653.69, 7650.67, 7667.790828, 7674.05481, 7666.81332, 7676.161141, 7673.53, 7688.77, 7652.07, 7686.31, 7690.52, 7684.66, 7757.5];
var margin = [5.25, 7.63, 8.817696827, 13.14769683, 17.97769683, 14.64769683, 17.71769683, 21.56769683, 4.247696827, 7.767696827, 10.32020538, 7.150205379, 10.19612407, 13.06612407, 15.19612407, 18.58612407, 22.29339428, 25.09339428, 8.483394282, 22.51339428, 32.75339428, 40.60946239, 24.53425632, -3.115743677, 4.334256323, 6.161887696, 13.7218877, 16.59113508, 20.29624628, 17.66632587, 20.53632587, 22.77632587, 24.97632587, 29.31632587, 35.93516087, 39.91516087, 44.55516087, 51.35516087, 55.17516087, 59.54516087, 65.66410148, 63.08293911, 67.45152187, 71.54152187, 56.23775574, 60.57808232, 64.01808232, 67.38808232, 70.65808232, 73.88808232, 69.04808232, 71.23808232, 54.25725429, 45.80244466, 49.14912442, 44.08798298, 58.68798298, 64.27798298, 80.00977329, 84.96977329, 85.05198605, 91.0124134, 94.1124134];
var sellCost = [7533.1, 7530.18, 7525.93, 7530.85, 7538.27, 7534.44, 7531.7, 7521.71, 7498.74, 7511.88, 7500.592509, 7498.76, 7528.4, 7517.06, 7529.88, 7540.91, 7532, 7549.78, 7408.05, 7436.74, 7409.34, 7408.54, 7356.304794, 7367.31, 7398.23, 7379.497631, 7428.46, 7405.199247, 7409.635111, 7412.09, 7409.54, 7402.24, 7456.12, 7628.17, 7618.978835, 7614.77, 7622.5, 7640.81, 7630.27, 7625.32, 7645.72, 7644.068838, 7645.398583, 7649.35, 7652.306234, 7653.55, 7664.54, 7655.86, 7654.6, 7652.93, 7648.85, 7652.86, 7650.81, 7665.6, 7670.16, 7671.1, 7688.13, 7694.36, 7667.80179, 7691.27, 7690.602213, 7690.620427, 7760.6];
var times = ['Sun Jul 22 23:45:00 2018', 'Sun Jul 22 23:50:00 2018', 'Mon Jul 23 00:15:00 2018', 'Mon Jul 23 00:20:00 2018', 'Mon Jul 23 00:25:00 2018', 'Mon Jul 23 00:30:00 2018', 'Mon Jul 23 00:45:00 2018', 'Mon Jul 23 00:50:00 2018', 'Mon Jul 23 01:05:00 2018', 'Mon Jul 23 01:10:00 2018', 'Mon Jul 23 01:55:00 2018', 'Mon Jul 23 02:00:00 2018', 'Mon Jul 23 02:25:00 2018', 'Mon Jul 23 02:35:00 2018', 'Mon Jul 23 02:45:00 2018', 'Mon Jul 23 04:40:00 2018', 'Mon Jul 23 04:45:00 2018', 'Mon Jul 23 05:15:00 2018', 'Mon Jul 23 05:40:00 2018', 'Mon Jul 23 05:45:00 2018', 'Mon Jul 23 05:55:00 2018', 'Mon Jul 23 06:00:00 2018', 'Mon Jul 23 06:05:00 2018', 'Mon Jul 23 06:10:00 2018', 'Mon Jul 23 06:15:00 2018', 'Mon Jul 23 06:25:00 2018', 'Mon Jul 23 07:00:00 2018', 'Mon Jul 23 07:15:00 2018', 'Mon Jul 23 07:40:00 2018', 'Mon Jul 23 07:45:00 2018', 'Mon Jul 23 07:55:00 2018', 'Mon Jul 23 08:05:00 2018', 'Mon Jul 23 09:00:00 2018', 'Mon Jul 23 11:05:00 2018', 'Mon Jul 23 11:10:00 2018', 'Mon Jul 23 11:15:00 2018', 'Mon Jul 23 11:25:00 2018', 'Mon Jul 23 11:35:00 2018', 'Mon Jul 23 11:45:00 2018', 'Mon Jul 23 11:50:00 2018', 'Mon Jul 23 12:15:00 2018', 'Mon Jul 23 12:20:00 2018', 'Mon Jul 23 12:25:00 2018', 'Mon Jul 23 12:30:00 2018', 'Mon Jul 23 12:35:00 2018', 'Mon Jul 23 13:10:00 2018', 'Mon Jul 23 13:35:00 2018', 'Mon Jul 23 13:40:00 2018', 'Mon Jul 23 13:45:00 2018', 'Mon Jul 23 13:50:00 2018', 'Mon Jul 23 13:55:00 2018', 'Mon Jul 23 14:00:00 2018', 'Mon Jul 23 14:05:00 2018', 'Mon Jul 23 14:10:00 2018', 'Mon Jul 23 14:15:00 2018', 'Mon Jul 23 14:20:00 2018', 'Mon Jul 23 14:25:00 2018', 'Mon Jul 23 14:25:00 2018', 'Mon Jul 23 14:45:00 2018', 'Mon Jul 23 14:50:00 2018', 'Mon Jul 23 14:55:00 2018', 'Mon Jul 23 15:00:00 2018', 'Mon Jul 23 15:40:00 2018'];
var data = [{
        name: formatTime(times[0]),
        value: [formatTime(times[0]), buyCost[0]]
    },
    {
        name: formatTime(times[20]),
        value: [formatTime(times[20]), buyCost[20]]
    },
    {
        name: formatTime(times[50]),
        value: [formatTime(times[50]), buyCost[50]]
    }
];
for(var i = 0 ; i < buyCost.length ; i++){
    data.push({
        
    })
}
var anchor = [{
        name: 'Sun Jul 22 23:00:00 2018',
        value: ['Sun Jul 22 23:00:00 2018', 7000]
    },
    {
        name: 'Sun Jul 23 23:00:00 2018',
        value: ['Sun Jul 22 23:00:00 2018', 7000]
    }
];

var ttt = "Sun Jul 22 23:45:00 2018"
var t = new Date(ttt);

option = {
    title: {
        text: formatTime("Sun Jul 22 23:45:00 2018")
    },
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        min: 6000,
        max: 8000,
        splitLine: {
            show: true
        }
    },
    series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
        },
        {
            name: '.anchor',
            type: 'line',
            showSymbol: false,
            data: anchor,
            itemStyle: {
                normal: {
                    opacity: 0
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0
                }
            }
        }
    ]
};
    
截图如下