折线图

折线图

    var mzCapitalChart = echarts.init(document.getElementById('mzCapital'));
    var mzCapitalOption = {
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: '12'
            }
        },
        legend: {
            data:['收入','支出'],
            right:'5%'
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: ['20%', '20%'],    //X轴两边留白
            axisLine:{
                show:false  //轴线
            },
            axisTick:false, //刻度线
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
            type: 'value',
            axisLine:{
                show:false
            },
            splitLine:{
                show:false  //图形区域内的分隔线
            },
            splitArea:{
                show:true,
                areaStyle:{
                    color:['#eaedf1','#fff']    //图形区域内分隔背景色
                }
            },
            axisTick:false
        },
        color: ['#29b6ff','#61da94'],
        series: [
            {
                name:'收入',
                type:'line',
                smooth: true,
                data:[12000, 13200, 10100, 13400, 9000, 23000, 22000, 18200, 19100, 23400, 29000, 33000]
            },
            {
                name:'支出',
                type:'line',
                smooth: true,
                data:[22000, 18200, 19100, 23400, 29000, 33000, 31000, 10100, 13400, 9000, 23000, 21000]
            }
        ]
    };
// 使用刚指定的配置项和数据显示图表
mzCapitalChart.setOption(mzCapitalOption);