echart常用柱形与曲线组合图表

//收入趋势图
// X轴时间
var daysOfMonth = [];
function createMonthDay(year, month) {
    var d = new Date();
    var lastDayOfMonth = new Date(year, month, 0).getDate();
    for(var i = 1; i <= lastDayOfMonth; i++) {
        daysOfMonth.push(year + '-' + month + '-' + i);
    }
    return daysOfMonth;
}
createMonthDay(2017, 12);
// X轴时间
var axisData = daysOfMonth;

incomeChartOption = {
    title: {
        text: '近1月收入趋势',
        x: 'center',
        // y: 15,
        textStyle: {
            fontSize: '16',
            fontWeight: 'normal',
            color: '#333'
        }
    },
    tooltip : {   //houver时提示数据
        trigger: 'axis'
    },
    calculable : true,
    legend: {
        data:['线下','线上','总计'],
        x: 'center',
        y: 'bottom',
        padding: 0
        // itemGap: 15,
        // itemHeight: 19,
        // itemWidth: 30,
        // textStyle: {
        //     color: '#999'
        // }
    },
    dataZoom: {   //滚动条
        show: true,
        y: 270,
        // realtime: true,
        start: 30,
        end: 70,
        height: 12,
        handleColor: '#1a8edc',
        handleSize: 5,
        fillerColor: '#a5cdea'
    },
    grid: {   //整体图表位置
        y:40,
        y2:80
    },
    xAxis : [
        {
            type : 'category',
            axisLine: {   //坐标轴
                show:true,
                lineStyle: {
                    width: 1,
                    color: '#999'
                }
            },
            axisTick: {   //刻度
                lineStyle: {
                    width: 1,
                    color: '#999'
                }
            },
            axisLabel: {   //坐标轴文字设置
                textStyle: {
                    color: '#666'
                    // baseline: 'middle'
                },
                rotate: 28   //文字旋转
            },
            data :axisData
        }
    ],
    yAxis : [
        {
            type : 'value',
            // name : '收入',
            nameTextStyle: {  //坐标轴标题文字设置
                color: '#333'
            },
            axisLine: {   //坐标轴
                show:true,
                lineStyle: {
                    width: 1,
                    color: '#ccc'
                }
            },
            splitLine: {     //背景网格线
                lineStyle: {
                    color: '#ccc',
                    width: 1
                }
            },
            axisTick: {   //刻度
                show: false
            },
            axisLabel:{   //坐标轴文字设置
                textStyle: {
                    color: '#666'
                }
            }

        },
        {
            type : 'value',   //曲线图y轴
            // name : '温度',
            axisLine: {   //坐标轴
                show:true,
                lineStyle: {
                    width: 1,
                    color: '#ccc'
                }
            },
            axisLabel : {   //坐标轴文字设置
                show:false,
                formatter: '{value} °C'
            },
            splitLine: false,  //网格线
            axisTick: {   //刻度
                show: false,
                lineStyle: {
                    color: '#76AFF4',
                    width: 1
                }
            }
        }
    ],
    series : [

        {
            name:'线下',
            type:'bar',
            barGap: 0,  //两柱子距离
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
        },
        {
            name:'线上',
            type:'bar',
            barGap: 0,  //两柱子距离
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,182.2, 48.7, 18.8, 6.0, 2.3,2.6, 5.9]
        },
        {
            name:'总计',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};

附图;