基于ECharts的数据大屏制作

ゝ一纸荒年。 2021-09-25 07:58 402阅读 0赞

## P.S. ##

> 项目用到的所有文件我放在了百度网盘中，方便下载  
> 链接：https://pan.baidu.com/s/1yjdxeXqEC3fJgca9Rd3CDw  
> 提取码：5kzl

## 零、知识点补充 ##

这里我会写两种的解释，一个是用我自己的话来说（简单版）；另一种就是看百度的解释（详细版）。

### 0.1 Less ###

#### 简单版 ####

就是辅助写`css`的，加快项目开发效率。

可以理解为一种类似`css`写法的一个语言，每次你保存`less`文件的时候，他会给你自动转换成`wxss`（微信小程序的样式文件）或者`css`文件，相对于你直接写`css`语法所需的代码，用`less`写要少很多。

当然，`less`也提供了`css`没有的东西，从另一角度看，`less`是一个加强版`css`。

#### 详细版 ####

*  Less官网：[按住Ctrl点击跳转][Ctrl]
 *  Less简介：[按住Ctrl点击跳转][Ctrl 1]

### 0.2 jQuery插件 ###

#### 简单版 ####

js插件，一个比较基本的js插件，也很小，很方便导入，一些前端的框架也基于jQuery写的，比如Bootstrap框架，使用Bootstrap的时候，必须先导入`jQuery.js`，才能正常使用Bootstrap。

#### 详细版 ####

jQuery官网：[按住Ctrl点击跳转][Ctrl 2]

官网是英文的，但是What is jQuery这个标题应该都可以找得到。

### 0.3 Flex布局 ###

#### 简单版 ####

一种布局方式，让我们快速布局。此项目我们用Flex布局来快速布局，以及屏幕适配。

#### 详细版 ####

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

这里给出菜鸟的Flex介绍：[按住Ctrl点击跳转][Ctrl 3]

### 0.4 rem ###

#### 简单版 ####

`rem`就是一个相对的单位，会根据网页长宽的变化而变化。`rem`常用来实现响应式布局。

#### 详细版 ####

这个玩意就是个相对计算出来的单位，官网应该没有（我是没找到。。）

给大家看看菜鸟教程上写的东西吧：[px、em、rem区别介绍][px_em_rem]，一样道理`按住Ctrl点击`即可跳转。

## 一、项目准备 ##

### 1.1 项目使用技术 ###

项目学到或用到如下技术：

*  div+css布局
 *  flex布局
 *  less辅助样式开发
 *  原生js+jQuery使用
 *  rem屏幕适配
 *  echarts基础

### 1.2 文件准备 ###

#### 1.2.1 插件文件 ####

1.  `flexible.js`插件
2.  `jquery.js`插件
3.  包含默认组件的`echarts.js`（或`echarts.min.js`）插件
4.  VS Code插件
    
    1.  `Easy LESS`（以下简称`less`插件）
    2.  `px to rem & rpx (cssrem)`（一下简称`rem`插件）

#### 1.2.2 VS Code插件下载 ####

##### 步骤 #####

先打开VS Code点击插件下载的图标  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70]

分别搜索`Easy LESS`和`px to rem & rpx (cssrem)`，搜索到之后点击安装（install）

![在这里插入图片描述][20210426091759903.png]

##### 详细插件的页面 #####

如果怕自己下载错了，我这里给出两个插件的详情页面。

Easy LESS：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 1]  
px to rem & rpx (cssrem)：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 2]

##### 可能出现的问题 #####

如果你之前用过`less`辅助开发微信小程序的话，`less`默认生成的文件是`wxss`，我们在less插件的settings.js文件中配置一下就好。

首先我们找到`settings.js`，并打开；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 3]  
设置`settings.js`，将`less`自动转化格式为`css`；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 4]  
保存`less`文件，可以看到`css`文件自动生成成功，问题解决。  
![在这里插入图片描述][20210426113510831.jpg]

### 1.3 适配方案 ###

首先我们目标是1920px的大屏幕，`flexible.js`默认把屏幕分为24等份（`1920px÷24=80px`）

