折线图对比echarts 折线配置项内容和展示

今年收入与去年收入折线图对比

      var colors = ["#FA607F", "#FF6531", "#2AC290", "#FBB900", "#359EFF", "#7D65FF"];
option = {
    backgroundColor: "#ffffff",
    color: colors,

    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['去年利润总额', '去年营业收入', '去年归母净利润', '今年利润总额', '今年营业收入', '今年归母净利润']
    },
    dataZoom: {
        top: '50%',
        height: '30',
        type: 'inside',
        show: true,
        xAxisIndex: [0, 1],
        startValue: 20,
        endValue: 40
    },
    animation: false,
    grid: [{
        left: 50,
        right: 50,
        height: '40%',
        width: '80%'
    }, {
        left: 50,
        right: 50,
        top: '55%',
        height: '40%',
        width: '80%'
    }],
    xAxis: [{
        type: 'category',
        data: ['01', '02', '03', '04', '05'],
        axisTick: {
            show: false,
        },
        gridIndex: 0
    }, {
        gridIndex: 1,
        axisLabel: {
            show: false
        },
        type: 'category',
        data: ['01', '02', '03', '04', '05'],
        position: 'top'
    }],
    yAxis: [{
            splitLine: {
                show: false
            },
            type: 'value',
            name: '去年',
            axisLabel: {
                formatter: '{value}'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            gridIndex: 0
        },
        {
            splitLine: {
                show: false
            },
            type: 'value',
            name: '今年',
            inverse: true,
            axisLabel: {
                formatter: '{value}'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            gridIndex: 1,
        }
    ],
    series: [
        {
            name: '去年利润总额',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            xAxisIndex: 0,
            data: [10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1, 10, 20, 30, 40, 50, 60, 66, 70, 28, 25, 99, 1]
        },
        {
            name: '去年营业收入',
            type: 'line',
            yAxisIndex: 0,
            xAxisIndex: 0,
            smooth: true,
            data: [50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40]
        },
        
        {
            name: '去年归母净利润',
            type: 'line',
            yAxisIndex: 0,
            xAxisIndex: 0,
            smooth: true,
            data: [10, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40, 50, 8, 20, 12, 20, 25, 28, 32, 28, 25, 20, 40]
        },
        {
            name: '今年利润总额',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            xAxisIndex: 1,
            data: [500, 80000, 20000, 120, 300, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000]
        },
        {
            name: '今年营业收入',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            xAxisIndex: 1,
            data: [5000, 80000, 2000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000]
        },
        {
            name: '今年归母净利润',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            xAxisIndex: 1,
            data: [5000, 80000, 20, 12000, 30000, 55000, 80000, 320, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000, 5000, 80000, 20000, 12000, 30000, 55000, 80000, 32000, 28000, 25000, 20000, 40000]
        }
    ]
};