我正在参加「码上挑战赛」概况请看：码上挑战赛来了！

项目初始化

项目的环境装备：

"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次方，白白花费好几个小时，果然抛弃了。

只用echarts做个仿3d地图

只用echarts做个仿3d地图
接下来给边框添加宽度和替换色彩：

语法：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% 处的色彩
                    },
                  ],
                },

最后作用：

只用echarts做个仿3d地图
最后地图外表做个突变的作用，由于下面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
                },

完成初稿图：

只用echarts做个仿3d地图