diff --git a/static/package-lock.json b/static/package-lock.json
index 21d29d6..248733a 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -11239,9 +11239,9 @@
       }
     },
     "vue-loader-v16": {
-      "version": "npm:vue-loader@16.5.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
-      "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -11296,9 +11296,9 @@
           "optional": true
         },
         "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
           "dev": true,
           "optional": true,
           "requires": {
diff --git a/static/public/favicon1.ico b/static/public/favicon1.ico
new file mode 100644
index 0000000..ea79ba5
Binary files /dev/null and b/static/public/favicon1.ico differ
diff --git a/static/src/router/asideRoute.js b/static/src/router/asideRoute.js
new file mode 100644
index 0000000..223cf9a
--- /dev/null
+++ b/static/src/router/asideRoute.js
@@ -0,0 +1,51 @@
+import Positive from '../views/positive/positive.vue'
+import Negative from '../views/negative/negative.vue'
+import WordCloud from "../views/wordCloud/wordCloud.vue"
+import Netease from "../views/netease/netease.vue"
+import CommentsType from "../views/commentsType/commentsType.vue"
+
+const asideRoute = [
+    {
+        path: '/positive',
+        name: 'Top积极词汇统计',
+        meta: {
+            title: 'positive',
+            // icon: 'fa fa-paper-plane'
+        },
+        component: Positive,
+    },{
+        path: '/negative',
+        name: 'Top消极词汇统计',
+        component: Negative,
+        meta: {
+            title: 'negative',
+            // icon: 'fa fa-paper-plane'
+        },
+    },{
+        path: '/wordCloud',
+        name: '词云图分析',
+        component: WordCloud,
+        meta: {
+            title: 'wordCloud',
+            // icon: 'fa fa-paper-plane'
+        },
+    },{
+        path: '/commentsType',
+        name: '评论类型占比',
+        component: CommentsType,
+        meta: {
+            title: 'commentsType',
+            // icon: 'fa fa-paper-plane'
+        },
+    },{
+        path: '/netease',
+        name: '网易严选',
+        component: Netease,
+        meta: {
+            title: 'netease',
+            // icon: 'fa fa-paper-plane'
+        },
+    }
+]
+
+export default asideRoute
\ No newline at end of file
diff --git a/static/src/router/index.js b/static/src/router/index.js
index 58385ba..0ee8efc 100644
--- a/static/src/router/index.js
+++ b/static/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Login from '../views/login/Login.vue'
+import asideRoute from './asideRoute.js'
 
 Vue.use(VueRouter)
 
@@ -15,6 +16,15 @@ const routes = [
     name: 'Home',
     component: () => import('../views/home/Home.vue'),
   },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/about/About.vue'),
+    children: asideRoute
+  },
 
   
 ]
