Echarts 之堆積面積總數圖

效果圖

 代碼

    <!--01、 引入 ECharts 文件 -->
    <script src="../js/echarts-4.1.0/echarts.js"></script>
    <script src="../js/theme/customed.js"></script>
    <!--02、 構建 ECharts 數據源 -->
    <script type="text/javascript">
        var legendData =['數據1','數據2'];
        var xAxisData =  ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
        var ktData = [1324,1322,2680,2671,2680,2914,514,266,2660,2685,2683,2699];
        var xlData = [752,739,1526,1522,1517,1505,299,150,1536,1517,1515,1503];
        //總計
        var allData = function() {
            var datas = [];
            for (var i = 0; i < ktData.length; i++) {
                datas.push(ktData[i] + xlData[i]);
            }
            return datas;
        }();
        var option = {
            // title: {
            //     text: '折線總圖'
            // },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        // backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                // icon: "circle",
                itemWidth: 10,  // 設置寬度
                itemHeight: 10, // 設置高度
                itemGap: 2, // 設置間距
                textStyle:{
                    fontSize:10,
                },
                x: 'right',
                top:'-1',
                data:legendData
            },
            // toolbox: {
            //     feature: {
            //         saveAsImage: {}
            //     }
            // },
            grid: {
                top:'13%',
                left: '3%',
                right: '4%',
                bottom: '10',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    },
                    boundaryGap : false,
                    data :xAxisData
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:legendData[0],
                    type:'line',
                    stack: '總量',
                    areaStyle: {normal: {}},
                    data:ktData
                },
                {
                    name:legendData[1],
                    type:'line',
                    stack: '總量',
                    areaStyle: {normal: {}},
                    data:xlData
                },
                {
                    name: '總量',
                    type: 'line',
                    stack: 'sum',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            // textStyle:{ color:'#000' }
                        }
                    },
                    data: allData
                }
            ]
        };
 </script>

 工作中使用到的，總結歸納後，僅供各位大神們參考......