东莞外贸公司网站制作,网站网页设计专业公司,网站开发版权归谁,wordpress 自己写的网页之前也有使用过echarts开发项目中涉及到的地图功能#xff0c;当时使用geo来实现地图轮廓#xff0c;看上去有种3d的感觉。最近闲来无事看了一份可视化大屏的UI设计图#xff0c;感觉3d旋转地图挺好玩的#xff0c;今天就来尝试实现下。 首先安装下echarts和echarts-gl依赖…之前也有使用过echarts开发项目中涉及到的地图功能当时使用geo来实现地图轮廓看上去有种3d的感觉。最近闲来无事看了一份可视化大屏的UI设计图感觉3d旋转地图挺好玩的今天就来尝试实现下。 首先安装下echarts和echarts-gl依赖在这里注意的点是echarts-gl版本可以安装低版本默认安装的依赖版本运行后一直报错。
$ npm install echarts4.2.1 echarts-gl1.1.0安装好依赖在页面引入
import echarts from echarts;
import echarts-gl;
import beijingJson from ../../src/api/beijing.json;接下来我们看下完整的代码
templatediv stylewidth: 100%; height:100%;div idecharts refmyEcharts stylewidth: 100%; height:100%;/div/div
/templatescriptimport echarts from echarts;import echarts-gl;import beijingJson from ../../src/api/beijing.json;export default {data() {return {}},methods: {init() {let that this;echarts.registerMap(beijing, beijingJson);that.option {tooltip: {show: true,formatter: function(params) {let value params.data.value;return params.seriesName : value[2];}},geo3D: {map: beijing,boxWidth: 70,boxHeight: 6,boxDepth: 70,realisticMaterial: {roughness:1,//粗糙度0为完全光滑1完全粗糙textureTiling: 32 //材质细节纹理的平铺},//光源的设置light: {main: {intensity: 1,shadow: true,alpha: 150,beta: 170},ambient: {intensity: 0}},//地面的背景颜色groundPlane: {show: true,color: transparent},//特效设置postEffect: {enable: true},//标签样式label: {show: true,formatter: function(params) {var content ,content params.name;return content;},distance: 0,textStyle: {color: #ffffff,fontWeight: normal,fontSize: 16,backgroundColor: rgba(255,255,255,0)},},itemStyle: {color: #73a4ff,borderColor: rgb(62,215,213),borderWidth: 1},emphasis: {label: {show: true,distance: 10},itemStyle: {color: #3b7efc,}},// 用于鼠标的旋转缩放等视角控制。viewControl: {projection: perspective, // 投影方式默认为透视投影perspective也支持设置为正交投影orthographic。autoRotate: true,//更多配置可自行查询添加}},series: []};let initEcharts echarts.init(that.$refs.myEcharts);initEcharts.setOption(that.option);}},mounted() {this.$nextTick(() {this.init();})}}
/script看完代码后对于之前做过地图的同学来说是不是和echarts没啥区别只是多了一个geo3D的属性。geo3D是否显示三维地理坐标系组件这也是实现3d地图的主要属性针对geo3d中每个属性的功能大家可以在echarts文档进行查阅这里我就不一一细说了。 这里把文档地址给大家贴出来了大家可以查看文档这样实现起来更快捷。https://echarts.apache.org/zh/option-gl.html#geo3D
最终效果 这里我截图展示的需要看地图动效的大家可以在本地运行看下地图自动旋转效果。
