最近迷上了echarts實現(xiàn)數(shù)據(jù)可視化了，也確實因為工作需要，目前公司需要我們來在自己的新廠房展廳把自己的產(chǎn)品展示出來，我所在研發(fā)部軟件組，第一個想到的就是使用echarts來實現(xiàn)一個數(shù)據(jù)可視化的大屏了，下面就帶著大家看看我這段時間使用Echarts來實現(xiàn)一個3D地球的過程:
1.環(huán)境準備工作
準備一個Vue的工程項目，然后導入兩個配置echarts 和 echarts-gl 并引用到項目工程之中:
npm install echarts
npm install echarts-gl
2.編寫代碼
echarts 使用起來還是很方便的，結(jié)合echarts 官網(wǎng)給出的配置手冊可以輕松完成數(shù)據(jù)可視化的配置工作，這邊給出我的代碼和實現(xiàn)效果，大家如果有什么不懂的可以評論在下面,看到會回復的。
<template>
<div>
<h1>這是3D地球的渲染界面</h1>
<div class="myworld" ref="myworld"></div>
</div>
</template>
<script>
// 引入世界地球的json文件！
import worldJson from '../../../src/static/others/json/world.json'
// 引入世界地圖的圖片
import earthjpg from '../../../src/static/img/earth.jpeg'
export default {
data() {
return {
}
},
methods: {
},
mounted() {
// 基于準備好的dom，初始化echarts實例
var world = this.$echarts.init(this.$refs.myworld);
// 指定圖標的配置項和數(shù)據(jù)
this.$echarts.registerMap("world", worldJson);
// 使用 echarts 繪制世界地圖的實例作為紋理
var canvas = document.createElement('canvas');
var mapChart = this.$echarts.init(canvas, null, {
width: 4096, height: 2048
});
mapChart.setOption({
series: [
{
type: 'map',
map: 'world',
// 繪制完整尺寸的 echarts 實例
top: 0, left: 0,
right: 0, bottom: 0,
boundingCoords: [[-180, 90], [180, -90]]
}
]
});
// 設置配置項
let optionWorld = {
// backgroundColor: "#013954",
globe: {
// 是否顯示地球組件：值為布爾類型，默認就是true
// show: true,
// 內(nèi)半徑 地球的內(nèi)半徑
globeRadius: 120,
// 外半徑
globeOuterRadius: 130,
// 配置背景顏色！
environment: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#00aaff' // 天空顏色
}, {
offset: 0.7, color: '#998866' // 地面顏色
}, {
offset: 1, color: '#998866' // 地面顏色
}], false),
// 地球的紋理，支持圖片路徑的字符串，圖片或者canvas的對象,如果不設置這個，地球出不來
// baseTexture: earthjpg,
// 也支持直接使用echarts的實例來作為紋理此時在地球上的鼠標動作會跟紋理上使用的echarts實例有聯(lián)動！
baseTexture: mapChart,
// 地球三維圖形的著色效果
shading: "color",
colorMaterial :{
detailTexture : earthjpg
},
// 用于鼠標的旋轉(zhuǎn)、縮放等控制視角
viewControl: {
// 透視投影
projection: 'perspective',
alpha: 30,
beta: 160,
// 開啟球體自旋轉(zhuǎn)
autoRotate: true,
// 設置地球的自轉(zhuǎn)速度: 單位為 度/秒，默認值為10，也就是36秒轉(zhuǎn)一圈！
autoRotateSpeed: 20,
// 在鼠標停止操縱后，球體恢復自轉(zhuǎn)的事件
autoRotateAfterStill: 2,
// 默認視角距離主體的距離
distance: 240
}
},
series: [
// 嘗試一下，實現(xiàn)3d的飛線效果
{
type: 'lines3D',
coordinateSystem: 'globe',
globeIndex: 0,
// polyline: true,
effect: {
show: true,
period: 1,
trailWidth: 10
},
lineStyle: {
color: 'blue',
width: 2,
opacity: 0.5,
},
data: [
[
[114.519696, 36.680402, 10],
[-47.231034, -13.283588, 20]
],
[
[114.519696, 36.680402, 10],
[-77.051902,38.920496, 20]
],
[
[114.519696, 36.680402, 10],
[174.744397,-41.228444, 20]
],
[
[-155.578464,19.896262,20],
[114.519696, 36.680402, 10]
],
[
[77.080047,28.775878,20],
[-75.702,45.444995, 20]
],
[
[28.088045,-25.518807,20],
[-149.861504,61.220877,30]
]
]
}
],
}
world.clear()
world.setOption(optionWorld, true);
}
}
</script>
<style>
.myworld {
width: 600px;
height: 600px;
}
</style>3.效果展示和總結(jié):
?使用到的地求圖片:
文章來源：http://www.zghlxwxcb.cn/news/detail-857122.html
額外附上友情鏈接: Echarts官網(wǎng)：?https://echarts.apache.org/zh/index.html文章來源地址http://www.zghlxwxcb.cn/news/detail-857122.html
到了這里，關(guān)于Echarts 3d地球?qū)崿F(xiàn)(Vue框架)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
