ECharts——柱状图+折线走势图

option = {
            title: [
                /*{
                    text: '标题',
                    left: 'center'
                },*/
            ],
            //当trigger为’item’时只会显示该点的数据，
            //为’axis’时显示该列下所有坐标轴所对应的数据。
            //提示框组件
            tooltip: {
                //？触发类型
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                orient: 'horizontal',
                top: '50px',
                data: ['a收益','b收益', 'c收益', 'd收益'],
                textStyle: {  // 统计项的样式
                    color: "#595959",
                    fontSize: 14
                },
                itemGap: 20  // 统计项的间隔
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category', //category:类目轴(适用于离散无序数组)    
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#595959", //X轴文字颜色
                        fontSize:14       // x轴文字大小
                    },
                    interval:0,         // 刻度间隔    
                    rotate:40,          // 倾斜角度
                    align: 'center',    // x轴文字居中
                    margin: 30          // 文字与x轴的间隔
                },
                axisLine: {
                    lineStyle: {
                        color: '#595959'  // x轴颜色
                    }
                },
                axisTick: {
                    show: true   // 是否展示轴线上的刻度
                }
            },
            yAxis: {
                type: 'value',
                name: "",
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#595959", //y轴文字颜色
                        fontSize:14       // y轴文字大小
                    },
                    formatter: '{value}%'
                },
                axisLine: {
                    lineStyle: {
                        color: '#595959'  // y轴颜色
                    }
                }
            },
            series: [
                // bar: 柱状图; line: 直线
                {
                    name: 'a收益',
                    type: 'bar',
                    barWidth: 55, // 柱子的宽度
                    itemStyle: {
                        normal: {
                            color: '#267CFF',
                            opacity: 0.6
                        }
                    },
                    data: [40, 41,42]
                },
                {
                    name: "b收益",
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#FFBE1F',
                            opacity: 0.6
                        }
                    },
                    data: [10, 11,12]
                },
                {
                    name: 'c收益',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#1CC4C4',
                            opacity: 0.6
                        }
                    },
                    data: [20, 21,22]
                },
                {
                    name: 'd收益',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#FCBB74',
                            opacity: 0.6
                        }
                    },
                    smooth: true,
                    data: [30, 31,32]
                }
            ]
        };

效果图: