echarts堆疊圖添加總量

echarts在使用中每每會遇到須要展現總量信息的狀況，比較典型的就是3維統計的堆疊柱狀圖

堆疊是在柱狀圖的基礎上，給幾項設置同一stack來實現的。不考慮在tips中實現總和，有兩種方式能夠實現總和顯示。

第一種：

　　原理：在本來堆疊的柱狀圖基礎上，再堆疊一項，其值是各項之和。顯然，這樣就會變成多出一個與下邊高度相等的柱形。而後咱們設置這一項的label的position爲insideBotton（若是是左右橫向分佈則是insideLeft），這樣總量就顯示在了原始項的頂部。最後，咱們設置總和項的顏色透明（rgba(128, 128, 128, 0)）便可。

　　優化：該方法會把原先的座標給拉長兩倍，即會有一半的區域是空白的沒有圖像的。好比，原先的總和是100，如今再加上一個100，就是一共200的刻度了。可使用縮進，使圖表總體向上（橫向則是向右）縮進50%。對應的設置項是

grid: {
          left: "3%",
          right: "8%",
          bottom: "3%",
          containLabel: true
        }

第二種：

　　原理：在本來堆疊的柱狀圖的旁邊，再起一個總和的柱形，顯然這個柱形和本來的柱形的高度是相同的，而後咱們將其平移（barGap: '-100%'），使其與本來的柱形重合，這樣，最終的效果就是一個柱形了，高度也不會加倍。

　　優化：對於echarts的渲染，咱們知道，是根據配置項繪製的canvas，而繪製的順序就是咱們代碼書寫的順序。也就是說，若是咱們將總和放在後邊，那麼就會是總和的柱形覆蓋本來的柱形，本來柱形的顏色就看不到了。解決辦法有2個：

　　1.將總和放在前邊繪製，使用堆疊來覆蓋總和的柱形；

　　2.總和在後邊，設置總和的柱形的顏色爲透明（同第一種方法中的設置）。

　　除此以外，對於總和文字的顯示，若是咱們設置顯示在外部，那麼就可能會出現超出可見區域的現象，處理方法同第一種方案中，調整grid。另外，對於總和的label和原始數據的label，要設置不一樣的position來避免重疊。若是想要總和看起來明顯一些，能夠給總和的柱形添加一個border。對於數據個數比較多又容易出現0致使重疊的問題，能夠採用下邊的0不顯示或者若是position已經沒辦法比較重疊時，可使用拼接換行符、值先按比例放大以擴大圖形爭取到空間，在顯示文字的時候再按同比例縮小以爭取如今來解決。

附完整的option代碼：

  1 let option = {
  2         title: {
  3           text: "當陽各學校招生狀況",
  4           subtext: ""
  5         },
  6         tooltip: {
  7           trigger: "axis",
  8           axisPointer: {
  9             type: "shadow"
 10           }
 11         },
 12         legend: {
 13           data: ["軍人", "房產", "戶口", "經商", "務工"]
 14         },
 15         grid: {
 16           left: "3%",
 17           right: "8%",
 18           bottom: "3%",
 19           containLabel: true
 20         },
 21         xAxis: {
 22           type: "value",
 23           minInterval: 1
 24         },
 25         yAxis: {
 26           type: "category",
 27           data: []
 28         },
 29         series: [
 30           {
 31             name: "軍人",
 32             type: "bar",
 33             stack: '總量',
 34             data: [],
 35             label: {
 36                 normal: {
 37                     show: true,
 38                     position: 'insideLeft',
 39                     formatter: function(v) {
 40                       return v.value || ""
 41                     }
 42                 }
 43             },
 44             itemStyle: { 
 45               normal: { 
 46                 color: 'red'
 47               }
 48             }
 49           },
 50           {
 51             name: "房產",
 52             type: "bar",
 53             stack: '總量',
 54             //barWidth: "50px",
 55             data: [],
 56             label: {
 57                 normal: {
 58                     show: true,
 59                     position: 'insideLeft',
 60                     formatter: function(v) {
 61                       return v.value || ""
 62                     }
 63                 }
 64             },
 65             itemStyle: { 
 66               normal: { 
 67                 color: 'orange'
 68               }
 69             }
 70           },
 71           {
 72             name: "戶口",
 73             type: "bar",
 74             stack: '總量',
 75             data: [],
 76             label: {
 77                 normal: {
 78                     show: true,
 79                     position: 'insideLeft',
 80                     formatter: function(v) {
 81                       return v.value || ""
 82                     }
 83                 }
 84             },
 85             itemStyle: { 
 86               normal: { 
 87                 color: 'yellowgreen'
 88               }
 89             }
 90           },
 91           {
 92             name: "經商",
 93             type: "bar",
 94             stack: '總量',
 95             data: [],
 96             label: {
 97                 normal: {
 98                     show: true,
 99                     position: 'insideLeft',
100                     formatter: function(v) {
101                       return v.value || ""
102                     }
103                 }
104             },
105             itemStyle: { 
106               normal: { 
107                 color: 'green'
108               }
109             }
110           },
111           {
112             name: "務工",
113             type: "bar",
114             stack: '總量',
115             data: [],
116             label: {
117                 normal: {
118                     show: true,
119                     position: 'insideLeft',
120                     formatter: function(v) {
121                       return v.value || ""
122                     }
123                 }
124             },
125             itemStyle: { 
126               normal: { 
127                 color: 'cornflowerblue'
128               }
129             }
130           },
131           {
132             name: '總計',
133             type: 'bar',
134             stack: '總計',
135             barGap: '-100%',
136             label: {
137                 normal: {
138                     show: true,
139                     position: 'right',
140                     textStyle: { color: '#000' },
141                     formatter: function(v) {
142                       return "總計：" + (v.value)
143                     }
144                 }
145             },
146             itemStyle: { 
147               normal: { 
148                 color: 'rgba(128, 128, 128, 0)',
149                 borderWidth: 1,
150                 borderColor: '#1FBCD2'
151               } 
152             },
153             data: []
154           }
155         ]
156       };

其中

v.value || ""是爲了不數據爲0時都重疊在一塊兒的現象。