ECharts3D地图_echarts 3d 地球实现选中各大洲

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地图，包括基础设置以及如何实现地图标记、地图飞线、地图凸起等可视化图表。