echarts的3D类地球在vue中的使用

步骤

1.安装

npm install echarts --save

使用echart的3d功能需要另外安装echarts-gl 安装指令：

cnpm install echarts-gl

2.引入

这里就只写全局引入（写在main.js内），如果想要局部引入的话看这个链接: 最新的echarts在vue中的简单使用.

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.使用

如果只是使用3D类型的图表其实安装引入完echarts-gl后，直接复制案例就完了，但是3d球体还需要图片和world.json文件。

*注意：

地图中需要引入json文件和图片，如果没有的话可以到我的项目地址下拉项目后在assets文件夹内找到json文件和图片: 项目地址.
这是 项目的演示地址.

<template>
  <div class="home">
    <div style="width: 100%;height: 100%" ref="maine"></div>
  </div>
</template>

<script>
// 使用echart的3d功能需要另外安装echarts-gl  安装指令： cnpm install echarts-gl
import 'echarts-gl'

const worl = require('@/assets/map/world.json')

export default {
  data () {
    return {
      chinachart: null
    }
  },
  mounted () {
    // 初始化echarts实例

    this.chinachart = this.$echarts.init(this.$refs.maine)

    function getAirportCoord (idx) {
      return [worl.airports[idx][3], worl.airports[idx][4]]
    }
    var routes = worl.routes.map(function (airline) {
      return [
        getAirportCoord(airline[1]),
        getAirportCoord(airline[2])
      ]
    })

    const option = {
      backgroundColor: '#000',
      globe: {
      	// 需要引入的两张图片
        baseTexture: 'img/world.topo.bathy.200401.jpg',
        heightTexture: 'img/bathymetry_bw_composite_4k.jpg',

        shading: 'lambert',

        light: {
          ambient: {
            intensity: 0.4
          },
          main: {
            intensity: 0.4
          }
        },

        viewControl: {
          autoRotate: false
        }
      },
      series: {

        type: 'lines3D',

        coordinateSystem: 'globe',

        blendMode: 'lighter',

        lineStyle: {
          width: 1,
          color: 'rgb(50, 50, 150)',
          opacity: 0.1
        },

        data: routes
      }
    }

    this.chinachart.setOption(option)
  }
}
</script>

<style>
.home{
  height: 100%;
  width: 100%;
}
</style>