diff --git a/static/src/views/about/About.vue b/static/src/views/about/About.vue
new file mode 100644
index 0000000..b207554
--- /dev/null
+++ b/static/src/views/about/About.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="about">
+    <el-container>
+      <el-aside width="230px">
+        <Aside />
+      </el-aside>
+      <el-container>
+        <el-header>
+          <BreadCrumb @search="search" :url.sync="newUrl"/>
+        </el-header>
+        <el-main class="main">{{url}}{{newUrl}}
+          <AppMain/>
+        </el-main>
+        <!-- <el-footer>Footer</el-footer> -->
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script>
+import Aside from "./components/aside.vue";
+import BreadCrumb from "./components/breadcrumb.vue";
+import AppMain from "./components/appmain.vue";
+import * as info from "../../api/info";
+export default {
+  name: "about",
+  components: { Aside, BreadCrumb, AppMain },
+  props:{
+    newUrl:{
+      type:String,
+      default:''
+    }
+  },
+  data() {
+    return {
+      username: "",
+      url: this.newUrl,
+      chartsData: [],
+      positiveChartData: { xData: [], yData: [] },
+      negativeChartData: { xData: [], yData: [] },
+      pieChartData: [],
+      frequencyChartData: [],
+    };
+  },
+  mounted() {
+    this.username = localStorage.getItem("username");
+    this.search();
+  },
+  methods: {
+    search(value) {
+      // let url = value == undefined ? this.url: value.url;
+      this.url = value;
+      let params = {
+        username: this.username,
+        url: this.url,
+      };
+      info.display(params).then((res) => {
+        if (res.data.code == 200) {
+          this.chartsData = res.data.data;
+          let positiveChartData = res.data.data.positive;
+          let negativeChartData = res.data.data.negative;
+          let pieChartData = res.data.data.tags;
+          let frequencyChartData = res.data.data.frequency;
+
+          this.positiveChartData["xData"] = Object.keys(positiveChartData);
+          this.positiveChartData.xData.forEach((el) => {
+            this.positiveChartData["yData"].push(
+              Number(positiveChartData[el].toFixed(2))
+            );
+          });
+          this.negativeChartData.xData = Object.keys(negativeChartData);
+          this.negativeChartData.xData.forEach((el) => {
+            this.negativeChartData.yData.push(
+              -Number(negativeChartData[el].toFixed(2))
+            );
+          });
+          let frequencyKeys = Object.keys(frequencyChartData);
+          frequencyKeys.forEach((el) => {
+            this.frequencyChartData.push({
+              name: el,
+              value: frequencyChartData[el],
+            });
+          });
+          let keys = Object.keys(pieChartData);
+          keys.splice(0, 1);
+          keys.forEach((el) => {
+            this.pieChartData.push({ name: el, value: pieChartData[el] });
+          });
+
+          localStorage.setItem("positiveChartData", JSON.stringify(this.positiveChartData));
+          localStorage.setItem("negativeChartData", JSON.stringify(this.negativeChartData));
+          localStorage.setItem("frequencyChartData", JSON.stringify(this.frequencyChartData));
+          localStorage.setItem("pieChartData", JSON.stringify(this.pieChartData));
+
+          localStorage.setItem("url", this.url);
+        } else {
+          this.$message.error("拉取错误！");
+        }
+      });
+      // .catch((err) => {
+      //   // this.$Message.error(err + "!");
+      // });
+    },
+  },
+};
+</script>
+<style scoped>
+::v-deep .el-container {
+  height: 100%;
+}
+.about {
+  height: 100%;
+}
+.el-header,
+.el-footer {
+  background-color: #b3c0d1;
+  color: #333;
+  text-align: center;
+  /* line-height: 80px; */
+}
+
+.el-aside {
+  background-color: #d3dce6;
+  color: #333;
+  text-align: center;
+  /* line-height: 200px; */
+  height: 100%;
+  position: fixed;
+}
+
+.el-header {
+  position: fixed;
+  left: 229px;
+  width: 100%;
+  padding: 0;
+  z-index: 999;
+}
+
+.el-footer {
+  position: fixed;
+  left: 230px;
+  width: 100%;
+  bottom: 0;
+}
+
+.el-main {
+  background-color: #f0f2f5;
+  color: #333;
+  /* text-align: center;
+  line-height: 160px; */
+  padding: 90px 10px 10px 240px;
+  min-height: calc(100% - 100px);
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/about/components/appmain.vue b/static/src/views/about/components/appmain.vue
new file mode 100644
index 0000000..aa42289
--- /dev/null
+++ b/static/src/views/about/components/appmain.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="appmain">
+        <router-view/>
+    </div>
+</template>
+<script>
+export default {
+    // props:{
+    //     url:{
+    //         type:String,
+    //         default:''
+    //     }
+    // },
+    // data(){
+    //     return{
+    //         theUrl:this.url
+    //     }
+    // },
+//     created(){
+//         console.log(this.theUrl ,this.url);
+//         this.theUrl = this.url;
+//     }
+}
+</script>
+<style>
+.appmain{
+    /* margin: 20px; */
+    background-color: #fff;
+    height: 100%;
+    border-radius: 4px
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/about/components/aside.vue b/static/src/views/about/components/aside.vue
new file mode 100644
index 0000000..5a50426
--- /dev/null
+++ b/static/src/views/about/components/aside.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="aside">
+    <el-menu
+      :default-active="$route.path"
+      class="el-menu-vertical"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#202741"
+      text-color="#e6e6e6"
+      active-text-color="#ffd04b"
+      :show-timeout="200"
+      mode="vertical"
+      router
+    >
+      <!-- <span class="aside-title">Fried Egg Managment </span> -->
+      <div class="aside-title">
+        <img class="aside-icon" src="../../../assets/images/pull.png" />
+        <span class="title">爬虫数据可视化系统</span>
+      </div>
+      <template v-for="(item, index) in routes">
+        <el-submenu v-if="item.children" :index="index + ''" :key="index + ''">
+          <template slot="title">
+            <!-- <i class="el-icon-location"></i> -->
+            <span>{{ item.name }}</span>
+          </template>
+          <el-menu-item 
+            v-for="child in item.children"
+            :index="child.path"
+            :key="child.path"
+          >
+            <!-- <i class="el-icon-location"></i> -->
+            <span>{{ child.name }}</span>
+          </el-menu-item>
+        </el-submenu>
+        <el-menu-item v-if="!item.children" :index="item.path" :key="item.path">
+          <i :class="iconList[item.path]"></i>
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+      </template>
+    </el-menu>
+  </div>
+</template>
+<script>
+import asideRoute from "../../../router/asideRoute";
+export default {
+  name: "asideConment",
+  data() {
+    return {
+      routes: [],
+      iconList:{
+        '/positive':'el-icon-document-checked',
+        '/negative':'el-icon-document-remove',
+        '/wordCloud':'el-icon-cloudy',
+        '/netease':'el-icon-connection',
+        '/commentsType':'el-icon-edit-outline'
+      }
+    };
+  },
+  created() {
+    this.routes = JSON.parse(JSON.stringify(asideRoute));
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.aside {
+  height: 100%;
+  width: 100%;
+    overflow: hidden;
+}
+.el-menu-vertical {
+  height: 100%;
+  text-align: left;
+}
+.aside-title {
+  height: 60px;
+  line-height: 60px;
+  width: 100%;
+  font-weight: 600;
+  color: #fff;
+  margin-left: 5px;
+}
+.title{
+  color: #fff;
+  margin-left: 40px;
+  font-size: 20px;
+}
+.aside-icon{
+  position: absolute; 
+  top: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/about/components/breadcrumb.vue b/static/src/views/about/components/breadcrumb.vue
new file mode 100644
index 0000000..eb3cbde
--- /dev/null
+++ b/static/src/views/about/components/breadcrumb.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- <div class="breadcrumb"> -->
+  <div class="header">
+    <el-form :inline="true" :model="formData" class="demo-form-inline">
+      <el-form-item>
+        <el-input
+          v-model="formData.url"
+          placeholder="请输入URL..."
+          style="width: 500px"
+        >
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="onSubmit"
+          ></el-button
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          @click="resetSearch"
+          icon="el-icon-refresh-right"
+        ></el-button>
+      </el-form-item>
+    </el-form>
+    <div class="user-info">
+      <img class="header-icon" src="../../../assets/images/userIcon.png" />
+      <div>
+        <el-dropdown @command="handleCommand" placement="bottom">
+          <span class="el-dropdown-link">
+            {{ username }}admin<i class="el-icon-arrow-down el-icon--right" style="position:absolute;margin-right:20px"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="a">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <!-- {{ username }}admin -->
+        </div>
+    </div>
+  </div>
+  <!-- </div> -->
+</template>
+<script>
+export default {
+  name: "breadcrumb",
+  data() {
+    return {
+      formData: {
+        url: "http://you.163.com/item/detail?id=4028691",
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    onSubmit() {
+      this.$emit("search", this.formData.url);
+      this.$emit("update:url", this.formData.url);
+    },
+    resetSearch() {
+      this.formData.url = "";
+    },
+    handleCommand() {
+      this.$router.push({ path: "/" });
+    }
+  },
+};
+</script>
+<style scoped>
+::v-deep .el-form-item {
+  margin-bottom: 0px;
+}
+::v-deep .el-dropdown{
+  color:#fff
+}
+.header {
+  width: 100%;
+  height: 80px;
+  /* line-height: 80px; */
+  background: #0f1423;
+  background-color: #202741;
+  position: fixed;
+  padding-top: 20px;
+}
+.header-title {
+  margin-left: 50px;
+  float: left;
+}
+.title {
+  color: #fff;
+  margin-left: 40px;
+  font-size: 20px;
+}
+.user-info {
+  color: #fff;
+  position: absolute;
+  left: calc(100% - 350px);
+  z-index:1999;
+  top: 9px;
+}
+.user-info > div:last-child {
+  margin-left: 40px;
+  margin-top: 23px;
+  position: absolute;
+  color: #fff;
+}
+.header-icon {
+  position: absolute;
+  top: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/commentsType/commentsType.vue b/static/src/views/commentsType/commentsType.vue
new file mode 100644
index 0000000..6d18965
--- /dev/null
+++ b/static/src/views/commentsType/commentsType.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="negative">
+    <span>评论类型占比:</span>
+    <div id="pieChart" class="chart-size"></div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "commentsType",
+  data() {
+    return {
+      data: {
+        pieChart: null,
+        pieChartData: [],
+      },
+    };
+  },
+  created() {
+    this.pieChartData = JSON.parse(localStorage.getItem('pieChartData'));
+  },
+  mounted() {
+    this.pieChart = this.$echarts.init(document.getElementById("pieChart"));
+    //窗口大小变化时，实现自适应
+    window.addEventListener("resize", () => {
+      this.pieChart.resize();
+    });
+    this.drawChart()
+  },
+  methods: {
+   drawChart(){
+      let pieOption = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          right: '0%'
+        },
+        series: [
+          {
+            name: '评论类型占比',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '20',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true
+            },
+            data: this.pieChartData
+          }
+        ]
+      };
+      this.pieChart.setOption(pieOption);
+   }
+  },
+};
+</script>
+<style scoped>
+.negative{
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+.negative>span:first-child{
+  margin: 20px 0 0 20px;
+  font-size: 24px;
+  display: block;
+}
+.chart-size{
+  height: 90%;
+  width: 90%;
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/home/Home.vue b/static/src/views/home/Home.vue
index 6cb68f4..5131cd9 100644
--- a/static/src/views/home/Home.vue
+++ b/static/src/views/home/Home.vue
@@ -36,17 +36,17 @@
       <div class="charts">
         <el-card class="box-card">
           <span>Top10积极词汇评分</span>
-          <div id="positiveChart" style="width: 700px; height: 400px"></div>
+          <div id="positiveChart" class="chart-size"></div>
         </el-card>
         <el-card class="box-card">
-          <div id="pieChart" style="width: 700px; height: 400px"></div>
+          <div id="pieChart" class="chart-size"></div>
         </el-card>
         <el-card class="box-card">
           <span>Top10消极词汇评分</span>
-          <div id="negativeChart" style="width: 700px; height: 400px"></div>
+          <div id="negativeChart" class="chart-size"></div>
         </el-card>
         <el-card class="box-card">
-          <div id="frequencyChart" style="width: 700px; height: 400px"></div>
+          <div id="frequencyChart" class="chart-size"></div>
         </el-card>
       </div>
     </div>
@@ -57,9 +57,8 @@ import * as info from "../../api/info";
 export default {
   data() {
     return {
-      activeIndex: 1,
       formData: {
-        url: "",
+        url: "http://you.163.com/item/detail?id=4028691",
       },
       username: "",
       chartsData: [],
@@ -93,6 +92,7 @@ export default {
       _this.frequencyChart.resize();
     });
     this.username = localStorage.getItem("username");
+    this.onSubmit();
   },
   methods: {
     onSubmit() {
@@ -104,7 +104,6 @@ export default {
         .display(params)
         .then((res) => {
           if (res.data.code == 200) {
-            console.log(res);
             this.chartsData = res.data.data;
             let positiveChartData = res.data.data.positive;
             let negativeChartData = res.data.data.negative;
@@ -129,7 +128,6 @@ export default {
               this.pieChartData.push({name:el,value:pieChartData[el]})
             });
             
-            console.log(keys,this.pieChartData)
             this.drawChart();
           } else {
             this.$message.error("拉取错误！");
@@ -249,6 +247,10 @@ export default {
 ::v-deep .el-menu.el-menu--horizontal {
   border: none;
 }
+::v-deep .el-card__body{
+  height: 100%;
+  padding:30px;
+}
 .homePage {
   margin: 0;
   padding: 0;
@@ -315,4 +317,8 @@ export default {
   float: left;
   margin: 10px;
 }
+.chart-size{
+  height: 100%;
+  width: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/static/src/views/login/Login.vue b/static/src/views/login/Login.vue
index 1c7cfca..1637aea 100644
--- a/static/src/views/login/Login.vue
+++ b/static/src/views/login/Login.vue
@@ -189,7 +189,7 @@ export default {
   },
   methods: {
     submitForm(formName) {
-      // this.$router.push({ path: "/home" });
+      // this.$router.push({ path: "/positive" });
       // console.log(formName);
       this.$refs[formName].validate((valid) => {
         let params = {
@@ -201,10 +201,9 @@ export default {
             .login(params)
             .then((res) => {
               if (res.data.code == 200) {
-                console.log(res);
                 this.data = res.data.data;
                 localStorage.setItem('username',this.formData.user)
-                this.$router.push({ path: "/home" });
+                this.$router.push({ path: "/positive" });
               } else {
                 this.$message.error("用户名或密码错误！");
               }
@@ -213,7 +212,6 @@ export default {
               this.$Message.error(err + "!");
             });
         } else {
-          console.log("error submit!!");
           return false;
         }
       });
@@ -236,7 +234,6 @@ export default {
             .regist(params)
             .then((res) => {
               if (res.data.code == 200 && res.data.msg == 'success') {
-                console.log(res);
                 this.data = res.data.data;
                 this.isRegist = false;
                 setTimeout(()=>{
@@ -250,7 +247,6 @@ export default {
               this.$Message.error(err + "!");
             });
         } else {
-          console.log("error submit!!");
           return false;
         }
       });
diff --git a/static/src/views/negative/negative.vue b/static/src/views/negative/negative.vue
new file mode 100644
index 0000000..f82bbe2
--- /dev/null
+++ b/static/src/views/negative/negative.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="negative">
+    <span>Top{{ topSelected }}消极词汇评分:</span>
+    <div id="negativeChart" class="chart-size"></div>
+    <div class="select-top">
+      <el-select v-model="topSelected" placeholder="请选择" @change="onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+<script>
+import * as info from "../../api/info";
+export default {
+  name: "negative",
+  data() {
+    return {
+      data: {
+        negativeChart: null,
+        negativeChartData: [],
+      },
+      options: [
+        {
+          value: 5,
+          label: "Top5",
+        },
+        {
+          value: 10,
+          label: "Top10",
+        },
+        {
+          value: 20,
+          label: "Top20",
+        },
+        {
+          value: 50,
+          label: "Top50",
+        },
+      ],
+      topSelected: "10",
+    };
+  },
+  created() {
+    this.negativeChartData = JSON.parse(
+      localStorage.getItem("negativeChartData")
+    );
+  },
+  mounted() {
+    this.negativeChart = this.$echarts.init(
+      document.getElementById("negativeChart")
+    );
+    //窗口大小变化时，实现自适应
+    window.addEventListener("resize", () => {
+      this.negativeChart.resize();
+    });
+    this.drawChart();
+  },
+  methods: {
+    onChange(val) {
+      let params = {
+        username: localStorage.getItem("username"),
+        url: localStorage.getItem("url"),
+        top: val,
+      };
+      info.display(params).then((res) => {
+        if (res.data.code == 200) {
+          this.negativeChartData["yData"] = [];
+          let negativeChartData = res.data.data.negative;
+          this.negativeChartData.xData = Object.keys(negativeChartData);
+          this.negativeChartData.xData.forEach((el) => {
+            this.negativeChartData.yData.push(
+              -Number(negativeChartData[el].toFixed(2))
+            );
+          });
+          localStorage.setItem(
+            "negativeChartData",
+            JSON.stringify(this.negativeChartData)
+          );
+
+          this.drawChart();
+          this.negativeChart.resize();
+        }
+      });
+    },
+    drawChart() {
+      let negativeOption = {
+        xAxis: {
+          type: "category",
+          data: this.negativeChartData.xData,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: this.negativeChartData.yData,
+            type: "bar",
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(180, 180, 180, 0.2)",
+            },
+          },
+        ],
+      };
+      this.negativeChart.setOption(negativeOption);
+    },
+  },
+};
+</script>
+<style scoped>
+.negative {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  text-align: left;
+  line-height: 100%;
+}
+.negative > span:first-child {
+  margin: 20px 0 0 20px;
+  font-size: 24px;
+  display: block;
+}
+.chart-size {
+  height: 90%;
+  width: 90%;
+  float: left;
+  margin-top: 40px;
+}
+.select-top {
+  width: 10%;
+  position: absolute;
+  line-height: 100%;
+  right: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/netease/netease.vue b/static/src/views/netease/netease.vue
new file mode 100644
index 0000000..b5407e6
--- /dev/null
+++ b/static/src/views/netease/netease.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="netease">
+        <iframe src="http://you.163.com/item/detail?id=4028691" id="mobsf" scrolling="no" frameborder="0" style=""></iframe>
+    </div>
+</template>
+<script>
+export default {
+    name:'netease',
+    data(){
+        return {
+            
+        }
+    },
+    mounted(){
+    /**
+      * iframe-宽高自适应显示   
+      */
+      function changeMobsfIframe(){
+        const mobsf = document.getElementById('mobsf');
+        const deviceWidth = document.body.clientWidth;
+        const deviceHeight = document.body.clientHeight;
+        mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //数字是页面布局宽度差值
+        mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
+      }
+ 
+      changeMobsfIframe()
+ 
+      window.onresize = function(){
+        changeMobsfIframe()
+      }
+
+    }
+}
+</script>
+<style scoped>
+.netease{
+    width: 100%;
+    height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/positive/positive.vue b/static/src/views/positive/positive.vue
new file mode 100644
index 0000000..ef24e90
--- /dev/null
+++ b/static/src/views/positive/positive.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="positive">
+    <span>Top{{ topSelected }}积极词汇评分:</span>
+    <div id="positiveChart" class="chart-size"></div>
+    <div class="select-top">
+      <el-select v-model="topSelected" placeholder="请选择" @change="onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+<script>
+import * as info from "../../api/info";
+export default {
+  name: "positive",
+  data() {
+    return {
+      data: {
+        positiveChart: null,
+        positiveChartData: [],
+      },
+      options: [
+        {
+          value: 5,
+          label: "Top5",
+        },
+        {
+          value: 10,
+          label: "Top10",
+        },
+        {
+          value: 20,
+          label: "Top20",
+        },
+        {
+          value: 50,
+          label: "Top50",
+        },
+      ],
+      topSelected: "10",
+    };
+  },
+  created() {
+    this.positiveChartData = JSON.parse(
+      localStorage.getItem("positiveChartData")
+    );
+  },
+  mounted() {
+    this.positiveChart = this.$echarts.init(
+      document.getElementById("positiveChart")
+    );
+    //窗口大小变化时，实现自适应
+    window.addEventListener("resize", () => {
+      this.positiveChart.resize();
+    });
+    this.drawChart();
+  },
+  methods: {
+    onChange(val) {
+      let params = {
+        username: localStorage.getItem("username"),
+        url: localStorage.getItem("url"),
+        top: val,
+      };
+      info.display(params).then((res) => {
+        if (res.data.code == 200) {
+          this.positiveChartData["yData"] = [];
+          let positiveChartData = res.data.data.positive;
+          this.positiveChartData["xData"] = Object.keys(positiveChartData);
+          this.positiveChartData.xData.forEach((el) => {
+            this.positiveChartData["yData"].push(
+              Number(positiveChartData[el].toFixed(2))
+            );
+          });
+          localStorage.setItem(
+            "positiveChartData",
+            JSON.stringify(this.positiveChartData)
+          );
+
+          this.drawChart();
+          this.positiveChart.resize();
+        }
+      });
+    },
+    drawChart() {
+      let positiveOption = {
+        xAxis: {
+          type: "category",
+          data: this.positiveChartData.xData,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: this.positiveChartData.yData,
+            type: "bar",
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(180, 180, 180, 0.2)",
+            },
+          },
+        ],
+      };
+      this.positiveChart.setOption(positiveOption);
+    },
+  },
+};
+</script>
+<style scoped>
+.positive {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  text-align: left;
+  line-height: 100%;
+}
+.positive > span:first-child {
+  margin: 20px 0 0 20px;
+  font-size: 24px;
+  display: block;
+}
+.chart-size {
+  height: 90%;
+  width: 90%;
+  float: left;
+  margin-top: 40px;
+}
+.select-top {
+  width: 10%;
+  position: absolute;
+  line-height: 100%;
+  right: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/static/src/views/wordCloud/wordCloud.vue b/static/src/views/wordCloud/wordCloud.vue
new file mode 100644
index 0000000..8e2edb2
--- /dev/null
+++ b/static/src/views/wordCloud/wordCloud.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="wordCloud">
+    <div id="frequencyChart" class="chart-size"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "wordCloud",
+  data() {
+    return {
+      data: {
+        frequencyChart: null,
+        frequencyChartData: [],
+      },
+    };
+  },
+  created() {
+    this.frequencyChartData = JSON.parse(
+      localStorage.getItem("frequencyChartData")
+    );
+  },
+  mounted() {
+    this.frequencyChart = this.$echarts.init(
+      document.getElementById("frequencyChart")
+    );
+    //窗口大小变化时，实现自适应
+    window.addEventListener("resize", () => {
+      this.frequencyChart.resize();
+    });
+    this.drawChart();
+  },
+  methods: {
+    drawChart() {
+      // let frequencyOption = {
+      //   series: [{
+      //       type: 'wordCloud',
+      //       sizeRange: [15, 80],
+      //       rotationRange: [0, 0],
+      //       rotationStep: 45,
+      //       gridSize: 8,
+      //       // shape: 'pentagon',
+      //       width: '100%',
+      //       height: '100%',
+      //       textStyle: {
+      //         color: function () {
+      //           return 'rgb(' + [
+      //               Math.round(Math.random() * 160),
+      //               Math.round(Math.random() * 160),
+      //               Math.round(Math.random() * 160)
+      //             ].join(',') + ')';
+      //         }
+      //       },
+      //       data: this.frequencyChartData
+      //   }]
+      // };
+      let frequencyOption = {
+        backgroundColor: "#F7F7F7",
+        tooltip: {
+          show: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              iconStyle: {
+                normal: {
+                  color: "#FFFFFF",
+                },
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "热点分析",
+            type: "wordCloud",
+            //size: ['9%', '99%'],
+            // sizeRange: [6, 66],
+            //textRotation: [0, 45, 90, -45],
+            rotationRange: [-45, 90],
+            sizeRange: [15, 80],
+            // rotationRange: [0, 0],
+            //shape: 'circle',
+            textPadding: 0,
+            autoSize: {
+              enable: true,
+              minSize: 6,
+            },
+            textStyle: {
+              color: function () {
+                return (
+                  "rgb(" +
+                  [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                  ].join(",") +
+                  ")"
+                );
+              },
+              emphasis: {
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+            data: this.frequencyChartData,
+          },
+        ],
+      };
+      this.frequencyChart.setOption(frequencyOption);
+    },
+  },
+};
+</script>
+<style scoped>
+.wordCloud {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+.chart-size {
+  height: 100%;
+  width: 100%;
+}
+</style>
\ No newline at end of file