ECharts.js（四）-疊加

像這種的實現方式先附上代碼

var dom = document.getElementById("containerc");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '10%',
                    bottom: '10%'
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataView: {
                            show: false,
                            readOnly: false
                        },
                        magicType: {
                            show: false,
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: false
                        },
                        saveAsImage: {
                            show: false
                        }
                    }
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    name: '月份',
                    data: ["1","2","3"]
                }],
                yAxis: [{
                    type: 'value',
                    name: '份數',
                    
                }],
                series: [{
                    name: '知識點學習人數',
                    type: 'bar',
                    stack: '總量',
                    data: [2,3,4],
                    itemStyle: {
                        normal: {
                            color: "#2d85e4",
                            position: 'insideRight'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                        }
                    }
                },{
                    name: '知識點學習人數',
                    type: 'bar',
                    stack: '總量',
                    data: [2,3,4],
                    itemStyle: {
                        normal: {
                            color: "Brown",
                            position: 'insideRight'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                        }
                    }
                },
                    {
                        name: '知識點學習人數',
                        type: 'bar',
                        stack: '總量',
                        data: [2,3,4],
                        itemStyle: {
                            normal: {
                                color: "red",
                                position: 'insideRight'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                            }
                        }
                    }]
            };
            if(option && typeof option === "object") {
                myChart.setOption(option, true);
            }

最主要的就是這條

stack: '總量',

可讓他們最終疊加起來，

yAxis: [{
    type: 'value',
    name: '人數',
    min: 0,
    max: 10,
    interval:10,
}],

這個是能夠設置最大值和最小值的，可是去掉的話就會直接變成默認的總數量的最大值，並自動分爲5等份。