案例一：中国地图的绘制
ECharts地图图表中，中国地图是最常见的应用之一。以下是一个简单的中国地图绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '中国地图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例二：世界地图的绘制
除了中国地图，ECharts还支持世界地图的绘制。以下是一个简单的世界地图绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '世界地图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '世界',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [
{name: '中国', value: Math.round(Math.random() * 1000)},
{name: '美国', value: Math.round(Math.random() * 1000)},
// ... 其他国家数据
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例三：自定义地图
ECharts支持自定义地图，你可以通过添加自定义地图数据来实现。以下是一个自定义地图的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '自定义地图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '自定义地图',
type: 'map',
mapType: 'custom',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
],
// 自定义地图数据
geoCoordMap: {
'北京': [116.46, 39.92],
'上海': [121.48, 31.22],
// ... 其他城市坐标
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例四：地图上的折线图
在地图上绘制折线图，可以直观地展示数据的变化趋势。以下是一个地图上折线图的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图上的折线图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '折线图',
type: 'lines',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.48, 31.22]},
// ... 其他城市坐标
],
lineStyle: {
color: 'red',
width: 2,
opacity: 0.6,
curveness: 0.2
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例五：地图上的散点图
散点图可以直观地展示数据点的分布情况。以下是一个地图上散点图的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图上的散点图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '散点图',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.48, 31.22]},
// ... 其他城市坐标
],
symbolSize: 10,
itemStyle: {
color: 'red'
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例六：地图上的柱状图
柱状图可以直观地展示数据的数量对比。以下是一个地图上柱状图的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图上的柱状图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '柱状图',
type: 'bar',
coordinateSystem: 'geo',
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
],
itemStyle: {
color: 'red'
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例七：地图上的饼图
饼图可以直观地展示数据的占比情况。以下是一个地图上饼图的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图上的饼图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '饼图',
type: 'pie',
coordinateSystem: 'geo',
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
],
itemStyle: {
color: 'red'
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例八：地图上的地图
在地图上绘制另一个地图，可以展示更丰富的信息。以下是一个地图上地图的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图上的地图示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '地图',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
]
},
{
name: '地图',
type: 'map',
mapType: 'custom',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
],
// 自定义地图数据
geoCoordMap: {
'北京': [116.46, 39.92],
'上海': [121.48, 31.22],
// ... 其他城市坐标
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例九：地图上的组合图表
将多种图表类型组合在一起，可以更全面地展示数据。以下是一个地图上组合图表的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图上的组合图表示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '折线图',
type: 'lines',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.48, 31.22]},
// ... 其他城市坐标
],
lineStyle: {
color: 'red',
width: 2,
opacity: 0.6,
curveness: 0.2
}
},
{
name: '散点图',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.48, 31.22]},
// ... 其他城市坐标
],
symbolSize: 10,
itemStyle: {
color: 'red'
}
},
{
name: '柱状图',
type: 'bar',
coordinateSystem: 'geo',
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他城市数据
],
itemStyle: {
color: 'red'
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例十：地图上的动画效果
ECharts地图图表支持丰富的动画效果，可以让你制作出炫酷的地图。以下是一个地图上动画效果的绘制案例：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '地图上的动画效果示例'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: '动画效果',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [
{name: '北京', value: Math.round(Math.random() * 1000)},
{name: '上海', value: Math.round(Math.random() * 1000)},
// ... 其他省份数据
],
animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
通过以上10个案例，相信你已经对ECharts地图图表有了更深入的了解。希望这些案例能够帮助你轻松制作出炫酷的地图！