规划好了，我们再来设置rem插件的配置信息。首先和上面类似，找到`rem`插件的`扩展设置`，然后就能看到`Root Font Size`这一项了；  
![在这里插入图片描述][20210426113524416.jpg]

修改成80即可，不用带`px`单位，其他单位也不用。

## 二、项目步骤 ##

### 2.1 项目实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 5]

### 2.2 项目流程 ###

#### 项目文件架构 ####

项目文件架构为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 6]  
除了`index.html`（手动创建）、`index.less`（手动创建）、`index.js`（手动创建）、`index.css`（less文件保存后自动生成的，不用手动创建）外，其他文件都是能从网上找到的，我们不用自己写。

#### 制作步骤 ####

按图中的序号来。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 7]  
先做header部分，然后开始做main部分；main部分中，先做left再做right最后做中间部分；中间部分分上面的数字部分和下面的地图部分。

合适的开发流程有利于提高代码写的效率。

### 2.3 body基础样式 ###

撰写`index.html`基本代码骨架（VS Code中输入`!`，然后Enter，就可以快速生成HTML基本骨架）

P.S. 最好将自动生成的骨架中html的`lang`属性设置为`zh-CN`（声明是中文网页），不然每次生成网页，他都提示你翻不翻译，影响开发效率。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 8]  
设置`80px`为`1rem`，方便屏幕适配（前面配过了这步就不用管了）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 9]  
导入flexible布局（`flexible.js`）  
![在这里插入图片描述][20210426114616201.jpg]  
插入body（整个页面）的背景图  
![在这里插入图片描述][20210426114133291.jpg]  
效果如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 10]

### 2.4 头部栏的制作 ###

#### 2.4.1 实现代码 ####

<header>
        <h1>2018212229+朱明</h1>
        <div class="showTime"></div>
    </header>
    
    <script> // 格式： 当前时间：2020年3月17-0时54分14秒 var t = null; t = setTimeout(time, 1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours();//获取时 var m = dt.getMinutes();//获取分 var s = dt.getSeconds();//获取秒 document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script>

// less中的代码 header { 
        position: relative;
        height: 1.25rem;
        background: url(../images/head_bg.png) no-repeat;
        background-size: 100% 100%; h1 { 
            font-size: .475rem;
            color: #FFF;
            text-align: center;
            line-height: 1rem;
        }
        .showTime { 
            position: absolute;
            right: .375rem;
            top: 0;
            line-height: .9375rem;
            color: rgba(255, 255, 255, 0.7);
            font-size: .25rem;
        }
    }

#### 2.4.2 步骤 ####

增加头部栏（header），并在其中增加标题（h1）和`showTime`模块区域（div）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 11]  
用JavaScript实现`showTime`模块功能  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 12]  
当前实现的页面效果如下图所示，不符合预期效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 13]  
当前代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 14]  
经原因分析，h1默认占一行，虽然父标签header设置了`position`为`relative`，`showTime()`模块`position`为`absolute`还不行，还需设置`top`值，我们增加`less`代码：`top: 0`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 15]  
问题解决。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 16]

### 2.5 主体部分的制作 ###

#### 2.5.1 实现代码 ####

<section class="mainbox">
        
        <div class="column">
            <div class="panel bar">
                <h2>柱形图-就业行业</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>折线图-就业行业</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie">
                <h2>饼状图-就业行业</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
        
        <div class="column">
            
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>123123</li>
                        <li>123123</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart">地图模块</div>
            </div>
        </div>
        
        <div class="column">
            <div class="panel bar1">
                <h2>柱形图-就业行业</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line1">
                <h2>折线图-就业行业</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie1">
                <h2>饼状图-就业行业</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>

