在VUE中使用echarts制作3d地球
1、环境配置
编辑器vscode
npm创建项目，使用官方脚手架vue-cli4
全局安装vue-cli
npm i -g @vue/cli
创建项目Ocean
vue create ocean
安装项目依赖echarts和echarts-gl
cd ocean
npm i echarts ecahrts-gl -S
2、创建开发目录
public 静态资源
src 开发环境
|-assets 全局会优化 ui资源
|-js
|-css
|-image
|-...
|-pages 页面 跳转
|- home.vue
|-layouts 布局
|- App.vue
|-components 通用组件
|- earth.vue
main.js 模块主入口
package.json 依赖管理
3、页面和组件代码
1、App.vue
<template>
<div class="app">
<Home/>
</div>
</template>
<script>
import Home from '../pages/Home.vue'
export default {
name:'app',
data(){
return {
}
},
methods:{
},
components:{
Home
}
}
</script>
<style>
</style>
Home.vue
<template>
<div>
<Earth/>
</div>
</template>
<script>
import Earth from '../components/Earth.vue'
export default {
name: 'Home',
props:[],
components: {
Earth
},
data(){
return {
}
},
mounted() {
},
updated() {
},
}
</script>
<style>
</style>
3、earth.vue
<template>
<div>
<div class="earthmap" id="earth"></div>
</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: require("../assets/img/earthly.jpg"),//贴图 球形和平面的吻合，有些不用require引入图片也可以
silent: true,
environment: require("../assets/img/universe.jpg"), //背景
heightTexture: require("../assets/img/earthly.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: [
]
},
}
},
mounted(){
this.initMap()
},
methods:{
initMap(){
//获取容器并对其初始化
this.myChart = echarts.init(document.getElementById('earth'))
//渲染
this.myChart.setOption(this.option)
},
}
}
</script>
<style>
.earthmap{
width: 100%;
height: 700px;
background: rgba(16, 167, 202, 0.39);
}
</style>
4、效果
image
