ECharts数据可视化项目【5】

地图模块制作：

1. 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
2. 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
3. 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
4. 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针

• 球体图片模块map1：

    <div class="map">
                <div class="map1"></div>
            </div>
        </div>
1
2
3
4

.map{
        position: relative;
        height: 10.125rem;
        .map1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6.475rem;
            height: 6.475rem;
            background: url(../images/map.png) no-repeat;
            background-size: 100% 100%;
            opacity: 0.3;
          }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果为：

• 旋转1 map 2
  大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体

 <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
            </div>
1
2
3
4

  .map2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8.0375rem;
            height: 8.0375rem;
            background-image: url(../images/lbx.png);
            opacity: 0.6;
            z-index: 2;
          }
1
2
3
4
5
6
7
8
9
10
11

结果：

它要做旋转，而且是不停的旋转，这时要用到我们的动画了。

      .map2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8.0375rem;
            height: 8.0375rem;
            background-image: url(../images/lbx.png);
            opacity: 0.6;
            animation: rotate1 15s linear infinite;
            //linear匀速 infinite 无限循环
            z-index: 2;
          }

          @keyframes rotate1 {
            from{
                 transform:translate(-50%,-50%) rotate(0deg);
            }
           to {
            transform:translate(-50%,-50%) rotate(360deg);
           }
          
          }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意：在旋转的时候要保持位置值，所以这个transform:translate(-50%,-50%)一定不能落下。
结果为：

• 旋转2 map3
  大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针

  <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>
1
2
3
4
5

      .map3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 7.075rem;
            height: 7.075rem;
            background-image: url(../images/jt.png);
            animation: rotate2 10s linear infinite;
          }
            @keyframes rotate2 {
            from{
                 transform:translate(-50%,-50%) rotate(0deg);
            }
           to {
            transform:translate(-50%,-50%) rotate(-360deg);
           }
          }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意：这个逆时针只需要修改从0到-360度就行。

地图模块暂时先放着，和最后图表一起做。

 <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart"></div>
            </div>
1
2
3
4
5
6

  .chart{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 10.125rem;
          }
1
2
3
4
5
6
7

以上才算真正意义上的布局结束了，下面就开始EChart了。