// less代码
    // 字体声明
    @font-face { 
        font-family: electronicFont;
        src: url(../font/DS-DIGIT.TTF);
    }
    
    // 页面主体部分 .mainbox { 
        display: flex;
        min-width: 1024px;
        max-width: 1920px;
        margin: 0 auto;
        padding: .125rem .125rem 0; .column { 
            flex: 3;
        }
        .column:nth-child(2) { 
            flex: 5;
            margin: 0 .125rem .1875rem;
        }
        // 全部的图表模块 .panel { 
            position: relative;
            height: 3.875rem;
            border: 1px solid rgba(25, 186, 139, 0.17);
            padding: 0 .1875rem .5rem;
            margin-bottom: .1875rem;
            background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03); &::before { 
                position: absolute;
                top: 0;
                left: 0;
                width: 10px;
                height: 10px;
                border-left: 2px solid #02a6b5;
                border-top: 2px solid #02a6b5;;
                content: "";
            }
            &::after { 
                position: absolute;
                top: 0;
                right: 0;
                width: 10px;
                height: 10px;
                border-right: 2px solid #02a6b5;
                border-top: 2px solid #02a6b5;;
                content: "";
            }
            .panel-footer { 
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%; &::before { 
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  content: "";
                  width: 10px;
                  height: 10px;
                  border-bottom: 2px solid #02a6b5;
                  border-left: 2px solid #02a6b5;
                }
                &::after { 
                  position: absolute;
                  bottom: 0;
                  right: 0;
                  content: "";
                  width: 10px;
                  height: 10px;
                  border-bottom: 2px solid #02a6b5;
                  border-right: 2px solid #02a6b5;
                }
            }
            h2 { 
                height: .6rem;
                color: #FFF;
                line-height: .6rem;
                text-align: center;
                font-size: 0.25rem;
                font-weight: 400;
            }
            .chart { 
                height: 3rem;
            }  
        }
    }
    
    // no数字模块 .no { 
        background: rgba(101, 132, 226, 0.1);
        padding: .1875rem; .no-hd { 
            position: relative;
            border: 1px solid rgba(25, 186, 139, 0.17); &::before { 
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                width: 25px;
                height: 15px;
                border-top: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
            }
            &::after { 
                position: absolute;
                bottom: 0;
                right: 0;
                content: "";
                width: 25px;
                height: 15px;
                border-bottom: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
            }
            ul { 
                display: flex; li { 
                    position: relative;
                    flex: 1;
                    list-style: none;
                    height: 1rem;
                    font-size: .875rem;
                    color: #ffeb7b;
                    text-align: center;
                    font-family: 'electronicFont';
                }
                li:nth-child(1)::after { 
                    content: "";
                    position: absolute;
                    top: 25%;
                    right: 0;
                    height: 50%;
                    width: 1px;
                    background: rgba(255, 255, 255, 0.2);
                }
            }
        }
        .no-bd { 
            ul { 
                display: flex; li { 
                    position: relative;
                    flex: 1;
                    list-style: none;
                    height: .5rem;
                    font-size: .225rem;
                    color: rgba(255, 255, 255, 0.7);
                    text-align: center;
                    padding-top: .125rem;
                }
            }
        }
    }
    
    // 地图部分样式 .map { 
        position: relative;
        height: 10.125rem; .map1 { 
            width: 6.475rem;
            height: 6.475rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url(../images/map.png);
            background-size: 100% 100%;
            opacity: 0.3;
        }
        .map2 { 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8.0375rem;
            height: 8.0375rem;
            background: url(../images/lbx.png);
            background-size: 100% 100%;
            animation: rotate1 15s linear infinite;
            opacity: 0.6;
        }
        @keyframes rotate1 { 
            from { 
                transform: translate(-50%, -50%) rotate(0deg);
            }
            to { 
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    
        .map3 { 
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 7.075rem;
            height: 7.075rem;
            background: url(../images/jt.png);
            background-size: 100% 100%;
            animation: rotate2 10s linear infinite;
            opacity: 0.6;
        }
    
        @keyframes rotate2 { 
            from { 
              transform: translate(-50%, -50%) rotate(0deg);
            }
            to { 
              transform: translate(-50%, -50%) rotate(-360deg);
            }
        }
        .chart { 
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            height: 10.125rem;
            width: 100%;
        }
    }

#### 2.5.2 左侧的制作 ####

先制作底层，插入背景图，然后加一个0.03透明度的白底背景颜色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 17]  
通过设置panel的before和after来制作上方角边框效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 18]  
我们放置一个div置于panel的底部，然后设置该div的after和before来制作下方角边框效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 19]  
加入标题（h2）和放置图表的区域（div）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 20]  
下面两个区域也是这样做，我们CV一下，然后修改部分代码，最终效果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 21]

