Echarts柱狀圖和折線圖結合

因功能需要，需要體現業務辦理量及環比，故通過echarts的柱狀圖和折線圖結合共同達到該效果；

①柱狀圖因區域數量不確定，爲保證查看的效果，使用dataZoom 組件用於區域縮放；

②折線圖因有正負數，故選擇環比最小和最大值作爲折線圖的起始座標。

另圖例使用漸變色，見option設置

html  elecBarChart需設定高度

<div class="full-width">
    <div id="elecBarChart" class="elecBarChart"></div>
</div>

js

//顯示業務辦理量趨勢柱形-折線圖
function showBarChart(data){
    var elecBarChart = echarts.init(document.getElementById('elecBarChart'));
    var elecBarOption = getElecBarOption();
    $scope.barMax = parseFloat(data[0].qoq);
    $scope.barMin = parseFloat(data[0].qoq);
    for(var i = 0;i < data.length;i++){
        var cur = parseFloat(data[i].qoq);
        var cur2 = parseFloat(data[i].qoq);
        cur > $scope.barMax ? $scope.barMax = cur : null;
        cur2 < $scope.barMin ? $scope.barMin = cur2 : null;

        elecBarOption.xAxis[0].data.push(data[i].area_name);
        elecBarOption.series[0].data.push(data[i].biz_num);
        elecBarOption.series[1].data.push(data[i].qoq);
    }
    elecBarOption.yAxis[1].min = Math.floor($scope.barMin);//折線圖y軸的最大座標
    elecBarOption.yAxis[1].max = Math.ceil($scope.barMax);//折線圖y軸的最小座標
    elecBarChart.setOption(elecBarOption);
}

function getElecBarOption() {
    var option = {
        legend: {//圖例組件
            x: 'center',
            y: 'bottom',
            show: true,
            textStyle: {//圖例的公用文本樣式。
                fontSize: 14,
                color: "#333",
            },
            itemGap: 20,//圖例每項之間的間隔。橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔。
            data: ['業務辦理量', '環比'],//圖例的數據數組。
            inactiveColor: '#ccc',//圖例關閉時的顏色。
        },
        grid: {//直角座標系內繪圖網格
            bottom: '12%',//grid 組件離容器下側的距離。
            left: '1%',
            right: '10%',
            containLabel: true//grid 區域是否包含座標軸的刻度標籤。
        },
        dataZoom: [//dataZoom 組件 用於區域縮放，從而能自由關注細節的數據信息，或者概覽數據整體，或者去除離羣點的影響。
            {
                show: true,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
        ],
        xAxis: [
            {
                type: 'category',
                data: [],
                axisPointer: {
                    type: 'shadow'
                },
                axisTick: {
                    show: true,
                    interval: 0
                },
                axisLabel: {
                    fontSize: 14,
                    color: "#333",
                },
            }],
        yAxis: [
            {
                type: 'value',
                show:true,
                splitNumber: 10,//座標軸的分割段數
                axisLabel: {
                    fontSize: 14,
                    color: "#333",
                },
                splitLine: {
                    show: false//是否顯示分隔線。
                },
            },
            {
                type: 'value',
                min: '',//最小座標
                max: '',//最大座標
                axisLabel: {
                    fontSize: 14,
                    color: "#333",
                    formatter: '{value} %'
                },
                splitLine: {
                    show: false//是否顯示分隔線。
                },
            }
        ],
        series: [
            {
                name:'業務辦理量',
                type:'bar',
                data:[],
                barWidth : '50%',
                itemStyle : {
                    normal : {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//圖例使用漸變色
                            offset: 0,
                            color: 'rgb(0, 102, 255)'
                        }, {
                            offset: 1,
                            color: 'rgb(0, 153, 255)'
                        }]),
                        label : {
                            show : true,
                            position : 'top',
                            textStyle : {
                                fontSize : '15',
                                fontWeight : 'bold',
                                color: 'rgb(51, 51, 51)',
                            }
                        },
                    },
                },
            },
            {
                name:'環比',
                type:'line',
                yAxisIndex: 1,    //這裏要設置哪個y軸，默認是最左邊的是0，然後1，2順序來。
                data:[],
                symbolSize:10,
                itemStyle : {
                    normal : {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 204, 102)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 153, 51)'
                        }]),
                        label : {
                            show : true,
                            position : 'top',
                            textStyle : {
                                fontSize : '14',
                                color: 'rgb(255, 156, 54)',
                            }
                        }
                    },
                },
            },
        ]
    }
    return option;
}

效果

注：此爲個人筆記及總結，有誤或有更好的解決方案請指正！謝謝