Echarts实战案例代码(1)：柱图堆叠方案备选案例

/*工资项目趋势分析堆积图*/
function wagesStr(dataName, dataList1, dataList2, dataList3, dataList4) {
    var myChart = echarts.init(document.getElementById('wages'));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            data: [
                {"name": "工资"},
                {"name": "提成"},
                {"name": "其他"},
                {"name": "总收入"}
            ],
            icon: "circle",
            "bottom": "2%",
            textStyle: {
                "color": "rgba(255,255,255,0.9)"
            }
        },
        "xAxis": [
            {
                type: "category",
                data: dataName,
                axisLine: {show: false},
                axisLabel: {
                    textStyle: {color: "rgba(255,255,255,.6)", fontSize: '14',},
                }
            }
        ],
        "yAxis": [
            {
                type: "value",
                name: "",
                axisLabel: {show: false},
                axisLine: {show: false},
                splitLine: {show: false}
            }
        ],
        "grid": {
            "top": "0%",
            "right": "5%",
            "bottom": "15%",
            "left": "0%",
            containLabel: true
        },
        series: [
            {
                "name": "工资",
                "type": "bar",
                stack: '总量',
                barWidth: "30%",
                barGap: "40%",
                "data": dataList1,
                itemStyle: {
                    barBorderRadius: 20,
                    color: "#2e4e6d"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            },
            {
                "name": "提成",
                "type": "bar",
                "data": dataList2,
                stack: '总量',
                barWidth: "30%",
                barGap: "40%",
                itemStyle: {
                    barBorderRadius: 20,
                    color: "#38636f"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                }
            },
            {
                "name": "其他",
                "type": "bar",
                stack: '总量',
                "data": dataList3,
                barWidth: "30%",
                barGap: "40%",
                itemStyle: {
                    barBorderRadius: 20,
                    color: "#293d42"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
                "barGap": "0"
            },
            {
                "name": "总收入",
                "type": "line",
                "yAxisIndex": 0,
                "data": dataList4,
                lineStyle: {
                    normal: {
                        width: 3
                    },
                },
                itemStyle: {
                    "color": {
                        "type": "linear",
                        "x": 0,
                        "y": 0,
                        "x2": 0,
                        "y2": 1,
                        "colorStops": [
                            {
                                "offset": 0,
                                "color": "#2c86e1"
                            },
                            {
                                "offset": 0.5,
                                "color": "#d4f170"
                            },
                            {
                                "offset": 1,
                                "color": "#ff943c"
                            }
                        ],
                        "globalCoord": false
                    }
                },
                "smooth": true
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}