#### 2.5.3 右侧的制作 ####

这部分与左侧一样，我们CV一下，代码都可以完全不改，效果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 22]

#### 2.5.4 中间上半部分的制作 ####

先做中间的上面部分，我们称为`no`部分，先准备一下底层div的背景  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 23]  
然后采用flex布局，分为两部分展示两个数字  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 24]  
然后我们导入字体，在less文件前面声明font路径  
![在这里插入图片描述][20210426133753718.jpg]

然后我们下面调用刚声明的字体即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 25]  
将`no`（div）中的`no-hd`（div）展示的数字字体修改为我们导入的字体，效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 26]  
然后我们还要解决中间的小竖线，我们给`li`标签的`after`加上50%的边框即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 27]  
但是我们不想让第二个`li`的`after`也产生竖线  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 28]  
我们将less的样式限制第一个li标签就好了，下面是改善的代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 29]  
解决最后的效果如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 30]  
那我们经过上面的操作，很容易就写出剩余的部分，我们直接贴出代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 31]  
上半部分最终的效果如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 32]

#### 2.5.5 中间下半部分的制作 ####

该部分我们命名为`map`模块，我们先制作最底部div（`map1`）的背景图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 33]  
实现最底部div的效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 34]  
再新建一个`map2`的div，我们进行动画的一些配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 35]  
动图实现效果因为动图展示不了的原因，我们就只能放一个静态图片了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 36]  
接下来我们开始制作`map3`的div，也是动图，我们进行相应的配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 37]  
最终效果实现如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 38]

#### 2.5.6 每个部分chart的制作 ####

（1）中间的中国地图实现

我们在`index.js`中写好所需的js代码，并采用即时执行函数，节省变量名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 39]  
`index.html`中引入`index.js`以及`echarts.min.js`插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 40]  
效果实现完成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 41]  
（2）两侧的柱形图、折线图和饼图实现

引入中国地图china.js插件和MmyMap.js插件（通过ECharts社区下载的样式）

![在这里插入图片描述][20210426135653677.jpg]  
最终的效果如图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 42]

#### 2.5.7 页面适配 ####

最后我们再加上一段代码，保证一下响应式布局

// less代码
    /* 约束屏幕尺寸 */
    @media screen and (max-width: 1024px) { 
        html { 
          font-size: 42px !important;
        }
    }
    @media screen and (min-width: 1920px) { 
        html { 
          font-size: 80px !important;
        }
    }

项目完成。

## 三、后置寄语 ##

如果你不是很深入学习js或者css的话，很多像`@media screen`、`(function() {})();`、`nth-child()::after`、`&::after`、`:before`等等等等，你可能完全不熟悉，或者不知道用法，这个没关系。

如果你不是想精通前端，就没必要学的很深，只要会一些基础的语法，然后要实现什么功能就搜索怎么实现，现学就好。

所以本文没有单独拎出来一些点进行详细的讲解，可能你看的云里雾里（精通一门语言就会好一点），耐着性子多看看即可。

结束。By：zm

