Echarts實戰案例代碼(2)：柱圖堆疊方案備選案例

option = {
        tooltip: {
        trigger: 'axis'
    },
    title:[{
        text:"70%",
        left:"2%",
        right: '85%'
    },{
        text:"15%",
        left:"32%",
        right: '51%'
    },{
        text:"-1.46%",
        left:"17%",
        right: '68%'
    },{
        text:"6.2%",
         left:"47%",
        right: '34%'
    },{
        text:"5.3%",
         left:"62%",
        right: '17%'
    }],
        grid: [{
        left:"1%",
        right: '86%'
    }, {
        left:"17%",
        right: '68%'
    }, {
        left:"34%",
        right: '51%'
    }, {
        left:"51%",
        right: '34%'
    }, {
        left:"68%",
        right: '17%'
    }],
    xAxis: [{
        type: 'category',
        inverse: true,
        data: ['營業收入\n 30,482萬元'],
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['淨利潤\n4,307萬元'],
        gridIndex: 1,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['淨資產收益率\n1.8%'],
        gridIndex: 2,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['淨利率\n36%'],
        gridIndex: 3,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    },{
        type: 'category',
        inverse: true,
        data: ['人均淨利率\n32%'],
        gridIndex: 4,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {
            formatter: function (value) {
                return value;
            }
        }
    }],
    yAxis: [{
        type: 'value',
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 1,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 2,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 3,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    },{
        type: 'value',
        gridIndex: 4,
        axisTick: {show: false},
        axisLine: {show: false},
        splitLine: {show: false},
        axisLabel: {show: false}
    }],
   series: [{
            name: 'A',
            type: 'bar',
              barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150]
        }, {
            name: 'A',
            type: 'bar',
            barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
            xAxisIndex: 1,
            yAxisIndex: 1
        },
        {
            name: 'B',
            type: 'bar',
            barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 1,
            yAxisIndex: 1
        }, {
            name: 'A',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            type: 'bar',
            data: [165],
            xAxisIndex: 2,
            yAxisIndex: 2
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#56f9b8'},
                                {offset: 1, color: '#74f853'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 2,
            yAxisIndex: 2
        }, {
            name: 'A',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
            xAxisIndex: 3,
            yAxisIndex: 3
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 3,
            yAxisIndex: 3
        }, {
            name: 'A',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: "rgba(59,80,91,.6)"
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [165],
            xAxisIndex: 4,
            yAxisIndex: 4
        },
        {
            name: 'B',
            type: 'bar',
             barWidth: "40%",
                itemStyle: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fd633f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#fba145'},
                                {offset: 0.7, color: '#fed53f'},
                                {offset: 1, color: '#fbe247'}
                            ]
                        )
                    }
                },
            data: [150],
            xAxisIndex: 4,
            yAxisIndex: 4
        }
    ]
};