diff --git a/public/images/cy.png b/public/images/cy.png
new file mode 100644
index 0000000..4304ef1
Binary files /dev/null and b/public/images/cy.png differ
diff --git a/public/images/home-bg.png b/public/images/home-bg.png
new file mode 100644
index 0000000..365cb70
Binary files /dev/null and b/public/images/home-bg.png differ
diff --git a/public/images/js.png b/public/images/js.png
new file mode 100644
index 0000000..13cbffa
Binary files /dev/null and b/public/images/js.png differ
diff --git a/public/images/jsHover.png b/public/images/jsHover.png
new file mode 100644
index 0000000..7492d6f
Binary files /dev/null and b/public/images/jsHover.png differ
diff --git a/public/images/login-bg.png b/public/images/login-bg.png
new file mode 100644
index 0000000..a9507a9
Binary files /dev/null and b/public/images/login-bg.png differ
diff --git a/public/images/nav-top.png b/public/images/nav-top.png
new file mode 100644
index 0000000..5b4288e
Binary files /dev/null and b/public/images/nav-top.png differ
diff --git a/public/images/nav.jpg b/public/images/nav.jpg
new file mode 100644
index 0000000..ca9e101
Binary files /dev/null and b/public/images/nav.jpg differ
diff --git a/src/App.vue b/src/App.vue
index fb25d77..3f88ce7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,9 +5,6 @@
 </template>
 
 <style lang="less">
