echarts仿3d地图
前端宋权武 人气:0项目初始化
项目的环境配置:
"echarts": "^4.9.0", "vue": "^2.6.10",
首先创建一个container容器,绝对定位,宽度和高度都为100%将图片铺满整个屏幕
//html <div class="container"></div> //css .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../assets/image/bg.png); background-size: 100% 100%; color: #fff; }
随后我们添加个标题,这里的设计稿是1920*1080的尺寸,字体采用的是庞门正道,绝对定位居中就可以了
//html <div class="title">x x市x x x x 智慧平台</div> //css .title { position: absolute; top: 10px; left: 660px; font-size: 55px; font-family: "PangMenZhengDao"; font-weight: 400; font-style: italic; color: #fff; text-shadow: 0px 3px 8px rgba(3, 71, 138, 0.75); }
echarts仿3d地图
为了更加快速开发,我们这里就不一个一个配置项去手写了,直接找个例子在上进行修改 例子
更换自己的json
获取方法,从高德地图选择器中直接复制JSON API
即可,网址链接
让地图更有立体感 首先看下面两组图片,第一个是我们要修改的例子立体感不明显,我们大概要做成图二的一个效果,有人要问了为什么不使用echarts-gl,首先他的侧边不能做出多个层次的感觉,其次他的纹理贴图也是诡异的,图片不能铺满并且还是倒立的,我设计的图片宽高都是2的N次方,白白花费好几个小时,果然放弃了。
接下来给边框增加宽度和更换颜色:
语法:series-map.itemStyle. borderWidth描边线宽。为 0 时无描边,我利用这个使线边宽度增加,让地图更有层次感,看代码:
itemStyle: { normal: { borderWidth: 6, borderColor: "rgba(29, 111, 165,1)", shadowColor: "rgba(29, 111, 165,0.5)", shadowOffsetY: 15, shadowBlur: 8, areaColor: "rgba(5,21,35,0.1)", }, },
上面的重影以此类推,这里要注意的是渐变的处理方法 type是linear,线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 true
,则该四个值是绝对的像素位置,当x:0,y:0,x2:0,y2:1是从上向下;当x:0,y:1,x2:0,y2:0是从下向上,当x:1,y:0,x2:0,y2:0是从右向左;当x:1,y:0,x2:1,y2:0是从左向右
borderColor: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#20a2e1", // 0% 处的颜色 }, { offset: 0.8, color: "#085473", // 80% 处的颜色 }, { offset: 1, color: "#054660", // 100% 处的颜色 }, ], },
最后效果:
最后地图表面做个渐变的效果,因为下面global: true所以这里x=1200指的是像素的位置,不要搞混了
areaColor: { type: "linear", x: 1200, y: 0, x2: 0, y2: 0, colorStops: [ { offset: 0, color: "#17498d", // 0% 处的颜色 }, { offset: 1, color: "#3a95fd", // 50% 处的颜色 }, ], global: true, // 缺省为 false },
完成初稿图:
总结
加载全部内容