vue用echarts 畫3d地球 且畫線

頁面效果如下：

 

                                            

項目結構如下：

 引入的包

"dependencies": {
    "core-js": "^3.3.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-aplayer": "^1.6.1",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "echarts": "^4.4.0",
    "echarts-gl": "^1.1.1",
    "element-ui": "^2.11.1"
  },

 地球的頁面

<template>
    <div class="earthmap" id="earth">

    </div>
</template>

<script>
    import echarts from 'echarts'
    import 'echarts/map/js/world.js'
    import 'echarts-gl'
    export default {
        data(){
            return{
                mapChart:{},
                //立體球形紋路
                option :{
                    globe: {
                        globeRadius: 83,
                        baseTexture: '',//貼圖 球形和平面的吻合
                        silent: true,
                        environment: require("../static/img/background.jpg"), //背景
                        heightTexture: require("../static/img/map.jpg"), //地球的整個紋路
                        shading: 'realistic',
                        light: {
                            main: {
                                color: '#fff',
                                intensity: 0,
                                shadow: false,
                                shadowQuality: 'high',
                                alpha: 55,
                                beta: 10
                            },
                            ambient: {
                                color: '#fff',
                                intensity: 1
                            }
                        },
                        postEffect: {
                            enable: false,
                            SSAO: {
                                enable: true,
                                radius: 10
                            }
                        },

                        //地球是否自己轉動 autoRotate為true時自己轉動
                        viewControl: {
                            autoRotate: true,
                            animationDurationUpdate: 2000,
                            targetCoord: ''
                        }
                    },
                    series: [
                       /* {
                            type: 'scatter3D',
                            coordinateSystem: 'globe',
                            blendMode: 'lighter',
                            symbolSize: 20,
                            symbol: 'pin',
                            silent: false,
                            itemStyle: {
                                color: function (params) {
                                    var colorList = ['rgb(246, 153, 180)', 'rgb(118,77,209)'];
                                    if (params.dataIndex % 2 != 0) {
                                        return colorList[0]
                                    } else {
                                        return colorList[1]
                                    }
                                },
                                opacity: 1
                            },
                            label: {
                                show: true,
                                textStyle: {
                                    fontSize: 20
                                },
                                formatter: function (params) {
                                    if (params.dataIndex % 2 != 0) {
                                        return 'Destination:\n' + params.name
                                    } else {
                                        return 'Departure:\n' + params.name
                                    }
                                },
                                position: 'top'
                            }
                        }*/
                        {
                            name: 'lines3D',
                            type: 'lines3D',
                            coordinateSystem: 'globe',
                            effect: {
                                show: true,
                                period: 2,
                                trailWidth: 3,
                                trailLength: 0.5,
                                trailOpacity: 1,
                                trailColor: '#0087f4'
                            },
                            blendMode: 'lighter',
                            lineStyle: {
                                width: 1,
                                color: '#0087f4',
                                opacity: 0
                            },
                            data: [],
                            silent: false,

                        }

                    ]

                },

                //平面地球 主要是設置地球的樣式
                mapOption: {
                    backgroundColor: 'rgba(20,104,121,0.71)',//當和立體球形貼圖是海洋的顏色
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 100000
                    },
                    series: [
                        {
                            type: 'map',
                            map: 'world',
                            left: 0,
                            top: 0,
                            right: 0,
                            bottom: 0,
                            environment: 'rgba(0,0,0,0)',
                            boundingCoords: [
                                [-180, 90],
                                [180, -90]
                            ],
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: 'rgb(0,232,232)',//地球紋路的顏色
                                    areaColor: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        //相鄰每個板塊 從上到下的顏色變化
                                        colorStops: [{
                                            offset: 0.2, color: 'rgb(0,48,62)' // 0% 處的顏色
                                        }, {
                                            offset: 0.8, color: 'rgba(0,179,188,0.8)' // 100% 處的顏色
                                        }],
                                        global: false // 缺省為 false
                                    },
                                }
                            }
                        }
                    ]
                }

            }
        },
        mounted(){
            this.initMap()
        },
        methods:{
             initMap(){

                 this.mapChart = echarts.init(document.createElement('canvas'), null, {
                     width: 3086,
                     height: 3048
                 });
                 //獲取容器並對其初始化
                 this.myChart = echarts.init(document.getElementById('earth'))

                 //將平面地球和立體球形的紋路重疊
                 this.mapChart.setOption(this.mapOption)
                 this.option.globe.baseTexture = this.mapChart

                 //隨機划多條線
                 for (let i = 0; i < 150; i++) {
                     this.option.series[0].data = this.option.series[0].data.concat(this.rodamData())
                 }

                 this.myChart.setOption(this.option);
                // this.myChart.setOption(this.mapOption);// 平面展開圖
             },

            //調用划線方法
            rodamData() {
                //let name = '隨機點' + Math.random().toFixed(5) * 100000
                // let longitude = Math.random() * 62 + 73
                let longitude = 105.18
                let longitude2 = Math.random() * 360 - 180
                // let latitude = Math.random() * 50 + 3.52
                let latitude = 37.51
                let latitude2 = Math.random() * 180 - 90
                return {
                    coords: [
                        [longitude2, latitude2],
                        [longitude, latitude]
                    ],
                    value: (Math.random() * 3000).toFixed(2)
                }
            }




    }



    }

</script>


<style>
    .earthmap{
        width: 100%;
        height: 700px;
        background: rgba(16, 167, 202, 0.39);
    }


</style>

 

統一的頁面 home.vue

<template>
    <div class="home">

        <div style="width: 100%;height: 100%">
            <Earth></Earth>
        </div>
       

    </div>
</template>

<script>

    import Earth from "@/components/Earth";


    export default {
        components: {
           
            Earth
        },
        data() {
            return {
            }
        }

    };
</script>

 

首頁 App.vue

<template>
    <div id="app">
        <Home/>
        <router-view/>
    </div>
</template>

<script>
    import Home from '@/views/Home'

    export default {
        components: {
            Home
        }
    }
</script>

<style lang="less">
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        width: 100%;
        height:100%;
    }

</style>