-html{
-  // font-size: 16px;
-}
 * {
   box-sizing: border-box;
   user-select: none;
diff --git a/src/assets/login/login-bg.png b/src/assets/login/login-bg.png
new file mode 100644
index 0000000..9505bb3
Binary files /dev/null and b/src/assets/login/login-bg.png differ
diff --git a/src/components/topContent/index.vue b/src/components/topContent/index.vue
index e468661..d49896c 100644
--- a/src/components/topContent/index.vue
+++ b/src/components/topContent/index.vue
@@ -73,7 +73,7 @@ export default {
 .menu-wrap {
     box-sizing: border-box;
     height: 85px;
-    background-image: url('../../../public/images//menu-top-bg.png');
+    background-image: url('../../../public/images/menu-top-bg.png');
     background-size: 100%;
 
     .content {
@@ -87,7 +87,7 @@ export default {
                 margin-left: 20px;
             }
 
-            width: 400px;
+            width: 420px;
             height: 20px;
             display: flex;
             justify-content: space-around;
diff --git a/src/router/index.js b/src/router/index.js
index eb4e115..18776b4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,16 +1,16 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import home from "../views/home";
 Vue.use(VueRouter);
+import home from "../views/home";
 import layout from "@/views/layout";
-// import systemManagement from './routes/systemManagement'
+import login from '../views/login';
 
 const routes = [
   {
     path: "/",
     name: "layout",
     component: layout,
-    redirect: "/cygh",
+    redirect: "/home",
     children: [
       {
         path: "home",
@@ -75,8 +75,31 @@ const routes = [
           name: "sjzx",
         },
       },
+      {
+        path: "sjzx",
+        name: "sjzx",
+        component: () => import("@/views/sjzx"),
+        meta: {
+          title: "功能农业生产管理",
+          name: "sjzx",
+        },
+      },
+      {
+        path: "sjzx",
+        name: "sjzx",
+        component: () => import("@/views/sjzx"),
+        meta: {
+          title: "功能农业生产管理",
+          name: "sjzx",
+        },
+      },
     ],
   },
+  {
+    path: "/login",
+    name: "login",
+    component: login,
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/cygh/components/fxzt.vue b/src/views/cygh/components/fxzt.vue
index af8f363..8f3612a 100644
--- a/src/views/cygh/components/fxzt.vue
+++ b/src/views/cygh/components/fxzt.vue
@@ -39,12 +39,12 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    splitLine: {                                //网格线
-                        show: true,                                //是否显示
-                        lineStyle: {                                //网格线样式
-                            color: '#ECF4F9',                        //网格线颜色
-                            width: 1,                                //网格线的加粗程度
-                            type: 'dashed',                           //网格线类型
+                    splitLine: { //网格线
+                        show: true, //是否显示
+                        lineStyle: { //网格线样式
+                            color: '#ECF4F9',//网格线颜色
+                            width: 1,//网格线的加粗程度
+                            type: 'dashed',//网格线类型
                             opacity: 0.2
                         }
                     },
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8988df3..469d43e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -57,8 +57,8 @@
     </div>
 </template>
 <script>
-const src = require("../../../public/images/topmenu.jpg");
-const srcHover = require("../../../public/images/topmenu-hover.jpg");
+const src = require("../../../public/images/jsHover.png");
+const srcHover = require("../../../public/images/js.png");
 const mwnusrc = require("../../../public/images/menuleft.png");
 const mwnusrcHover = require("../../../public/images/menuleft-active.png");
 const mwnusrcR = require('../../../public/images/menuright.png')
@@ -187,15 +187,26 @@ export default {
     font-size: 24px;
     font-family: YouSheBiaoTiHei;
     color: #FFFFFF;
-    text-shadow: 0px 0px 11px #0043A1, 0px 0px 5px rgba(96, 163, 255, 0.5);
-    
+    background-image: url('../../../public/images/home-bg.png');
+
+    background-size: 80% 50%;
+    background-repeat: no-repeat;
+    background-position: 50% 60%;
+
     .topMenu {
         display: flex;
         justify-content: space-around;
 
         .content {
+            width: 200px;
+            height: 16vh;
+            text-align: center;
+            display: inline-block;
+            position: relative;
+
             .title {
-                padding: 10px 0;
+                padding: 2vh 0;
+                display: inline-block;
             }
 
             .activeTitle {
@@ -203,10 +214,17 @@ export default {
             }
 
             .imgWrap {
-                width: 100px;
-                height: 100px;
-                margin: 0 auto;
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                background-image: url(../../../public/images/cy.png);
+                background-size: 60%;
+                background-repeat: no-repeat;
+                background-position: 50%;
             }
+
         }
 
         .content:hover {
@@ -273,7 +291,6 @@ export default {
             width: 40%;
             height: 100%;
             position: absolute;
-            top: 5%;
             left: 30%;
 
 
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 5bd3b69..cb364e9 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -12,19 +12,19 @@
 export default {
     data() {
         return {
-            showReturn:false
+            showReturn: false
         }
     },
-    created(){
-        console.log("layout",111111)
+    created() {
+        console.log("layout", 111111)
     },
 }
 </script>
 <style lang="less" scoped>
 .layout-wrap {
     height: 100%;
-    background-color: rgb(11, 28, 58);
- 
+    background-image: url('../../../public//images/nav.jpg');
+
     .content {
         height: calc(100% - 85px);
         overflow: auto;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..c09881e
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,488 @@
+<template>
+    <div class="main">
+        <div class="title">功能农业大数据平台</div>
+        <div class="loginContainer">
+            <div class="loginBox">
+                <div class="topZS"></div>
+                <el-tabs v-model="activeName" @tab-click="handleClick">
+                    <el-tab-pane label="账号密码登录" name="first">
+                        <el-form class="loginForm">
+                            <el-form-item class="user">
+                                <img src="../../assets/login/password.png" />
+                                <el-input class="eInput" v-model="ruleForm.username" placeholder="请输入用户名" />
+                            </el-form-item>
+                            <br />
+                            <el-form-item class="user">
+                                <img src="../../assets/login/user.png" />
+                                <el-input class="eInput" type="password" v-model="ruleForm.password" autocomplete="off"
+                                    placeholder="请输入密码" />
+                            </el-form-item>
+                            <el-form-item class="userKey">
+                                <div class="userKeybox">
+                                    <img src="../../assets/login/code01.png" />
+                                    <el-input class="keyInput" v-model="ruleForm.checkcode" placeholder="请输入验证码" />
+                                </div>
+                                <div ref="img" @click="getCode()" class="codeimgBox">
+                                    <img :src="pic" class="yanzheng" />
+                                </div>
+                            </el-form-item>
+                            <el-form-item class="loginbtn">
+                                <el-button @click="login">登录</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                    <!-- <el-tab-pane label="数字证书登录" name="second">
+                        <div class="shuziZS_box">
+                            <div class="keyBox">
+                                <div class="keyText">请输入电子数字证书</div>
+
+                                <div class="huanhang"></div>
+                                <div class="keyIcon">
+                                    <img src="../assets/login/key.png" />
+                                </div>
+                            </div>
+                            <div class="loginbtn">
+                                <el-button>登录</el-button>
+                            </div>
+                        </div>
+                    </el-tab-pane> -->
+                </el-tabs>
+                <div class="bottomZS"></div>
+            </div>
+        </div>
+    </div>
+</template>
+  
+<script>
+// import { getCheckCode } from "@/utils/login";
+export default {
+    data() {
+        return {
+            activeName: "first",
+            ruleForm: {},
+            pic: "",
+        };
+    },
+    created() {
+        // this.getCode();
+    },
+    methods: {
+        // getCode() {
+        //     let random = Math.random();
+        //     getCheckCode({ type: "math", s: random }).then((res) => {
+        //         // console.log(res.data);
+        //         this.pic = "data:image/gif;base64," + res.img;
+        //         this.ruleForm.uuid = res.uuid;
+        //     });
+        // },
+        login() {
+            if (!this.ruleForm.username) {
+                this.$message.error("请输入用户名");
+                return;
+            }
+            if (!this.ruleForm.password) {
+                this.$message.error("请输入密码");
+                return;
+            }
+            if (!this.ruleForm.checkcode) {
+                this.$message.error("请输入验证码");
+                return;
+            }
+            const param = {
+                username: this.ruleForm.username,
+                password: this.ruleForm.password,
+                code: this.ruleForm.checkcode,
+                uuid: this.ruleForm.uuid,
+            };
+            this.$store
+                .dispatch("Login", param)
+                .then((res) => {
+                    if (res.code === 200) {
+                        sessionStorage.setItem("activeIndex", "1");
+                        this.$router.push({
+                            path: "/home/compositeIndex",
+                        });
+                    } else {
+                        this.$message.error(res.msg);
+                        return;
+                    }
+                })
+                .catch(() => {
+                    //this.$message.error(err.msg)
+                    this.getCode();
+                });
+        },
+        handleClick() { },
+    },
+};
+</script>
+  
+<style lang="less" scoped>
+.main {
+    width: 100vw;
+    height: 100vh;
+    background: url("../../../public/images/login-bg.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .title {
+        position: absolute;
+        top: 10vh;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: YouSheBiaoTiHei;
+        font-size: 56px;
+        color: #59ffda;
+        letter-spacing: 4.6px;
+        text-align: justify;
+        line-height: 57px;
+        text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
+        font-weight: 400;
+    }
+
+    .loginContainer {
+        width: 95%;
+        height: 95%;
+        // background: url("~@/assets/login/loginback02.png") no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .loginBox {
+            width: 790px;
+            height: 540px;
+            background: url("~@/assets/login/loginback03.png") no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+
+            .topZS {
+                position: absolute;
+                width: 100%;
+                height: 30px;
+                top: 0;
+                left: 0;
+                background: url("~@/assets/login/loginback04.png") no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .buttonBox {
+                width: 700px;
+                height: 74px;
+                background-image: linear-gradient(90deg,
+                        rgba(238, 238, 238, 0) 0%,
+                        rgba(53, 206, 150, 0.4) 50%,
+                        rgba(216, 216, 216, 0) 100%);
+            }
+
+            .bottomZS {
+                position: absolute;
+                width: 100%;
+                height: 30px;
+                bottom: 0;
+                left: 0;
+                background: url("~@/assets/login/loginback04.png") no-repeat;
+                background-size: 100% 100%;
+                transform: rotateX(180deg);
+            }
+
+            /deep/.el-tabs {
+                width: 790px;
+                height: 540px;
+                padding: 30px 45px;
+                box-sizing: border-box;
+
+                .el-tabs__header {
+                    width: 700px;
+                    height: 72px;
+                    background-image: linear-gradient(90deg,
+                            rgba(238, 238, 238, 0) 0%,
+                            rgba(53, 206, 150, 0.4) 50%,
+                            rgba(216, 216, 216, 0) 100%);
+
+                    .el-tabs__nav-wrap {
+                        height: 72px;
+                        border: 0;
+
+                        .el-tabs__nav-scroll {
+                            height: 72px;
+
+                            .el-tabs__nav {
+                                height: 72px;
+                                width: 100%;
+
+                                .el-tabs__active-bar {
+                                    background: #32ff9f;
+                                    width: 50% !important;
+                                }
+
+                                .el-tabs__item {
+                                    height: 72px;
+                                    width: 50%;
+                                    line-height: 72px;
+                                    text-align: center;
+                                    font-family: AlimamaShuHeiTi;
+                                    font-size: 30px;
+                                    color: #edfaff;
+                                    letter-spacing: 2.86px;
+                                    font-weight: 700;
+                                }
+
+                                .is-active {
+                                    color: #32ff9a;
+                                }
+                            }
+                        }
+                    }
+
+                    .el-tabs__nav-wrap::after {
+                        display: none;
+                    }
+                }
+
+                .el-tabs__content {
+                    width: 700px;
+                    height: calc(100% - 87px);
+
+                    .loginForm {
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        flex-wrap: wrap;
+                    }
+
+                    .shuziZS_box {
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        flex-wrap: wrap;
+
+                        .keyBox {
+                            width: 600px;
+                            height: 182px;
+                            background: rgba(8, 44, 47, 0.81);
+                            border: 1px solid rgba(38, 170, 123, 1);
+                            border-radius: 3px;
+                            margin-top: 40px;
+                            display: flex;
+                            flex-wrap: wrap;
+                            justify-content: center;
+
+                            .keyText {
+                                margin-top: 30px;
+                                width: 100%;
+                                height: 33px;
+                                text-align: center;
+                                line-height: 33px;
+                                opacity: 0.8;
+                                font-family: PingFangSC-Regular;
+                                font-size: 24px;
+                                color: #ffffff;
+                                letter-spacing: 2px;
+                                font-weight: 400;
+                            }
+
+                            .huanhang {
+                                width: 100%;
+                                height: 1px;
+                            }
+
+                            .keyIcon {
+                                margin-top: -40px;
+                                width: 50px;
+                                height: 50px;
+                                background: #f14141;
+                                box-shadow: 0px 0px 8px 1px rgba(188, 37, 37, 0.76);
+                                border-radius: 8px;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+
+                                img {
+                                    width: 17px;
+                                    height: 31px;
+                                }
+                            }
+                        }
+                    }
+
+                    .user {
+                        width: 600px;
+                        height: 66px;
+                        background: rgba(8, 44, 47, 0.81);
+                        border: 1px solid rgba(38, 170, 123, 1);
+                        border-radius: 3px;
+                        display: flex;
+                        margin-top: 15px;
+
+                        .el-form-item__content {
+                            display: flex !important;
+                            align-items: center;
+                        }
+
+                        img {
+                            margin-left: 10px;
+                            width: 24px;
+                            height: 26px;
+                        }
+
+                        .eInput {
+                            display: inline-block;
+                            width: 550px;
+                            height: 66px;
+
+                            background: rgba(0, 0, 0, 0);
+                            color: #cfe9ff;
+                            font-size: 19px;
+                            padding-left: 10px;
+                            border: 0;
+                            letter-spacing: 1.65px;
+                            font-weight: 400;
+
+                            .el-input__inner {
+                                height: 65px;
+                                line-height: 65px;
+                                background: rgba(0, 0, 0, 0);
+                                border: 0;
+                                color: #eeeeee;
+                            }
+                        }
+
+                        .keyInput {
+                            height: 65px;
+                            width: 321px;
+                            background-color: rgba(0, 0, 0, 0.05);
+                            opacity: 0.5;
+                            color: #cfe9ff;
+                            font-size: 19px;
+                            padding-left: 10px;
+                            border: 0;
+                            letter-spacing: 1.65px;
+                            font-weight: 400;
+                        }
+                    }
+
+                    .user:hover {
+                        background: rgba(8, 44, 47, 0.81);
+                        border: 1px solid rgba(79, 255, 141, 1);
+                        border-radius: 3px;
+                    }
+
+                    .userKey {
+                        width: 600px;
+                        height: 66px;
+
+                        display: flex;
+                        margin-top: 15px;
+
+                        .el-form-item__content {
+                            display: flex !important;
+                            align-items: center;
+                        }
+
+                        .userKeybox {
+                            width: 475px;
+                            height: 65px;
+                            background: rgba(8, 44, 47, 0.81);
+                            border: 1px solid rgba(38, 170, 123, 1);
+                            border-radius: 3px;
+                            display: flex;
+                            align-items: center;
+
+                            img {
+                                margin-left: 10px;
+                                width: 24px;
+                                height: 26px;
+                            }
+
+                            .keyInput {
+                                height: 65px;
+                                width: 321px;
+                                background-color: rgba(0, 0, 0, 0);
+
+                                color: #cfe9ff;
+                                font-size: 19px;
+                                padding-left: 10px;
+                                border: 0;
+                                letter-spacing: 1.65px;
+                                font-weight: 400;
+
+                                .el-input__inner {
+                                    height: 65px;
+                                    line-height: 65px;
+                                    background: rgba(0, 0, 0, 0);
+                                    border: 0;
+                                    color: #eeeeee;
+                                }
+
+                                .keyInput {
+                                    height: 65px;
+                                    width: 321px;
+                                    background-color: rgba(0, 0, 0, 0.05);
+                                    opacity: 0.5;
+                                    color: #cfe9ff;
+                                    font-size: 19px;
+                                    padding-left: 10px;
+                                    border: 0;
+                                    letter-spacing: 1.65px;
+                                    font-weight: 400;
+                                }
+                            }
+                        }
+
+                        .userKeybox:hover {
+                            background: rgba(8, 44, 47, 0.81);
+                            border: 1px solid rgba(79, 255, 141, 1);
+                            border-radius: 3px;
+                        }
+
+                        .codeimgBox {
+                            width: 123px;
+                            height: 66px;
+
+                            .yanzheng {
+                                width: 123px;
+                                height: 66px;
+
+                                background-image: linear-gradient(90deg,
+                                        #0a2340 0%,
+                                        rgba(18, 64, 105, 0.04) 100%);
+                                border-image: linear-gradient(to right, #124169, #7bf3fc) 1 1;
+                            }
+                        }
+                    }
+
+                    .loginbtn {
+                        width: 600px;
+                        height: 66px;
+                        margin-top: 15px;
+                        background: url("~@/assets/login/loginbackbtn.png") no-repeat;
+                        background-size: 100% 100%;
+
+                        button {
+                            width: 600px;
+                            height: 66px;
+                            border: 0;
+                            font-size: 20px;
+                            color: #edfaff;
+                            letter-spacing: 6px;
+                            font-weight: 500;
+                            background-color: rgba(0, 0, 0, 0);
+                        }
+                    }
+
+                    .loginbtn:hover {
+                        background: url("~@/assets/login/loginbackbtn02.png") no-repeat;
+                        background-size: 100% 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scgl/components/gdmj.vue b/src/views/scgl/components/gdmj.vue
index f22e0dd..0acd045 100644
--- a/src/views/scgl/components/gdmj.vue
+++ b/src/views/scgl/components/gdmj.vue
@@ -42,7 +42,7 @@ export default {
                                     fontWeight: 400,
                                     color: '#ECF4F9'
                                 },
-                                formatter: "{b}"
+                                formatter: "{b}({c})"
                             },
                         }
                     },
diff --git a/src/views/scgl/components/xhptr.vue b/src/views/scgl/components/xhptr.vue
index 2e9dde3..20e5edd 100644
--- a/src/views/scgl/components/xhptr.vue
+++ b/src/views/scgl/components/xhptr.vue
@@ -42,7 +42,7 @@ export default {
                                     fontWeight: 400,
                                     color: '#ECF4F9'
                                 },
-                                formatter: "{b}"
+                                formatter: "{b}({c}吨)"
                             },
                         }
                     },
diff --git a/src/views/sjzx/index.vue b/src/views/sjzx/index.vue
index c17697c..e69de29 100644
--- a/src/views/sjzx/index.vue
+++ b/src/views/sjzx/index.vue
@@ -1,16 +0,0 @@
-<template>
-    <div>
-
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {}
-    },
-    created() {
-        this.$store.commit('SET_ROUTERINFO', this.$route.meta)
-    },
-}
-</script>
-<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/views/zygk/components/fwfb.vue b/src/views/zygk/components/fwfb.vue
new file mode 100644
index 0000000..44ae38e
--- /dev/null
+++ b/src/views/zygk/components/fwfb.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="fwfb-wrap">
+        <titleCard>全球发文省直辖市分布(篇)
+        </titleCard>
+        <div class="fwfb-chart">
+            <div id="fwfb" style="width: 100%;height: 100%;"></div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title: {
+                    text: '',
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    show: false
+                },
+                series: [
+                    {
+                        name: '详情',
+                        type: 'pie',
+                        center: ['50%', '50%'],
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+
+                        label: {
+                            normal: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: 12,
+                                    fontFamily: 'PingFangSC, PingFang SC',
+                                    fontWeight: 400,
+                                    color: '#ECF4F9'
+                                },
+                                formatter: "{b}({c}篇)"
+                            },
+                        },
+
+                    },
+
+                ]
+            }
+        }
+    },
+    mounted() {
+        this.getfwfbEchart()
+    },
+    methods: {
+        getfwfbEchart() {
+            var chartDom = document.getElementById('fwfb');
+            var myChart = this.$echarts.init(chartDom);
+            this.option.series[0].data = [
+                { value: 104, name: '湖北' },
+                { value: 735, name: '四川' },
+                { value: 580, name: '陕西' },
+                { value: 484, name: '上海' },
+                { value: 300, name: '其他省份' },
+                { value: 200, name: '北京' },
+                { value: 200, name: '江苏' },
+                { value: 200, name: '广东' },
+                { value: 400, name: '浙江' },
+                { value: 200, name: '上海' },
+            ],
+                this.option && myChart.setOption(this.option);
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+.fwfb-wrap {
+
+    .fwfb-chart {
+        height: 140px;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/components/fwqs.vue b/src/views/zygk/components/fwqs.vue
new file mode 100644
index 0000000..cdad6da
--- /dev/null
+++ b/src/views/zygk/components/fwqs.vue
@@ -0,0 +1,153 @@
+<template>
+    <div class="fwqs-wrap">
+        <titleCard>中国功能农业领域年度发文趋势</titleCard>
+        <div class="fwqs-zx">
+            <div id="fxqs" style="width: 100%;height: 100%;">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title:{
+                    show:false
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2003', '2004', '2001'],
+                    axisLabel: {
+                        interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        rotate: 45, //旋转角度为01 
+                        // align: 'center',
+                        fontSize: 12,
+                        lineHeight: 14,
+                        textStyle: {
+                            with: '30px',
+                            wordBreak: 'break-all'
+                        }
+                    },
+                    axisTick: {//坐标轴刻度设置
+                        show: false, //是否显示坐标轴刻度
+                        inside: true, //坐标轴刻度指向(true表示向上   false表示向下)
+                        alignWithLabel: true,//刻度线是否和标签对齐
+                        length: 5,//坐标轴刻度长度
+                        lineStyle: {//坐标轴刻度的样式
+                            color: 'black',//坐标轴刻度的颜色
+                            width: 2,//坐标轴刻度的粗细程度(用数字表示)
+                            type: 'solid'//坐标轴刻度的类型(可选solid  dotted  dashed)
+                        }
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    show: true,
+                    name: '发文量:篇',
+                    nameTextStyle: {      //坐标轴名称的文字样式
+                        color: '#ECF4F9',    //坐标轴名称的颜色
+                        fontSize: 12,       //坐标轴名称的大小 (用数字表示)
+                        // fontWeight: 'bold', //坐标轴文字加粗程度  (可选bold   bolder  lighter  normal)
+                        // fontstyle: 'normal',  //坐标轴文字样式  (可选normal  italic   oblique)
+                        // fontFamily: '华文行楷',  //坐标轴文字风格 (可选楷体  宋体  华文行楷等等)
+                        // padding: [5, 24, 0, 0]  //坐标轴文字边距 (上右下左)
+                    },
+                    splitLine: { //网格线
+                        show: true, //是否显示
+                        lineStyle: { //网格线样式
+                            color: '#ECF4F9',//网格线颜色
+                            width: 1,//网格线的加粗程度
+                            type: 'dashed',//网格线类型
+                            opacity: 0.2
+                        }
+                    },
+                    // min: 'dataMin', // 取数据的最小值
+                    // scale: true, //取消强制包含0刻度
+                    axisLine: { show: true, },
+                    axisLabel: {
+                        // interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        // rotate: 0, //旋转角度为01 
+                        // align:'center',
+                        fontSize: 12,
+                    }
+                },
+                series: [
+                    {
+                        data: [100, 200, 600, 80, 70, 100, 200, 600, 80, 70, 100, 200, 600, 80, 70],
+                        type: 'bar',
+                        // barWidth: 10, // 柱子的宽度
+                        showBackground: true,
+                        // 每根柱子的样式
+                        itemStyle: {
+                            // 圆角
+                            // normal: {
+                            //     barBorderRadius: [5, 5, 0, 0]
+                            // },
+                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: '#2378f7' },
+                                { offset: 0.7, color: '#2378f7' },
+                                { offset: 1, color: '#83bff6' }
+                            ])
+                        },
+                        // 鼠标悬浮
+                        // emphasis: {
+                        //     itemStyle: {
+                        //         color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        //             { offset: 0, color: '#2378f7' },
+                        //             { offset: 0.7, color: '#2378f7' },
+                        //             { offset: 1, color: '#83bff6' }
+                        //         ])
+                        //     }
+                        // },
+                        // 顶部文字
+                        label: {
+                            show: true,
+                            opacity: 0.5,
+                            position: 'inside',
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+                        }
+                    }
+                ],
+                grid: {
+                    top: '22%', // 上边界距离容器顶部的百分比或像素值
+                    bottom: '18.5%', // 下边界距离容器底部的百分比或像素值
+                    left: '10%',
+                    right: '0'
+                }
+            }
+        }
+    },
+    mounted() {
+        this.getfwqsEchart()
+    },
+    methods: {
+        getfwqsEchart() {
+            var chartDom = document.getElementById('fxqs');
+            var myChart = this.$echarts.init(chartDom);
+            this.option && myChart.setOption(this.option);
+            window.addEventListener("resize", () => {
+                this.mapChart.resize();
+            });
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.fwqs-wrap {
+    .fwqs-zx {
+        height: 160px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/components/fwyj.vue b/src/views/zygk/components/fwyj.vue
new file mode 100644
index 0000000..b17046b
--- /dev/null
+++ b/src/views/zygk/components/fwyj.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="fwyj-wrap">
+        <titleCard>全球功能农业领域发文研究分支分布</titleCard>
+        <div class="fwyj-zx">
+            <div id="fxyj" style="width: 100%;height: 100%;">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title: {
+                    show: false
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    show: false
+                },
+                grid: {
+                    top: "5%",
+                    left: '0%',
+                    right: '8%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+
+                    name: '篇',
+                    nameTextStyle: {      //坐标轴名称的文字样式
+                        color: '#ECF4F9',    //坐标轴名称的颜色
+                        fontSize: 12,       //坐标轴名称的大小 (用数字表示)
+                        // fontWeight: 'bold', //坐标轴文字加粗程度  (可选bold   bolder  lighter  normal)
+                        // fontstyle: 'normal',  //坐标轴文字样式  (可选normal  italic   oblique)
+                        // fontFamily: '华文行楷',  //坐标轴文字风格 (可选楷体  宋体  华文行楷等等)
+                    },
+                    fontSize: 12,
+                    axisLabel: {
+                        // interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        fontSize: 12,
+                    },
+                    splitLine: { //网格线
+                        show: true, //是否显示
+                        lineStyle: { //网格线样式
+                            color: '#ECF4F9',//网格线颜色
+                            width: 1,//网格线的加粗程度
+                            type: 'dashed',//网格线类型
+                            opacity: 0.2
+                        }
+                    },
+                },
+                yAxis: {
+                    type: 'category',
+                    data: ['规划', '万法学', '标准', '精准营养', '精准加工', '养殖', '功能种子', '功能肥料', '功能土壤', '功能成分'],
+                    fontSize: 12,
+                    axisLabel: {
+                        interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        fontSize: 12,
+                    },
+                    splitLine: { //网格线
+                        show: true, //是否显示
+                        lineStyle: { //网格线样式
+                            color: '#ECF4F9',//网格线颜色
+                            width: 1,//网格线的加粗程度
+                            type: 'dashed',//网格线类型
+                            opacity: 0.2
+                        }
+                    },
+                },
+                series: [
+                    {
+                        name: '发文量',
+                        type: 'bar',
+                        data: [20, 200, 300, 150, 320, 450, 100, 600, 500, 200],
+                        // 顶部文字
+                        label: {
+                            show: true,
+                            position: 'inside',
+                            opacity: 0.5,
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+                        }
+                    },
+
+
+                ]
+            }
+        }
+
+    },
+    mounted() {
+        this.getfwyjEchart()
+    },
+    methods: {
+        getfwyjEchart() {
+            var chartDom = document.getElementById('fxyj');
+            var myChart = this.$echarts.init(chartDom);
+            this.option && myChart.setOption(this.option);
+            window.addEventListener("resize", () => {
+                this.mapChart.resize();
+            });
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.fwyj-wrap {
+    .fwyj-zx {
+        height: 180px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/components/smzq.vue b/src/views/zygk/components/smzq.vue
new file mode 100644
index 0000000..db62185
--- /dev/null
+++ b/src/views/zygk/components/smzq.vue
@@ -0,0 +1,242 @@
+<template>
+    <div class="smzq-wrap">
+        <titleCard>全球功能农业领域专利技术生命周期图
+        </titleCard>
+        <div class="smzq-chart">
+            <div id="smzq" style="width: 100%;height: 100%;"></div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title: {
+                    text: ''
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                    }
+                },
+                legend: {
+                    show: false,
+                    data: ['年综合产值'],
+                    right: '5%',
+                    itemStyle: {
+                    },
+                    textStyle: {
+                        color: '#E0E0E0'
+                    },
+                    fontSize: 12
+                },
+                grid: {
+                    top: '20%',
+                    left: '0',
+                    right: '17%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: false,
+                        // data: [], 可在series定义
+                        name: '专利权人\n数数量/个',
+                        nameTextStyle: {      //坐标轴名称的文字样式
+                            color: '#ECF4F9',    //坐标轴名称的颜色
+                            fontSize: 12,       //坐标轴名称的大小 (用数字表示)
+                            // fontWeight: 'bold', //坐标轴文字加粗程度  (可选bold   bolder  lighter  normal)
+                            // fontstyle: 'normal',  //坐标轴文字样式  (可选normal  italic   oblique)
+                            // fontFamily: '华文行楷',  //坐标轴文字风格 (可选楷体  宋体  华文行楷等等)
+                        },
+                        axisTick: {                                    //坐标轴刻度设置
+                            show: false,                                  //是否显示坐标轴刻度
+                            inside: true,                              //坐标轴刻度指向        (true表示向上   false表示向下)
+                            alignWithLabel: true,                        //刻度线是否和标签对齐
+                            length: 5,                                 //坐标轴刻度长度
+                            lineStyle: {                                //坐标轴刻度的样式
+                                color: 'black',                            //坐标轴刻度的颜色
+                                width: 2,                                //坐标轴刻度的粗细程度    (用数字表示)
+                                type: 'solid'                            //坐标轴刻度的类型        (可选solid  dotted  dashed)
+                            }
+                        },
+                        // splitLine: {                                //网格线
+                        //     show: true,                                //是否显示
+                        //     lineStyle: {                                //网格线样式
+                        //         color: '#ECF4F9',                        //网格线颜色
+                        //         width: 1,                                //网格线的加粗程度
+                        //         type: 'dashed',                           //网格线类型
+                        //         opacity: 0.2
+                        //     }
+                        // },
+                        axisLabel: {
+                            interval: 0, //0 表示所有标签都显示
+                            color: '#ECF4F9',
+                            // rotate: 45, //旋转角度为01 
+                            align: 'center',
+                            fontSize: 12,
+                            lineHeight: 14,
+                            textStyle: {
+                                with: '30px',
+                                wordBreak: 'break-all'
+                            },
+
+                        }
+                    }
+                ],
+                yAxis: {
+                    type: 'value',
+                    name: '专利数量(项)',
+                    show: true,
+                    nameTextStyle: {      //坐标轴名称的文字样式
+                        color: '#ECF4F9',    //坐标轴名称的颜色
+                        fontSize: 12,       //坐标轴名称的大小 (用数字表示)
+                        // fontWeight: 'bold', //坐标轴文字加粗程度  (可选bold   bolder  lighter  normal)
+                        // fontstyle: 'normal',  //坐标轴文字样式  (可选normal  italic   oblique)
+                        // fontFamily: '华文行楷',  //坐标轴文字风格 (可选楷体  宋体  华文行楷等等)
+                        padding: [5, 24, 0, 0]  //坐标轴文字边距 (上右下左)
+                    },
+                    min: 'dataMin', // 取数据的最小值
+                    scale: true, //取消强制包含0刻度
+                    splitLine: {                                //网格线
+                        show: true,                                //是否显示
+                        lineStyle: {                                //网格线样式
+                            color: '#ECF4F9',                        //网格线颜色
+                            width: 1,                                //网格线的加粗程度
+                            type: 'dashed',                           //网格线类型
+                            opacity: 0.2
+                        }
+                    },
+                    axisLine: { show: true, },
+                    axisLabel: {
+                        // interval: 0, //0 表示所有标签都显示
+                        color: '#ECF4F9',
+                        // rotate: 0, //旋转角度为01 
+                        // align:'center',
+                        fontSize: 12,
+                    },
+                    // data: []  如果data为空 默认去series里的数据
+                },
+                series: [
+                    {
+                        name: '',
+                        type: 'line',
+                        stack: 'Total',
+                        smooth: true,
+                        showSymbol: true,
+                        emphasis: {
+                            focus: 'series',
+                        },
+                        // 渐变线
+                        lineStyle: {
+                            normal: {
+                                width: 2,
+                                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(0, 255, 255, 0)'
+                                    },
+                                    {
+                                        offset: 0.2,
+                                        color: 'rgb(0, 255, 255, 5)'
+                                    },
+                                    {
+                                        offset: 0.4,
+                                        color: 'rgb(0, 200, 200, 0)'
+                                    },
+                                    {
+                                        offset: 0.6,
+                                        color: 'rgb(0, 200, 200, 80)'
+                                    },
+                                    {
+                                        offset: 0.8,
+                                        color: 'rgb(0, 255, 255, 8)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(0, 255, 255, 0)'
+                                    }
+                                ])
+                            }
+
+                        },
+                        // 渐变区域
+                        areaStyle: { // 区域面积
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(27,90,183,0)' // 0% 处的颜色
+                                    },
+                                    // {
+                                    //     offset: 0.5,
+                                    //     color: 'rgb(0, 50, 100, 1)' // 50% 处的颜色
+                                    // },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(17,70,139,0.8)' // 100% 处的颜色
+                                    }
+                                ]
+                            }
+
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: 12,
+                                    fontFamily: 'PingFangSC, PingFang SC',
+                                    fontWeight: 400,
+                                    color: '#ECF4F9'
+                                },
+                                trigger: 'item',
+                                formatter: ((params) => {
+                                    console.log(111, params)
+                                    return params.data[2]
+                                })
+                            },
+                        },
+                        data: [[20, 100, '2021'], [45, 150, '2022'], [15, 150, '2023'], [40, 100, '2024'], [65, 150, '2025']],
+                    },
+
+                ]
+            }
+
+        }
+    },
+    mounted() {
+        this.getsmzqEchart()
+    },
+    methods: {
+        getsmzqEchart() {
+            var chartDom = document.getElementById('smzq');
+            var myChart = this.$echarts.init(chartDom);
+            // let data = [100, 150, 200, 300, 360, 240, 220, 170, 420, 350]
+            // this.option.series[0].data = data
+            this.option && myChart.setOption(this.option);
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.smzq-wrap {
+    font-family: PingFangSC, PingFang SC;
+    color: #FFFFFF;
+
+    .smzq-chart {
+        height: 185px;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/components/zlfb.vue b/src/views/zygk/components/zlfb.vue
new file mode 100644
index 0000000..4d899e6
--- /dev/null
+++ b/src/views/zygk/components/zlfb.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="zlfb-wrap">
+        <titleCard>全球发文省直辖市分布(篇)
+        </titleCard>
+        <div class="zlfb-chart">
+            <div id="zlfb" style="width: 100%;height: 100%;"></div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title: {
+                    text: '',
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    show: false
+                },
+                series: [
+                    {
+                        name: '详情',
+                        type: 'pie',
+                        center: ['50%', '50%'],
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+
+                        label: {
+                            normal: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: 12,
+                                    fontFamily: 'PingFangSC, PingFang SC',
+                                    fontWeight: 400,
+                                    color: '#ECF4F9'
+                                },
+                                formatter: "{b}({c}篇)"
+                            },
+                        },
+
+                    },
+
+                ]
+            }
+        }
+    },
+    mounted() {
+        this.getzlfbEchart()
+    },
+    methods: {
+        getzlfbEchart() {
+            var chartDom = document.getElementById('zlfb');
+            var myChart = this.$echarts.init(chartDom);
+            this.option.series[0].data = [
+                { value: 104, name: '湖北' },
+                { value: 735, name: '四川' },
+                { value: 580, name: '陕西' },
+                { value: 484, name: '上海' },
+                { value: 300, name: '其他省份' },
+                { value: 200, name: '北京' },
+                { value: 200, name: '江苏' },
+                { value: 200, name: '广东' },
+                { value: 400, name: '浙江' },
+                { value: 200, name: '上海' },
+            ],
+                this.option && myChart.setOption(this.option);
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+.zlfb-wrap {
+
+    .zlfb-chart {
+        height: 140px;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/components/zlnd.vue b/src/views/zygk/components/zlnd.vue
new file mode 100644
index 0000000..8b2760e
--- /dev/null
+++ b/src/views/zygk/components/zlnd.vue
@@ -0,0 +1,153 @@
+<template>
+    <div class="zlnd-wrap">
+        <titleCard>中国功能农业领域专利年代分布</titleCard>
+        <div class="zlnd-zx">
+            <div id="zlnd" style="width: 100%;height: 100%;">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title: {
+                    show: false
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2001', '2002', '2003', '2004', '2003', '2004', '2001'],
+                    axisLabel: {
+                        interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        rotate: 45, //旋转角度为01 
+                        // align: 'center',
+                        fontSize: 12,
+                        lineHeight: 14,
+                        textStyle: {
+                            with: '30px',
+                            wordBreak: 'break-all'
+                        }
+                    },
+                    axisTick: {//坐标轴刻度设置
+                        show: false, //是否显示坐标轴刻度
+                        inside: true, //坐标轴刻度指向(true表示向上   false表示向下)
+                        alignWithLabel: true,//刻度线是否和标签对齐
+                        length: 5,//坐标轴刻度长度
+                        lineStyle: {//坐标轴刻度的样式
+                            color: 'black',//坐标轴刻度的颜色
+                            width: 2,//坐标轴刻度的粗细程度(用数字表示)
+                            type: 'solid'//坐标轴刻度的类型(可选solid  dotted  dashed)
+                        }
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    show: true,
+                    name: '发文量:篇',
+                    nameTextStyle: {      //坐标轴名称的文字样式
+                        color: '#ECF4F9',    //坐标轴名称的颜色
+                        fontSize: 12,       //坐标轴名称的大小 (用数字表示)
+                        // fontWeight: 'bold', //坐标轴文字加粗程度  (可选bold   bolder  lighter  normal)
+                        // fontstyle: 'normal',  //坐标轴文字样式  (可选normal  italic   oblique)
+                        // fontFamily: '华文行楷',  //坐标轴文字风格 (可选楷体  宋体  华文行楷等等)
+                        // padding: [5, 24, 0, 0]  //坐标轴文字边距 (上右下左)
+                    },
+                    splitLine: { //网格线
+                        show: true, //是否显示
+                        lineStyle: { //网格线样式
+                            color: '#ECF4F9',//网格线颜色
+                            width: 1,//网格线的加粗程度
+                            type: 'dashed',//网格线类型
+                            opacity: 0.2
+                        }
+                    },
+                    // min: 'dataMin', // 取数据的最小值
+                    // scale: true, //取消强制包含0刻度
+                    axisLine: { show: true, },
+                    axisLabel: {
+                        // interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        // rotate: 0, //旋转角度为01 
+                        // align:'center',
+                        fontSize: 12,
+                    }
+                },
+                series: [
+                    {
+                        data: [100, 200, 600, 80, 70, 100, 200, 600, 80, 70, 100, 200, 600, 80, 70],
+                        type: 'bar',
+                        // barWidth: 10, // 柱子的宽度
+                        showBackground: true,
+                        // 每根柱子的样式
+                        itemStyle: {
+                            // 圆角
+                            // normal: {
+                            //     barBorderRadius: [5, 5, 0, 0]
+                            // },
+                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                { offset: 0, color: '#2378f7' },
+                                { offset: 0.7, color: '#2378f7' },
+                                { offset: 1, color: '#83bff6' }
+                            ])
+                        },
+                        // 鼠标悬浮
+                        // emphasis: {
+                        //     itemStyle: {
+                        //         color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        //             { offset: 0, color: '#2378f7' },
+                        //             { offset: 0.7, color: '#2378f7' },
+                        //             { offset: 1, color: '#83bff6' }
+                        //         ])
+                        //     }
+                        // },
+                        // 顶部文字
+                        label: {
+                            show: true,
+                            opacity: 0.5,
+                            position: 'inside',
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+                        }
+                    }
+                ],
+                grid: {
+                    top: '22%', // 上边界距离容器顶部的百分比或像素值
+                    bottom: '18.5%', // 下边界距离容器底部的百分比或像素值
+                    left: '10%',
+                    right: '0'
+                }
+            }
+        }
+    },
+    mounted() {
+        this.getzlndEchart()
+    },
+    methods: {
+        getzlndEchart() {
+            var chartDom = document.getElementById('zlnd');
+            var myChart = this.$echarts.init(chartDom);
+            this.option && myChart.setOption(this.option);
+            window.addEventListener("resize", () => {
+                this.mapChart.resize();
+            });
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.zlnd-wrap {
+    .zlnd-zx {
+        height: 160px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/components/zlsource.vue b/src/views/zygk/components/zlsource.vue
new file mode 100644
index 0000000..492812f
--- /dev/null
+++ b/src/views/zygk/components/zlsource.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="zlsource-wrap">
+        <titleCard>全球发文省直辖市分布(篇)
+        </titleCard>
+        <div class="zlsource-chart">
+            <div id="zlsource" style="width: 100%;height: 100%;"></div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title: {
+                    text: '',
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    show: false
+                },
+                series: [
+                    {
+                        name: '详情',
+                        type: 'pie',
+                        center: ['50%', '50%'],
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+
+                        label: {
+                            normal: {
+                                show: true,
+                                textStyle: {
+                                    fontSize: 12,
+                                    fontFamily: 'PingFangSC, PingFang SC',
+                                    fontWeight: 400,
+                                    color: '#ECF4F9'
+                                },
+                                formatter: "{b}({c}篇)"
+                            },
+                        },
+
+                    },
+
+                ]
+            }
+        }
+    },
+    mounted() {
+        this.getzlsourceEchart()
+    },
+    methods: {
+        getzlsourceEchart() {
+            var chartDom = document.getElementById('zlsource');
+            var myChart = this.$echarts.init(chartDom);
+            this.option.series[0].data = [
+                { value: 104, name: '湖北' },
+                { value: 735, name: '四川' },
+                { value: 580, name: '陕西' },
+                { value: 484, name: '上海' },
+                { value: 300, name: '其他省份' },
+                { value: 200, name: '北京' },
+                { value: 200, name: '江苏' },
+                { value: 200, name: '广东' },
+                { value: 400, name: '浙江' },
+                { value: 200, name: '上海' },
+            ],
+                this.option && myChart.setOption(this.option);
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+.zlsource-wrap {
+
+    .zlsource-chart {
+        height: 140px;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/components/zlyjfb.vue b/src/views/zygk/components/zlyjfb.vue
new file mode 100644
index 0000000..077e182
--- /dev/null
+++ b/src/views/zygk/components/zlyjfb.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="zlyjfb-wrap">
+        <titleCard>全球功能农业领域发文研究分支分布</titleCard>
+        <div class="zlyjfb-zx">
+            <div id="zlyjfb" style="width: 100%;height: 100%;">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            option: {
+                title: {
+                    show: false
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                legend: {
+                    show: false
+                },
+                grid: {
+                    top: "5%",
+                    left: '0%',
+                    right: '8%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+
+                    name: '篇',
+                    nameTextStyle: {      //坐标轴名称的文字样式
+                        color: '#ECF4F9',    //坐标轴名称的颜色
+                        fontSize: 12,       //坐标轴名称的大小 (用数字表示)
+                        // fontWeight: 'bold', //坐标轴文字加粗程度  (可选bold   bolder  lighter  normal)
+                        // fontstyle: 'normal',  //坐标轴文字样式  (可选normal  italic   oblique)
+                        // fontFamily: '华文行楷',  //坐标轴文字风格 (可选楷体  宋体  华文行楷等等)
+                    },
+                    fontSize: 12,
+                    axisLabel: {
+                        // interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        fontSize: 12,
+                    },
+                    splitLine: { //网格线
+                        show: true, //是否显示
+                        lineStyle: { //网格线样式
+                            color: '#ECF4F9',//网格线颜色
+                            width: 1,//网格线的加粗程度
+                            type: 'dashed',//网格线类型
+                            opacity: 0.2
+                        }
+                    },
+                },
+                yAxis: {
+                    type: 'category',
+                    data: ['规划', '万法学', '标准', '精准营养', '精准加工', '养殖', '功能种子', '功能肥料', '功能土壤', '功能成分'],
+                    fontSize: 12,
+                    axisLabel: {
+                        interval: 0, //0 表示所有标签都显示
+                        color: '#fff',
+                        fontSize: 12,
+                    },
+                    splitLine: { //网格线
+                        show: true, //是否显示
+                        lineStyle: { //网格线样式
+                            color: '#ECF4F9',//网格线颜色
+                            width: 1,//网格线的加粗程度
+                            type: 'dashed',//网格线类型
+                            opacity: 0.2
+                        }
+                    },
+                },
+                series: [
+                    {
+                        name: '发文量',
+                        type: 'bar',
+                        data: [20, 200, 300, 150, 320, 450, 100, 600, 500, 200],
+                        // 顶部文字
+                        label: {
+                            show: true,
+                            position: 'inside',
+                            opacity: 0.5,
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+                        }
+                    },
+
+
+                ]
+            }
+        }
+
+    },
+    mounted() {
+        this.getzlyjfbEchart()
+    },
+    methods: {
+        getzlyjfbEchart() {
+            var chartDom = document.getElementById('zlyjfb');
+            var myChart = this.$echarts.init(chartDom);
+            this.option && myChart.setOption(this.option);
+            window.addEventListener("resize", () => {
+                this.mapChart.resize();
+            });
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.zlyjfb-wrap {
+    .zlyjfb-zx {
+        height: 180px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zygk/index.vue b/src/views/zygk/index.vue
index c17697c..fb20268 100644
--- a/src/views/zygk/index.vue
+++ b/src/views/zygk/index.vue
@@ -1,16 +1,331 @@
 <template>
-    <div>
+    <div class="zygk-wrap">
 
+        <!-- 返回全国 -->
+        <!-- <img @click="rebackMap" v-show="isreturn" src="../../../../public/images/fast.png" alt="" style="z-index:999;
+        position: absolute;
+        right: 20px;
+        top: 15px;"> -->
+        <div id="map"></div>
+        <div class="leftInfo-wrap">
+            <div class="lilun">
+                <div class="left">理论基础</div>
+                <div class="right">
+                    <div class="item" :class="{ bgItem: item.id == active }" @click="handleCountry(item.id)"
+                        v-for="item in countoyList" :key="item.id">{{ item.country }}</div>
+                </div>
+            </div>
+            <fwqs />
+            <fwyj />
+            <fwfb />
+        </div>
+        <div class="rightInfo-wrap">
+            <div class="yanjiu">
+                <div class="left">理论基础</div>
+                <zlnd />
+                <zlyjfb />
+                <zlsource />
+                <smzq />
+            </div>
+        </div>
     </div>
 </template>
 <script>
+import nationWide from '../../utils/nationWide.js';
+import fwqs from './components/fwqs.vue'
+import fwyj from './components/fwyj.vue'
+import fwfb from './components/fwfb.vue'
+import zlnd from './components/zlnd.vue'
+import zlyjfb from './components/zlyjfb.vue'
+import zlsource from './components/zlsource.vue'
+import smzq from './components/smzq.vue'
 export default {
+    components: {
+        fwqs,
+        fwyj,
+        fwfb,
+        zlnd,
+        zlyjfb,
+        zlsource,
+        smzq
+    },
     data() {
-        return {}
+        return {
+            active: 0,
+            countoyList: [
+                {
+                    country: '全球',
+                    id: 0
+                },
+                {
+                    country: '中国',
+                    id: 1
+                }
+            ],
+            isreturn: false, // 是否显示返回全国地图按钮
+            mapChart: null, //地图对象
+            mapOption: null,//地图属性
+            dataList: [ //地图标记经纬度坐标和code码,可只要经纬度
+                { name: "西藏", value: [91.23, 29.5, 2333] },
+                { name: "黑龙江", value: [128.03, 47.01, 1007] },
+            ],
+
+        }
     },
     created() {
+        // 更新导航标题
         this.$store.commit('SET_ROUTERINFO', this.$route.meta)
     },
+    mounted() {
+        this.getMap()
+    },
+    methods: {
+        handleCountry(id) {
+            this.active = id
+        },
+        getMap() { //地图
+            if (!this.mapChart) {
+                this.mapChart = this.$echarts.init(document.getElementById('map'));
+            }
+            this.mapOption = {
+                // 背景颜色
+                // backgroundColor: "#00264e",
+                // 提示浮窗样式
+                tooltip: {
+                    show: true,
+                    trigger: "item",
+                    alwaysShowContent: false,
+                    backgroundColor: "#0C121C",
+                    borderColor: "rgba(0, 0, 0, 0.16);",
+                    hideDelay: 100,
+                    triggerOn: "mousemove",
+                    enterable: true,
+                    textStyle: {
+                        color: "#DADADA",
+                        fontSize: "12",
+                        width: 20,
+                        height: 30,
+                        overflow: "break",
+                    },
+                    showDelay: 100
+                },
+                map: 'china',
+                roam: true,//是否启缩放和平移
+                scaleLimit: {
+                    min: 1,
+                    max: 5
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        fontSize: '10',
+                        color: '#fff'
+                    }
+                },
+                // 地图配置
+                geo: {
+                    map: "china",
+                    label: {
+                        // 通常状态下的样式
+                        normal: {
+                            show: true,
+                            textStyle: {
+                                color: "#eee",
+                            },
+                        },
+                        // 鼠标放上去的样式
+                        emphasis: {
+                            textStyle: {
+                                color: "#eee",
+                            },
+                        },
+                    },
+                    // 地图区域的样式设置
+                    itemStyle: {
+                        normal: {
+                            borderColor: "#ccc",
+                            borderWidth: 1,
+                            areaColor: {
+                                type: "radial",
+                                x: 0.5,
+                                y: 0.5,
+                                r: 0.8,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
+                                    },
+                                ],
+                                globalCoord: false, // 缺省为 false
+                            },
+                            shadowColor: "#457b9d",
+                            shadowOffsetX: -2,
+                            shadowOffsetY: 2,
+                            shadowBlur: 10,
+                        },
+                        // 鼠标放上去高亮的样式
+                        emphasis: {
+                            areaColor: "#389BB7",
+                            borderWidth: 0,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '站点信息',
+                        coordinateSystem: 'geo',
+                        type: 'scatter',
+                        geoIndex: 0,
+                        itemStyle: {
+                            normal: {
+                                color: '#c23531'
+                            },
+                            emphasis: {
+                                borderColor: '#fff',
+                                borderWidth: 1,
+                                opacity: 0.5
+                            }
+                        },
+                        symbolSize: 12,
+                        data: this.dataList
+                    }
+
+                ],
+            };
+            // 地图注册，第一个参数的名字必须和option.geo.map一致
+            this.$echarts.registerMap('china', nationWide.china);
+            this.mapChart.setOption(this.mapOption);
+            //地图点位点击事件
+            this.mapChart.on('click', params => {
+                // 获取点击的省份名称
+                let provinceName = params.name
+                // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
+                this.dataList.map(item => {
+                    if (item.name == provinceName) {
+                        this.mapOption.series[0].data = [item];
+                    }
+                })
+                // 进入省级地图
+                // nationWide.cityList.map(value => {
+                //     if (value.name.indexOf(provinceName) !== -1) {
+                //         this.mapChart.clear();
+                //         this.mapOption.geo.map = 'Pmap';
+                //         this.$echarts.registerMap('Pmap', value.data)
+                //         this.mapChart.setOption(this.mapOption);
+                //         this.isreturn = true;
+                //     }
+                // });
+            })
+            window.addEventListener("resize", () => {
+                this.mapChart.resize();
+            });
+        },
+        // rebackMap() { //返回全国地图
+        //     this.mapChart.clear();
+        //     this.mapOption.series[0].data = this.dataList //重新标记
+        //     this.mapOption.geo.map = 'china';
+        //     this.$echarts.registerMap('china', nationWide.china);
+        //     this.mapChart.setOption(this.mapOption);
+        //     this.isreturn = false;
+        // }
+
+
+
+
+    }
 }
 </script>
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.zygk-wrap {
+    height: 100%;
+    position: relative;
+    overflow: auto;
+
+
+
+
+
+    #map {
+        width: 100%;
+        height: (1080 - 85px) !important;
+        position: absolute;
+        left: 0;
+        top: 0;
+
+    }
+
+    .leftInfo-wrap,
+    .rightInfo-wrap {
+        position: absolute;
+        width: 454px;
+        background-image: url('../../../public/images/bg.png');
+        background-size: 100% 100%;
+        padding: 0 20px 20px;
+        font-family: PingFangSC, PingFang SC;
+        color: #ECF4F9;
+
+
+    }
+
+    .leftInfo-wrap {
+        left: 10px;
+
+        .lilun {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+            align-items: center;
+
+            .left {
+                font-size: 20px;
+                font-family: YouSheBiaoTiHei;
+                color: #BFDAF1;
+            }
+
+            .right {
+                font-size: 14px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                display: flex;
+
+                .item {
+                    height: 30px;
+                    line-height: 30px;
+                    text-align: center;
+                    width: 90px;
+
+
+                }
+
+                .bgItem {
+                    background-image: url('../../../public/images/year-bg.png');
+                    background-size: 100% 100%;
+                }
+
+                .item:hover {
+                    cursor: pointer;
+                    background-image: url('../../../public/images/year-bg.png');
+                    background-size: 100% 100%;
+                }
+            }
+        }
+
+    }
+
+}
+
+.rightInfo-wrap {
+    right: 10px;
+
+    .yanjiu {
+        font-size: 20px;
+        margin-top: 20px;
+        font-family: YouSheBiaoTiHei;
+        color: #BFDAF1;
+    }
+}
+</style>
\ No newline at end of file