Echarts美国地图
时间: 2023-08-24 16:12:31 浏览: 153
echart美国地图
你想要了解如何使用 ECharts 制作美国地图吗?以下是一个简单的实例:
```html
<!DOCTYPE html>
<html>
<head>
<title>ECharts - USA Map</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
title: {
text: 'USA Map'
},
tooltip: {},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['High', 'Low'],
seriesIndex: [1],
inRange: {
color: ['#e0ffff', '#006edd']
},
calculable: true
},
geo: {
map: 'USA',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: 'USA Map',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: 'New York', value: Math.round(Math.random()*1000)},
{name: 'Los Angeles', value: Math.round(Math.random()*1000)},
{name: 'Chicago', value: Math.round(Math.random()*1000)},
{name: 'Houston', value: Math.round(Math.random()*1000)},
{name: 'Philadelphia', value: Math.round(Math.random()*1000)},
{name: 'Phoenix', value: Math.round(Math.random()*1000)},
{name: 'San Antonio', value: Math.round(Math.random()*1000)},
{name: 'San Diego', value: Math.round(Math.random()*1000)},
{name: 'Dallas', value: Math.round(Math.random()*1000)},
{name: 'San Jose', value: Math.round(Math.random()*1000)}
],
symbolSize: 12,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
```
该实例使用 ECharts 5.0.1 版本,首先需要引入 echarts.min.js 文件。然后在页面中创建一个 div 容器,用于显示地图。在 JavaScript 中,我们定义一个 ECharts 实例,然后定义一个 option 对象,其中包含了地图的配置信息。最后使用 setOption 方法将 option 对象应用到 ECharts 实例中即可。
具体地图数据可以在 ECharts 提供的 MapJSON 文件中找到,例如美国地图对应的文件为 USA.json。可以在 ECharts 官网中找到更多地图数据和使用方式。
阅读全文