echartslegend設置詳解

一、echartslegend位置

echartslegend位置可以設置在圖表的上方，下方，左側，右側以及圖表內。例如：

option = {
    legend: {
        // 位置設置在右側
        right: '10%'
    },
    // 其他配置項
}

設置在右側，可以使用right屬性，值為百分數或者像素值。其他位置同理。

二、echartslegend字體顏色

echartslegend字體顏色可以通過textStyle中的color屬性進行設置。例如：

option = {
    legend: {
        textStyle: {
            color: 'red' // 設置字體顏色為紅色
        }
    },
    // 其他配置項
}

三、echartslegend滾動

當echartslegend過多而顯示不全時，可以啟用echartslegend滾動。例如：

option = {
    legend: {
        type: 'scroll',
        // 其他配置項
    },
    // 其他配置項
}

設置type屬性為scroll即可開啟滾動，此時echartslegend會出現滾動條方便用戶查看所有標籤。

四、echartslegend大小

echartslegend大小可以通過itemWidth與itemHeight屬性進行設置。例如：

option = {
    legend: {
        itemWidth: 20, // 標籤寬度為20px
        itemHeight: 10 // 標籤高度為10px
    },
    // 其他配置項
}

五、echartslegend寬度

echartslegend寬度可以通過width屬性進行設置。例如：

option = {
    legend: {
        width: '80%', // echartslegend寬度為圖表寬度的80%
        // 其他配置項
    },
    // 其他配置項
}

設置寬度為百分數或者像素值。

六、echartslegend自定義

echartslegend可以進行自定義，例如添加圖標、調整布局等。例如：

option = {
    legend: {
        // 使用自定義圖標，布局調整為橫向排列
        data: [
            {
                name: '標籤1',
                icon: 'path://M0,0 L0,10 L10,5 L0,0', // 自定義圖標路徑
            },
            {
                name: '標籤2',
                icon: 'path://M0,0 L0,10 L10,5 L0,0',
            },
            {
                name: '標籤3',
                icon: 'path://M0,0 L0,10 L10,5 L0,0',
            }
        ],
        orient: 'horizontal', // 橫向排列
        // 其他配置項
    },
    // 其他配置項
}

七、echartslegend間距

echartslegend標籤之間可以通過padding與itemGap屬性進行設置。padding調整整個echartslegend區域的內邊距，itemGap調整標籤之間的距離。例如：

option = {
    legend: {
        padding: 20, // 內邊距為20px
        itemGap: 10 // 標籤之間距離為10px
    },
    // 其他配置項
}

八、echarts位置選取

將上面的相關屬性結合起來，可以靈活地進行echartslegend位置的選取。例如：

option = {
    legend: {
        type: 'scroll',
        orient: 'horizontal',
        width: '80%',
        itemWidth: 20,
        itemHeight: 10,
        padding: 20,
        itemGap: 10,
        textStyle: {
            color: 'red'
        },
        // 其他配置項
    },
    // 其他配置項
}