echarts版本：5.4.0
echarts-gl版本：2.0.8
?示例代碼：
<template>
<div>
<div ref="chinaMap" id="chinaMap" style="width: 90vw;height: 90vh;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import xianData from '../assets/xian.json';
export default {
mounted() {
this.initMap();
},
methods: {
initMap(name) {
echarts.registerMap('xian', xianData); // 注冊矢量地圖數(shù)據(jù)
let map = echarts.init(this.$refs.chinaMap);
let option = {
title: {
text: '測試3D',
textStyle: {
color: '#000',
fontSize: 18,
},
},
geo3D: {
map: 'xian',
itemStyle: {
color: '#abeee0',
opacity: 1,
borderWidth: 1,
borderColor: '#ddd',
},
viewControl: {
beta: 0, //x軸旋轉(zhuǎn)
rotateSensitivity: 0, // 無法旋轉(zhuǎn)
// panMouseButton:'left', // 平移
// panSensitivity:1,
},
label: {
show: false,
formatter: (v) => v.name,
},
emphasis: {
//當(dāng)鼠標(biāo)放上去 地區(qū)區(qū)域是否顯示名稱
label: {
show: true,
},
},
light: {
//光照陰影
main: {
color: '#fff', //光照顏色
intensity: 1.2, //光照強度
shadowQuality: 'high', //陰影亮度
shadow: false, //是否顯示陰影
alpha: 55,
beta: 10,
},
ambient: {
intensity: 0.3,
},
},
},
series: [
{
name: 'bar3D',
type: 'bar3D',
coordinateSystem: 'geo3D',
barSize: 1, //柱子粗細(xì)
shading: 'lambert', // 三維柱狀圖中三維圖形的著色效果。
bevelSize: 0, // 柱子的倒角尺寸 支持設(shè)置為從 0 到 1 的值。默認(rèn)為 0，即沒有倒角。
label: {
show: true,
formatter: (v) => v.value[2],
distance: 0.5, // 文字到圖的距離
textStyle: {
color: 'rgba(0,170,0,1)',
fontSize: 14,
}
},
itemStyle: {
color: '#60ff0b',
opacity: 1,
},
data: [{
name: '新城區(qū)',
value: [108.979903, 34.27927, 100],
},
{
name: '碑林區(qū)',
value: [108.946994, 34.251061, 400],
},
{
name: '蓮湖區(qū)',
value: [108.903194, 34.2656, 100],
},
{
name: '灞橋區(qū)',
value: [109.077261, 34.287453, 100],
},
{
name: '未央?yún)^(qū)',
value: [108.926022, 34.34923, 300],
},
{
name: '雁塔區(qū)',
value: [108.926593, 34.213389, 200],
},
{
name: '閻良區(qū)',
value: [109.27802, 34.642141, 200],
},
{
name: '臨潼區(qū)',
value: [109.283986, 34.442065, 200],
},
{
name: '長安區(qū)',
value: [108.961579, 34.01097, 300],
},
{
name: '高陵區(qū)',
value: [109.088896, 34.535065, 400],
},
{
name: '鄠邑區(qū)',
value: [108.607385, 34.008668, 200],
},
{
name: '藍(lán)田縣',
value: [109.357634, 34.106189, 200],
},
{
name: '周至縣',
value: [108.186465, 34.001532, 100],
},
{
name: '合計',
value: [108.8, 33.999, 2800],
itemStyle:{
color:'#ffd100',
opacity:0.5,
},
label: {
show: true,
formatter: (v) => v.value[2],
distance: 0.5, // 文字到圖的距離
textStyle: {
color: '#ff0000',
fontSize: 18
}
},
}
],
},
{
type: "lines3D",
coordinateSystem: "geo3D", // 使用的坐標(biāo)系
// zlevel: 10, // 設(shè)置這個才會有軌跡線的小尾巴
// polyline: false, // 是否是多段線
blendMode: "lighter", // 該模式可以讓數(shù)據(jù)集中的區(qū)域因為疊加而產(chǎn)生高亮的效果
effect: { // 飛線的尾跡特效
show: true,
trailWidth: 3, // 尾跡的寬度
trailLength: 0.1, // 尾跡的長度，范圍從 0 到 1，為線條長度的百分比。特效尾跡長度[0,1]值越大，尾跡越長
trailOpacity: 0.7, // 尾跡線條透明度
trailColor: "#ff0000", // 尾跡的顏色，默認(rèn)跟線條顏色相同
constantSpeed: 5, // 軌跡特效的移動動畫是否是固定速度，單位按三維空間的尺寸，設(shè)置為非 null 的值后會忽略 period 配置項。
period: 8, // 尾跡特效的周期
color: "#38bd98", // 移動點的顏色
},
lineStyle: {
width: 1,
color: 'rgba(62, 255, 49, 1)',
opacity: 1
},
data: [
[[108.979903, 34.27927],[108.8, 33.999]],
[[108.946994, 34.251061],[108.8, 33.999]],
[[108.903194, 34.2656],[108.8, 33.999]],
[[109.077261, 34.287453],[108.8, 33.999]],
[[108.926022, 34.34923],[108.8, 33.999]],
[[108.926593, 34.213389],[108.8, 33.999]],
[[109.27802, 34.642141],[108.8, 33.999]],
[[109.283986, 34.442065],[108.8, 33.999]],
[[108.961579, 34.01097],[108.8, 33.999]],
[[109.088896, 34.535065],[108.8, 33.999]],
[[108.607385, 34.008668],[108.8, 33.999]],
[[109.357634, 34.106189],[108.8, 33.999]],
[[108.186465, 34.001532],[108.8, 33.999]],
],
}
],
};
map.setOption(option, true);
},
},
};
</script>
</script>
<style scoped>
</style>效果圖：?
文章來源：http://www.zghlxwxcb.cn/news/detail-727482.html
?西安市地圖geoJson可以從這里獲?。?/h3>
DataV.GeoAtlas地理小工具系列文章來源地址http://www.zghlxwxcb.cn/news/detail-727482.html
到了這里，關(guān)于echarts3D地圖+3D柱狀圖+3D飛線圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
