ECharts3D地图
了解和使用ECharts3D地图，包括基础设置、地图标记、地图飞线、地图凸起等图表展现。
文章共2,110字 · 阅读需要大约8分钟
一键AI生成摘要，助你高效阅读
问答
·
1.小节概述
上小节中，使用ECharts绘制出了地图数据展示，那么本小节将通过ECharts-GL进一步实现3D效果呈现。ECharts-GL为ECharts补充了丰富的三维可视化组件，ECharts-GL的配置项完全是按照ECharts的标准和上手难度来设计的，使得在不需要了解WebGL和三维动画原理的情况下也能绘制出想要的3D图表。在本小节中，主要记录ECharts3D地图的基础设置，结合实际业务场景实现地图标记、地图飞线、地图凸起等图表展现。
2.操作步骤
2.1.基础设置
1.安装配置echarts-gl：（1）在VSCode中，新建终端，运行指令下载Echarts-GL依赖（npm install echarts-gl），下载完成后可以看到package.json中相关依赖信息。（2）在main.js中引入echarts-gl即可。
注意事项：留意echarts-gl和echarts的版本兼容性问题，官方提供的版本兼容性说明如下：ECharts GL 2.x is compatible with ECharts 5.x. ECharts GL 1.x is compatible with ECharts 4.x.
2.在主页HomeView.vue中，存放文字链接（3D地图），点击跳转对应的路由页面，路由配置（router下的index.js）。
3.复制出一个的图表组件ChartMapSeven.vue放在ChartMapStereo页图表1的位置上进行地图数据展示。此处数据展示使用上节最后一个地图数据（河南省区域销售金额展示），参考代码：
<template>
<div class="mainDiv">
<div class="titleDiv">区域销售金额</div>
<div class="chartDiv" id="chartMapSeven"></div>
</div>
</template>
<script>
import HenanAreaMap from '@/assets/maps/HenanArea.json'
export default {
data() {
return {
chartData: {},
}
},
name: 'ChartMapSeven',
mounted() {
this.getChartData().then(() => {
// 数据请求到后渲染图表
this.renderChart()
})
},
methods: {
// 请求数据回来
async getChartData() {
this.chartData = await this.$axios({ url: 'sales/area' })
},
// 渲染图表
renderChart() {
// 使用registerMap注册地图json数据
this.$echarts.registerMap('HenanArea', HenanAreaMap)
let myChart = this.$echarts.init(document.getElementById('chartMapSeven'))
let chartData = this.chartData
var option = {
tooltip: {},
series: [
{
name: '销售额',
type: 'map3D',
// registerMap注册的地图名称
map: 'HenanArea',
boxWidth: 70,
viewControl: {
distance: 90,
},
label: {
show: true,
textStyle: {
fontSize: 12,
color: '#1d1d1d',
},
},
itemStyle: {
areaColor: '#10786c',
borderWidth: 1,
borderColor: 'rgb(54,192,118)',
},
data: chartData.data.areaData,
},
],
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
},
},
}
</script>
<style scoped>
</style>
2.2.地图标记
1.有时需要对地图上某个区域做下标记，和上节的设置类似，可以考虑配合3D散点（气泡图）来实现。复制出一个的图表组件ChartMapEight.vue放在ChartMapStereo页图表2的位置上进行展示，参考代码:
<template>
<div class="mainDiv">
<div class="titleDiv">区域销售金额</div>
<div class="chartDiv" id="chartMapEight"></div>
</div>
</template>
<script>
import HenanAreaMap from '@/assets/maps/HenanArea.json'
export default {
data() {
return {
chartData: {},
}
},
name: 'ChartMapEight',
mounted() {
this.getChartData().then(() => {
// 数据请求到后渲染图表
this.renderChart()
})
},
methods: {
// 请求数据回来
async getChartData() {
this.chartData = await this.$axios({ url: 'sales/area' })
},
// 渲染图表
renderChart() {
// 使用registerMap注册地图json数据
this.$echarts.registerMap('HenanArea', HenanAreaMap)
let myChart = this.$echarts.init(document.getElementById('chartMapEight'))
let chartData = this.chartData
var option = {
tooltip: {},
geo3D: {
show: false,
map: 'HenanArea',
boxWidth: 70,
viewControl: {
distance: 90,
},
},
series: [
{
name: '销售额',
type: 'map3D',
// registerMap注册的地图名称
map: 'HenanArea',
boxWidth: 70,
viewControl: {
distance: 90,
},
label: {
show: true,
textStyle: {
fontSize: 12,
color: '#1d1d1d',
},
},
itemStyle: {
areaColor: '#10786c',
borderWidth: 1,
borderColor: 'rgb(54,192,118)',
},
data: chartData.data.areaData,
},
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
zlevel: 15,
symbol: 'pin',
symbolSize: 45,
data: [
{
name: '豫中',
value: [113.7395, 34.254862],
},
],
},
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
zlevel: 15,
symbol: 'pin',
symbolSize: 45,
data: [
{
name: '豫南',
value: [114.000296,33.005005],
},
],
},
],
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
},
},
}
</script>
<style scoped>
</style>
2.至此，地图标记相关介绍告一段落，启动项目，预览ChartMapStereo页如下图：
2.3.地图飞线
1.在3D地图上添加飞线效果，可以考虑配合3D路径图来实现。复制出一个的图表组件ChartMapNine.vue放在ChartMapStereo页图表3的位置上进行展示，参考代码:
<template>
<div class="mainDiv">
<div class="titleDiv">区域销售金额</div>
<div class="chartDiv" id="chartMapNine"></div>
</div>
</template>
<script>
import HenanAreaMap from '@/assets/maps/HenanArea.json'
export default {
data() {
return {
chartData: {},
}
},
name: 'ChartMapNine',
mounted() {
this.getChartData().then(() => {
// 数据请求到后渲染图表
this.renderChart()
})
},
methods: {
// 请求数据回来
async getChartData() {
this.chartData = await this.$axios({ url: 'sales/area' })
},
// 渲染图表
renderChart() {
// 使用registerMap注册地图json数据
this.$echarts.registerMap('HenanArea', HenanAreaMap)
let myChart = this.$echarts.init(document.getElementById('chartMapNine'))
let chartData = this.chartData
var option = {
tooltip: {},
geo3D: {
show: false,
map: 'HenanArea',
boxWidth: 70,
viewControl: {
distance: 90,
},
},
series: [
{
name: '销售额',
type: 'map3D',
// registerMap注册的地图名称
map: 'HenanArea',
boxWidth: 70,
viewControl: {
distance: 90,
},
label: {
show: true,
textStyle: {
fontSize: 12,
color: '#1d1d1d',
},
},
itemStyle: {
areaColor: '#10786c',
borderWidth: 1,
borderColor: 'rgb(54,192,118)',
},
data: chartData.data.areaData,
},
{
type: 'lines3D',
coordinateSystem: 'geo3D',
zlevel: 10,
effect: {
show: true,
period: 5,
},
lineStyle: {
color: 'blue',
width: 3,
opacity: 0.5,
},
data: [
{
coords: [
[113.417547, 34.18131],
[113.620852, 32.944428],
],
},
],
},
{
type: 'lines3D',
coordinateSystem: 'geo3D',
zlevel: 10,
effect: {
show: true,
period: 5,
},
lineStyle: {
color: 'blue',
width: 3,
opacity: 0.5,
},
data: [
{
coords: [
[113.417547, 34.18131],
[114.946679, 34.461881],
],
},
],
},
{
type: 'lines3D',
coordinateSystem: 'geo3D',
zlevel: 10,
effect: {
show: true,
period: 5,
},
lineStyle: {
color: 'blue',
width: 3,
opacity: 0.5,
},
data: [
{
coords: [
[113.417547, 34.18131],
[114.015235, 35.729155],
],
},
],
},
{
type: 'lines3D',
coordinateSystem: 'geo3D',
zlevel: 10,
effect: {
show: true,
period: 5,
},
lineStyle: {
color: 'blue',
width: 3,
opacity: 0.5,
},
data: [
{
coords: [
[113.417547, 34.18131],
[111.894857, 34.638283],
],
},
],
},
],
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
},
},
}
</script>
<style scoped>
</style>
2.至此，地图飞线相关介绍告一段落，启动项目，预览ChartMapStereo页如下图：
2.4.地图凸起
1.有时想让地图上某些区域进行凸起显示，代表数据比较醒目。复制出一个的图表组件ChartMapTen.vue放在ChartMapStereo页图表4的位置上进行展示，参考代码:
<template>
<div class="mainDiv">
<div class="titleDiv">区域销售金额</div>
<div class="chartDiv" id="chartMapTen"></div>
</div>
</template>
<script>
import HenanAreaMap from '@/assets/maps/HenanArea.json'
export default {
data() {
return {
chartData: {},
}
},
name: 'ChartMapTen',
mounted() {
this.getChartData().then(() => {
// 数据请求到后渲染图表
this.renderChart()
})
},
methods: {
// 请求数据回来
async getChartData() {
this.chartData = await this.$axios({ url: 'sales/area' })
},
// 渲染图表
renderChart() {
// 使用registerMap注册地图json数据
this.$echarts.registerMap('HenanArea', HenanAreaMap)
let myChart = this.$echarts.init(document.getElementById('chartMapTen'))
let chartData = this.chartData
var option = {
tooltip: {},
geo3D: {
map: 'HenanArea',
boxWidth: 70,
viewControl: {
distance: 90,
},
regions: [
{ name: '豫北', height: 15 },
{ name: '豫西', height: 8 },
],
itemStyle: {
areaColor: '#10786c',
borderWidth: 1,
borderColor: 'rgb(54,192,118)',
},
},
series: [
{
name: '销售额',
type: 'map3D',
// registerMap注册的地图名称
map: 'HenanArea',
boxWidth: 70,
viewControl: {
distance: 90,
},
label: {
show: true,
textStyle: {
fontSize: 12,
color: '#1d1d1d',
},
},
itemStyle: {
areaColor: '#10786c',
borderWidth: 1,
borderColor: 'rgb(54,192,118)',
},
},
],
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
},
},
}
</script>
<style scoped>
</style>
2.至此，地图凸起相关介绍告一段落，启动项目，预览ChartMapStereo页如下图：
3.小节总结
ECharts-GL以扩展包的形式为ECharts补充了丰富的三维可视化组件。在本小节中，主要记录了基于ECharts-GL实现ECharts3D地图，包括基础设置以及如何实现地图标记、地图飞线、地图凸起等可视化图表。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)