echarts gl 透视地球 科技感 地球旋转
版权声明:本文为转载 修改CSDN博主「散场的拥抱&」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/qq_44699269/article/details/134731107。color: '#4ECAF1', //球上面点颜色。采用vue2+js实现echarts3D旋转球体的放大、缩小、拖动、旋转。(1)
采用vue2+js实现echarts3D旋转球体的放大、缩小、拖动、旋转。
版权声明:本文为转载 修改CSDN博主「散场的拥抱&」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。如有侵权联系我
原文链接:https://blog.csdn.net/qq_44699269/article/details/134731107
参考链接:https://madeapie.com/#/chartInfo/xJsg-fjzkv
1.效果
二、代码配置:
(1)下载地图数据:将下面的链接在网页上打开并复制里面所有的东西
mapData.json:https://www.isqqw.com/asset/get/s/data-1625545136350-oWFk_ystL.json
map2.json:https://madeapie.com/asset/get/s/data-1491887968120-rJODPy9ae.json
(2)创建main.json,将复制的东西放在main.json里面,结构如下:
3)父组件index.vue
<template>
<div class="page-con">
<div class="main-con">
<tmap />
</div>
</div>
</template><script>
import tmap from "./components/tmap/tmap.vue";
export default {
components: {
tmap
}
}
</script><style lang="scss" scoped>
.page-con {
width: 100%;
height: 100%;
.main-con {
width: 75%;
height: 73%;
}
}
</style>
(4)子组件tmap.vue
<template>
<div class="bar">
<div ref="volumn" class="volume" />
</div>
</template><script>
import echarts from "echarts";
import "echarts-gl";
import WorldJSON from './mapData.json';
import aa from './map2.json';
echarts.registerMap("world", WorldJSON);
export default {
data() {
return {
myChart: null,
};
},
mounted() {
// 获取数据。
this.$nextTick(() => {
if (this.$refs.volumn) {
this.reloadChart();
// 自适应浏览器。
window.addEventListener("resize", () => {
this.reloadChart();
});
}
});
},
// 组件销毁。
beforeDestroy() {
this.disposeChart();
},
methods: {
drawChart() {
this.myChart = echarts.init(this.$refs.volumn);
var baseTexture = null;
var option = null;
var geoJson = null;
var bb = nullfunction getGeoJsonData() {
geoJson = WorldJSON;
bb = aa.filter(function(dataItem) {
return dataItem[2] > 0;
})
.map(function(dataItem) {
return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
});
getBaseTexture();
}function getBaseTexture() {
echarts.registerMap("world", geoJson);
let canvas = document.createElement("canvas");
baseTexture = echarts.init(canvas, null, {
width: 4096,
height: 2048,
});
baseTexture.setOption({
backgroundColor: "#001213",
});
drawEarth();
}
var self = this;function drawEarth() {
option = {
visualMap: {
show: false,
min: 0,
max: 60,
inRange: {
symbolSize: [1.0, 10.0],
},
},
globe: {
show:false,
globeOuterRadius: 100,
shading: "color",
environment: "#00060C",
light: {
ambient: {
intensity: 1,
},
},
},
series: [{
type: 'scatter3D',
coordinateSystem: 'globe',
itemStyle: {
color: '#4ECAF1', //球上面点颜色
opacity: 1,
},
data: bb,
}, ],
};
self.myChart.clear();
self.myChart.setOption(option, true);
}
getGeoJsonData();
},
// 销毁图表。
disposeChart() {
if (this.myChart) {
this.myChart.dispose();
}
},
// 重新加载图表。
reloadChart() {
this.disposeChart();
this.drawChart();
},
},
};
</script><style lang="scss" scoped>
.bar {
width: 100%;
height: 100%;.volume {
width: 100%;
height: 100%;
}
}
</style>
更多推荐
所有评论(0)