ECharts Legend完整教程：設計數據可視化和互動圖表

一、什麼是ECharts？

ECharts是一個開源的可視化圖表庫，由阿里巴巴前端團隊根據業務需求自主研發。它可以通過HTML5 Canvas或者SVG實現可交互的數據可視化展現。

使用ECharts，開發者可以輕鬆構建各種類型的圖表，如折線圖、柱狀圖、餅圖等。同時，它還支持動態數據更新和交互事件，如數據區域縮放、數據展示、數據標記等。

二、ECharts中的Legend

Legend是圖例的意思，用於說明圖表中不同系列的含義。在ECharts中，Legend可以用於切換不同的數據系列的可見性，方便用戶查看不同系列的數據。

在ECharts中，我們可以通過配置項中的legend屬性來定義Legend的樣式、位置、數據等信息。

下面我們看一下Legend的基本配置代碼：

option = {
    legend: {
        data: ['銷量']
    },
    xAxis: {
        data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
}

在這段代碼中，legend屬性中的data屬性表示Legend的數據，這裡我們只有一個數據項，即銷量。

三、Legend的樣式配置

在ECharts中，Legend的樣式可以通過多個屬性進行配置，下面我們介紹一些常用的屬性。

1. orient：表示Legend的布局方向，可設置為horizontal和vertical。默認是水平方向。

下面是一個垂直方向的Legend配置示例：

option = {
    legend: {
        orient: 'vertical',
        x: 'right',
        y: 'middle',
        data: ['銷量']
    },
    ...
}

2. textStyle：表示Legend文本的樣式，可設置字體大小、字體顏色等信息。

下面是購買量Legend的文本樣式配置示例：

option = {
    legend: {
        data: [{
            name: '化妝品',
            textStyle: {
                fontSize: '20',
                color: '#FF4500'
            }
        }]
    },
    ...
}

3. backgroundColor：表示Legend的背景顏色，可設置為任意有效的顏色值。

下面是Legend的背景顏色配置示例：

option = {
    legend: {
        backgroundColor: '#F5FCFF',
        data: ['銷量']
    },
    ...
}

四、Legend的數據源配置

在ECharts中，Legend的數據源可以使用多個方式配置，下面我們介紹幾種常用方式。

1. data屬性：用於固定數據源，可以使用數組或對象的形式。

下面是使用數組形式的數據源配置示例：

option = {
    legend: {
        data: ['銷量']
    },
    ...
}

下面是使用對象形式的數據源配置示例：

option = {
    legend: {
        data: [{
            name: '銷量',
            icon: 'rect'
        }]
    },
    ...
}

2. series屬性：用於從數據系列中動態綁定數據源，使用數組的形式。

下面是使用series屬性動態綁定數據源的配置示例：

option = {
    xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    legend: {
        data: []
    },
    series: [{
        name: '購買量',
        type: 'bar',
        data: [100, 200, 300, 400, 500, 600],
        showInLegend: true
    }]
}

在這個示例中，Legend的數據源為空數組，series屬性中的showInLegend選項設置為true，則自動將圖例綁定到該數據系列。

五、Legend的事件配置

在ECharts中，Legend也可綁定事件，如單擊事件（click），雙擊事件（dblclick）等。

下面是一個單擊事件的配置示例：

option = {
    legend: {
        data: ['銷量'],
        selected: {
            '銷量': true
        },
        align: 'left',
        padding: 10,
        itemGap: 20,
        itemWidth: 50,
        itemHeight: 30,
        textStyle: {
            color: 'black',
            fontSize: 14
        },
        emphasis: {
            textStyle: {
                color: 'red'
            }
        }
    },
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
}

myChart.on('legendselectchanged', function(obj) {
    console.log(obj.name);
});

在這個示例中，我們通過on方法綁定了一個名為legendselectchanged的事件，當用戶單擊Legend時，控制台會輸出對應的數據項名稱。

六、總結

本文介紹了ECharts中Legend的基本概念、樣式、數據源和事件綁定等。使用ECharts，你可以輕鬆地創建可視化圖表，並通過Legend來展示不同系列的數據信息。