一：要用Echarts實現(xiàn)3D地球 除了 echarts還是遠遠不夠的 ，除了echarts外 我們?還得引用 echarts-gl? jquery 也是需要的 不然會有多次報錯

1.收首先在 main.js中分別引入所需的插件，

import ElementUI, { install } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import * as echarts from 'echarts'
import 'echarts-gl'
import jquery from 'jquery'

Vue.use(ElementUI)
Vue.prototype.$ = jquery
// vue全局注入Echarts
Vue.prototype.$echarts = echarts

此外 除了在main.js中 在相應(yīng).vue 中也需要引用

import 'echarts-gl'
import $ from 'jquery' // 引入jQuery
import 'echarts/map/js/world.js' // 必須引入世界地圖

使用echarts的3D功能 全局引入Echarts-gl 一般建議裝最低版本 不然容易報錯，命令安裝

 npm install echarts-gl@1.1.0 --save

當效果實現(xiàn)前 還需給一個有寬高的盒子

<div id="main" style="width:100%;height:500px;padding:0px;"></div>

js代碼

import 'echarts-gl'
import $ from 'jquery' // 引入jQuery
import 'echarts/map/js/world.js' // 必須引入世界地圖
// import * as echarts from 'echarts'
export default {
  name: 'login_new',
  methods: {
    // 繪制3D路徑圖
    draw () {
      var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'
      var myChart = this.$echarts.init(document.getElementById('main'))
      // eslint-disable-next-line no-unused-vars
      var option

      var uploadedDataURL = ROOT_PATH + '/data-gl/asset/data/flights.json'
      myChart.showLoading()
      $.getJSON(uploadedDataURL, function (data) {
        myChart.hideLoading()

        function getAirportCoord (idx) {
          return [data.airports[idx][3], data.airports[idx][4]]
        }

        var routes = data.routes.map(function (airline) {
          return [getAirportCoord(airline[1]), getAirportCoord(airline[2])]
        })
        myChart.setOption({
          geo3D: {
            map: 'world',
            shading: 'realistic',
            silent: false, // 鼠標設(shè)置為不觸發(fā)事件
            environment: '#333', // 背景色
            realisticMaterial: {
              roughness: 0.8,
              metalness: 0
            },
            postEffect: {
              enable: true
            },
            groundPlane: {
              show: false
            },
            light: {
              main: {
                intensity: 1,
                alpha: 30
              },
              ambient: {
                intensity: 0
              }
            },
            viewControl: {
              distance: 70, // 地圖縮放程度
              alpha: 89, // 地圖翻轉(zhuǎn)程度
              panMouseButton: 'left',
              rotateMouseButton: 'right',

              rotateSensitivity: false, // 地圖是否能旋轉(zhuǎn)
              zoomSensitivity: false // 地圖是否能縮放
            },
            itemStyle: {
              color: '#000' // 地圖的顏色
            },
            regionHeight: 0.5 // 地圖高度
          },
          series: [
            {
              type: 'lines3D',
              coordinateSystem: 'geo3D',
              effect: { // 特效線的配置
                show: true,
                trailWidth: 1,
                trailOpacity: 0.5,
                trailLength: 0.2,
                constantSpeed: 5 // 特效固定速度
              },
              blendMode: 'lighter',
              lineStyle: { // 特效線
                width: 0.2,
                opacity: 0.05
              },
              data: routes
            }
          ]
        })
        // addEventListener監(jiān)聽事件處理函數(shù)
        window.addEventListener('keydown', function () {
          myChart.dispatchAction({
            type: 'lines3DToggleEffect',
            seriesIndex: 0
          })
        })
      })
    }
  },
  mounted () {
    this.draw()
  }
}

注意： 我這是在vue項目中實現(xiàn)的，這樣就完成了一個小型的關(guān)系圖?；

下面就是效果圖了:

?文章來源地址http://www.zghlxwxcb.cn/news/detail-522980.html

到了這里，關(guān)于Vue 中使用Echarts構(gòu)建3D地球的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！