echarts 绘制地图
时间: 2023-08-25 20:16:10 浏览: 55
可以使用 echarts 绘制地图,以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 地图数据
var mapData = [
{ name: '北京', value: 100 },
{ name: '上海', value: 200 },
{ name: '广州', value: 150 },
// 其他省份的数据...
];
// 绘制地图配置项
var option = {
title: {
text: '中国地图示例',
subtext: '数据仅供参考',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true
},
series: [
{
name: '地图',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true
},
data: mapData
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
你可以将上述代码保存为一个 HTML 文件并在浏览器中打开,就可以看到一个简单的中国地图示例。你可以根据自己的需求修改地图数据和配置项,来绘制你想要的地图。