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]
                }
            ]
        };

效果圖: