在使用 Vue 和 Echarts 組合進(jìn)行數(shù)據(jù)可視化時(shí)，圖例是一個(gè)重要的組成部分，它可以展示圖表中數(shù)據(jù)的不同類別和含義。Vue Echarts 提供了方便的圖例設(shè)置方式，下面我們來(lái)一起了解一下。

在 Vue Echarts 中，我們可以通過(guò) options 配置來(lái)設(shè)置圖例。options 中有一個(gè)屬性 legends，它是一個(gè)數(shù)組，里面存放了多個(gè)對(duì)象，每個(gè)對(duì)象代表一個(gè)圖例。每個(gè)圖例的屬性包括名稱 name、圖例類型 type 和用于標(biāo)識(shí)的 icon。下面是一個(gè)簡(jiǎn)單的例子：

<template>
<div class="chart">
<ve-line :options="chartOptions"></ve-line>
</div>
</template>
<script>
export default {
data() {
return {
chartOptions: {
legend: {
data: [
{ name: "新增用戶數(shù)", icon: "circle", type: "plain" },
{ name: "活躍用戶數(shù)", icon: "circle", type: "plain" }
]
},
series: [
{
name: "新增用戶數(shù)",
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "活躍用戶數(shù)",
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}
};
}
};
</script>

在這個(gè)例子中，我們通過(guò)設(shè)置 chartOptions 中的 legend 屬性來(lái)設(shè)置圖例。legend 的 data 屬性是一個(gè)數(shù)組，里面存放了兩個(gè)對(duì)象，分別表示新增用戶數(shù)和活躍用戶數(shù)。在實(shí)際的應(yīng)用場(chǎng)景中，我們可以根據(jù)需要設(shè)置更多的圖例。

除了上述例子中的 plain 類型圖例，Vue Echarts 還提供了其他幾種類型的圖例，包括 scroll、plain、plain2、scroll1、scroll2、scroll3。這些圖例類型不同的展示方式，我們可以根據(jù)不同的場(chǎng)景來(lái)選擇合適的類型。

總的來(lái)說(shuō)，在 Vue Echarts 中設(shè)置圖例非常方便，通過(guò)簡(jiǎn)單的配置就能夠?qū)崿F(xiàn)多個(gè)圖例的展示，并且支持不同類型的圖例。在實(shí)際的應(yīng)用過(guò)程中，我們需要靈活運(yùn)用圖例來(lái)展示數(shù)據(jù)的含義和分類信息。