使用 ECharts 3 为地图添加图例150

ECharts 3 是一个流行的 JavaScript 图表库，它允许您创建交互式、可视化的图表。它提供了各种功能，包括在地图上添加标记的能力。

在本文中，我们将讨论如何使用 ECharts 3 为地图添加图例。我们将首先创建一个基本的地图，然后我们将添加图例以显示地图上的不同区域。

创建基本地图

要创建基本地图，我们需要先创建一个 ECharts 实例。我们可以通过将 `echarts` 库加载到我们的 HTML 页面来做到这一点。```html

```

接下来，我们需要创建一个 `div` 元素，作为我们图表的目标容器。```html

```

现在我们可以使用 ECharts API 创建一个地图实例。```javascript
var myChart = (('map'));
```

接下来，我们需要向地图添加数据。我们可以使用 `setOption()` 方法来做到这一点。我们将传递一个包含地图配置的对象，其中包括数据。```javascript
({
series: [{
type: 'map',
name: '中国',
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '广州', value: 300}
]
}]
});
```

这将创建一个包含三个区域（北京、上海和广州）的基本地图。每个区域的值表示该区域中的一些值（例如人口）。

添加图例

现在我们已经创建了一个基本地图，我们可以添加一个图例来显示地图上的不同区域。我们可以在 `legend` 选项中设置图例。```javascript
({
legend: {
data: ['北京', '上海', '广州']
},
series: [{
type: 'map',
name: '中国',
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '广州', value: 300}
]
}]
});
```

这将在地图的右侧添加一个图例。图例将包含地图上的三个区域的名称：北京、上海和广州。

自定义图例

我们可以使用 `legend` 选项中的各种属性来自定义图例。例如，我们可以更改图例的位置、颜色和形状。```javascript
({
legend: {
data: ['北京', '上海', '广州'],
left: 'center',
top: 'bottom',
textStyle: {
color: 'red',
fontSize: 14
},
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
series: [{
type: 'map',
name: '中国',
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '广州', value: 300}
]
}]
});
```