写一个echarts世界地图
时间: 2023-05-19 12:03:38 浏览: 58
好的,以下是一个简单的 echarts 世界地图的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 世界地图</title>
<!-- 引入 echarts.min.js -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 用于显示地图的 div -->
<div id="map" style="width: 800px; height: 600px;"></div>
<script>
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('map'));
// 配置项
var option = {
title: {
text: '世界地图',
subtext: '数据来源:xxx',
left: 'center'
},
tooltip: {
trigger: 'item'
},
// 地图
series: [
{
name: '世界地图',
type: 'map',
map: 'world',
roam: true,
label: {
show: true
},
// 数据
data: [
{name: 'Afghanistan', value: 28397.812},
{name: 'Angola', value: 19549.124},
{name: 'Albania', value: 3150.143},
// ...省略部分数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
这是一个简单的 echarts 世界地图的代码示例,你可以根据自己的需求进行修改和扩展。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)