[Ctrl]: https://less.bootcss.com
[Ctrl 1]: https://less.bootcss.com/#%E6%A6%82%E8%A7%88
[Ctrl 2]: https://jquery.com/
[Ctrl 3]: https://www.runoob.com/w3cnote/flex-grammar.html
[px_em_rem]: https://www.runoob.com/w3cnote/px-em-rem-different.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70]: /images/20210923/273ea98f6c3641d3ad9920d0a41a8317.png
[20210426091759903.png]: /images/20210923/545844d296674a10b40dce0dfeb52822.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 1]: /images/20210923/50215e34ed5d4f61acf7754654ff0156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 2]: /images/20210923/0a0838471dc04d7e8f0b6290b857fbe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 3]: /images/20210923/c5e1e4401aa548e6b95c6230a0708ad5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 4]: /images/20210923/37d2aa94496946bfa1bb5caf728fc3dd.png
[20210426113510831.jpg]: /images/20210923/e79c192b2b92481588c4bef3463e1ff4.png
[20210426113524416.jpg]: /images/20210923/dcba1f41c74d46a6b1e3605fe4531bdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 5]: /images/20210923/990a4abec15d4e9dbe487be66fa9ef83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 6]: /images/20210923/82857b51e828496b8d99f5e0aa2eb65c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 7]: /images/20210923/d3e0265b3597463fa6c9f30059224896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 8]: /images/20210923/520da78a03ec4f80ba8cd2ac6911a26c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 9]: /images/20210923/05625c6185c449758f2acc4664b08bc8.png
[20210426114616201.jpg]: /images/20210923/1689cc9575824981a544084bec525350.png
[20210426114133291.jpg]: /images/20210923/ebb0b2eb99a540ad9358cd8e4d81fa42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 10]: /images/20210923/116898b938794e9f8dddb8ffff3edd0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 11]: /images/20210923/f08bd9fef69e414f8aa2598550cda32d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 12]: /images/20210923/8b1f08d85bba4373bc87fe16e5494edb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 13]: /images/20210923/1dd6aff6ebe74c88bad24c96f6c3ef89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 14]: /images/20210923/eba1f6e61add4eb7a412bc8b8d2f7001.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 15]: /images/20210923/3056188680324504a7fa0f26eff0abc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 16]: /images/20210923/27330ff57e104d1d9e1d06668e713afa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 17]: /images/20210923/55cab9fa0bfd483b901a76f3602851b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 18]: /images/20210923/b88aa39544fa4ae0966518271466a255.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 19]: /images/20210923/1a5faecf13274d1aa71c6d0f75f8f2da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 20]: /images/20210923/8e247a29ff9243fea6960a79b7a398eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 21]: /images/20210923/e90ced8643f9420c93b00f4626ebdeeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 22]: /images/20210923/642a97a4389a45fe9cc2c5e19e886c73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 23]: /images/20210923/cb1520f938a247d181a33df0d9654037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 24]: /images/20210923/9017508ec6694e9ba4255cce5baefd4b.png
[20210426133753718.jpg]: /images/20210923/a7b0953282f84529bd7ac8514b03b6c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 25]: /images/20210923/02cc0127bdc44e708711f52316e19f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 26]: /images/20210923/2936589830824c08891f3361544a69c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 27]: /images/20210923/288b98ae86ec4b86b87b029464f9a8db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 28]: /images/20210923/f9ad2e4ba7b34b7084df2f4728ad2537.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 29]: /images/20210923/95209b9f85c14d5a9139096f43b987b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 30]: /images/20210923/e9a03fc0a4b54ed29d42f37ab94fadee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 31]: /images/20210923/042dee547a284192bc2d275179551ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 32]: /images/20210923/112bff60f6b84989ac07e97e728ab4e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 33]: /images/20210923/734f078833fb45dc9d12688eb8ba7d25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 34]: /images/20210923/84c3b7a18ed0433f84ce13f6e309242a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 35]: /images/20210923/209f760f2cda442590c69e399225638b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 36]: /images/20210923/f01cb6f41c6c4924b8abd8cb7d0d28b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 37]: /images/20210923/44848544473a4e3e8ccd39b314dad147.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 38]: /images/20210923/f2fca356ffb64184afc5808f441b83ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 39]: /images/20210923/77d0a04ab78845b9bb3b5e76febdc6f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 40]: /images/20210923/6ef86a4d10414477bff69d8b9e9b9a19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 41]: /images/20210923/1f363cbcc824416abd584d584f7be2a9.png
[20210426135653677.jpg]: /images/20210923/0263a153b8694aeba6210340fa1eb356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Fuc19taW4_size_16_color_FFFFFF_t_70 42]: /images/20210923/b6db2312978449e190e9488500a9daa7.png