echarts 實現柱狀圖重疊而不是相互增加

1、引入echart 所需要的js和css，這不再引入

總量的數據是包含分量且大於等於分量

先上效果圖：

 

 當我們查看總量時，顯示的是將分量的也包含里面，這樣就不是疊加的數量了

 

 2、直接上代碼 (可復制代碼直接運行，前提是引入了相關的css和js)

var myChart = echarts.init(document.getElementById("chart1"), 'shine');
    var option = {
        color:["#7179CB","#4CCEFE"],
        title: {
            text:"統計總量",
            textStyle:{
                fontSize:16,
                padding:"10px"
            }
        },
        legend: {
            data: ["總量", "分量"],
        },
        tooltip: {},
        xAxis: {
            data: ['a','b','c','d']

        },
        yAxis: {
            splitArea: {show: false}
        },

        series: [
            {
                barWidth: 20,
                data:  ["47", "59", "95", "74",],
                name: "總量",
                type: "bar",
            },
            {
                barGap: "-100%", /*這里設置包含關系，只需要這一句話*/
                barWidth: 20,
                data: ["27", "24", "43", "10", ],
                name: "分量",
                type: "bar"
            }
        ]
    };
    myChart.setOption(option, true);

 

注：

barGap: "-100%", /*這里設置包含關系，只需要這一句話*/

在做柱狀圖的時候我們通常會碰到這么一個情況，就是第一組數比較大， 第二組數比較小，圖上顯示的時候第一組的數完全遮住了第二組的數，這樣看着不太友好！
如下圖所示：

 那么 我們該如何改成優先顯示較小的那一組數據那？  

其實答案很簡單，將這兩組數據的位置一換就ok

 

 

也就是說把小數放在較下的位置！其實也可以理解為回顯的時候優先從第二組數據開始回顯，和barGap放在哪個數組下方沒有任何關系！