詳解Echarts堆疊圖

一、堆疊圖基本介紹

Echarts是百度開源的一個基於JavaScript的數據可視化庫，擁有豐富的圖表類型和可擴展性，堆疊圖是其中的一種圖表類型。堆疊圖能夠將多個系列的數據堆疊起來，形成一個整體。

堆疊圖的特點是：同一類別的數據在圖中會被一起堆疊，每個數據點的值都被分成了若干部分，每個部分代表該數據點屬於哪個系列，每個數據點所有部分的和表示該類別的總數。堆疊圖也可以通過設置offset屬性來進行堆疊條形圖或者堆疊面積圖等。

下面是一個簡單的堆疊圖的示例代碼：

// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項和數據
var option = {
    title: {
        text: '堆疊圖示例'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data:['郵件營銷','聯盟廣告','視頻廣告']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'郵件營銷',
            type:'line',
            stack: '總量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'聯盟廣告',
            type:'line',
            stack: '總量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'視頻廣告',
            type:'line',
            stack: '總量',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data:[150, 232, 201, 154, 190, 330, 410]
        }
    ]
};

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

二、堆疊圖的主要參數

1. stack

stack是堆疊圖的核心參數，它指定了每個系列所使用的堆疊ID。如果兩個系列的stack相同，則它們會疊在一起，不同的stack值會將系列彼此分離，不在同一條垂直方向上堆疊。

series: [
    {
        name: '郵件營銷',
        type: 'bar',
        stack: '廣告',
        data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
        name: '聯盟廣告',
        type: 'bar',
        stack: '廣告',
        data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
        name: '視頻廣告',
        type: 'bar',
        stack: '廣告2',
        data: [150, 232, 201, 154, 190, 330, 410]
    }
]

2. areaStyle

areaStyle用來設置區域填充樣式，支持多種填充效果。當堆疊圖有多個系列時，可以將之前的系列的樣式設為空，只保留最上層的系列顯示顏色來實現區域填充效果。

series: [
    {
        name:'郵件營銷',
        type:'line',
        stack: '總量',
        areaStyle: {},
        emphasis: {
            focus: 'series'
        },
        data:[120, 132, 101, 134, 90, 230, 210],
        // 設為空，則只保留最上層的系列顯示顏色來實現區域填充效果
        itemStyle: {
            normal: {
                color: ''
            }
        }
    },
    ...
]

3. yAxis和xAxis

yAxis和xAxis是分別用來設置縱軸和橫軸的參數，包括軸線、刻度、標籤等。

yAxis: {
    type: 'value',
    axisLabel: {
        formatter: '{value} 元'
    }
},
xAxis: {
    type: 'category',
    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}

三、堆疊圖小技巧

1. 反轉坐標軸

可以通過設置坐標軸類型為’category’和’time’來實現X軸和Y軸的反轉。當需要顯示X軸為數值類型而不是類別類型時，設置X軸的坐標類型為’value’。

xAxis: {
    type: 'value'
},
yAxis: {
    type: 'category',
    data: ['周一','周二','周三','周四','周五','周六','周日']
}

2. 防止數據順序混亂

在堆疊圖中，數據的堆疊順序決定了圖表的呈現順序。默認情況下，Echarts將系列的數據按照數組順序顯示，因此需要對數據進行排序來保證不同系列的數據堆疊順序正確。

// 對數據按照從大到小的順序排序
data: data.sort(function (a, b) {
    return a.value - b.value;
})

3. 堆疊圖和其它圖表進行聯動

可以通過使用Echarts的事件來實現堆疊圖和其它圖表之間的聯動。可以通過設置series的名稱和id來實現不同圖表之間的數據聯通。

// 堆疊圖點擊事件
myChart.on('click', function (params) {
    // params中包含了堆疊圖被點擊的數據信息，可以通過其name屬性進行數據過濾和聯動
    console.log(params.name);
    // 獲取聯動圖表
    var otherChart = echarts.getInstanceByDom(document.getElementById('otherChart'));
    // 聯動更新
    otherChart.setOption({
        series: [{
            id: 'series1', // 聯通的series的id
            data: [...]
        }]
    });
});

四、結語

Echarts堆疊圖是一種非常實用的數據可視化圖表類型，它不僅可以分析數據中的各個部分之間的關係，還能夠方便地表現整體與部分之間的比例關係。通過不斷對堆疊圖的學習和實踐，可以掌握Echarts強大的可視化分析能力。