字体调整

.env

@@ -1,5 +1,5 @@
 NODE_ENV=production
-VUE_APP_PLATFORM_NAME=XXX平台
+VUE_APP_PLATFORM_NAME=流行音乐分析平台
 # 开启单点登录
 VUE_APP_SSO=false
 # 开启微应用模式

package.json

@@ -10,43 +10,48 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@jeecg/antd-online-mini": "3.4.3-beta2",
-    "ant-design-vue": "^1.7.2",
+    "@ant-design/icons": "^2.1.1",
     "@antv/data-set": "^0.11.4",
-    "viser-vue": "^2.4.8",
+    "@jeecg/antd-online-mini": "3.4.3-beta2",
+    "@tinymce/tinymce-vue": "2.1.0",
+    "@toast-ui/editor": "^2.1.2",
+    "ant-design-vue": "^1.7.2",
     "axios": "^0.18.0",
+    "china-area-data": "^5.0.1",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
+    "cron-parser": "^2.10.0",
     "dayjs": "^1.8.0",
+    "dom-align": "1.12.0",
+    "echarts": "^5.5.0",
+    "echarts-wordcloud": "^2.1.0",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "qiankun": "^2.5.1",
+    "tinymce": "5.4.1",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
-    "vue-print-nb-jeecg": "^1.0.12",
-    "clipboard": "^2.0.4",
     "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.12",
+    "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
+    "vue-wordcloud": "^1.1.1",
     "vuedraggable": "^2.20.0",
-    "codemirror": "^5.46.0",
-    "@tinymce/tinymce-vue": "2.1.0",
-    "tinymce": "5.4.1",
-    "@toast-ui/editor": "^2.1.2",
-    "vue-area-linkage": "^5.1.0",
-    "china-area-data": "^5.0.1",
-    "dom-align": "1.12.0",
-    "xe-utils": "2.4.8",
+    "vuex": "^3.1.0",
     "vxe-table": "2.9.13",
     "vxe-table-plugin-antd": "1.8.10",
-    "cron-parser": "^2.10.0",
-    "qiankun": "^2.5.1",
-    "xss": "^1.0.13"
+    "xe-utils": "2.4.8",
+    "xss": "^1.0.13",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",
@@ -55,13 +60,15 @@
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "7.2.3",
+    "compression-webpack-plugin": "^3.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
+    "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
+    "node-scss": "^7.0.3",
+    "scss-loader": "^0.0.1",
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,
@@ -99,7 +106,10 @@
       "vue/html-closing-bracket-newline": 0,
       "vue/no-parsing-error": 0,
       "no-tabs": 0,
-      "indent": ["off", 2],
+      "indent": [
+        "off",
+        2
+      ],
       "no-console": 0,
       "space-before-function-paren": 0
     }

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>XXX平台</title>
+  <title>流行音乐分析平台</title>
   <link rel="icon" href="<%= BASE_URL %>logo.png">
   <script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
   <style>
@@ -15,6 +15,7 @@
       height: 100%;
       margin: 0px;
       padding: 0px;
+      width: 100%;
     }
     .chromeframe {
       margin: 0.2em 0;

src/App.vue

@@ -40,5 +40,6 @@
 <style>
   #app {
     height: 100%;
+    width: 100%;
   }
 </style>

src/components/layouts/TabLayout.vue

@@ -183,7 +183,7 @@
        * @param title 要修改的新标题
        */
       changeTitle(title) {
-        let projectTitle = "XXX平台"
+        let projectTitle = "流行音乐分析平台"
         // 首页特殊处理
         if (this.$route.path === indexKey) {
           document.title = projectTitle

src/components/tools/Logo.vue

@@ -20,7 +20,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: 'XXX平台',
+      default: '流行音乐分析平台',
       required: false
     },
     showTitle: {

src/components/tools/UserMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="user-wrapper" :class="theme">
-    <a-dropdown>
+    <!-- <a-dropdown>
       <span class="action action-full ant-dropdown-link user-dropdown-menu">
         <a-avatar class="avatar" size="small" :src="getAvatar()"/>
       </span>
@@ -10,7 +10,7 @@
            <span>系统设置</span>
         </a-menu-item>
       </a-menu>
-    </a-dropdown>
+    </a-dropdown> -->
     <span class="action">
       <a class="logout_title" href="javascript:;" @click="handleLogout">
         <a-icon type="logout"/>

src/defaultSettings.js

@@ -14,9 +14,9 @@
  */
 
 export default {
-  primaryColor: '#1890FF', // primary color of ant design
+  primaryColor: '#f5222d', // primary color of ant design
   navTheme: 'light', // theme for nav menu
-  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  layout: 'topmenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
   fixedHeader: false, // sticky header
   fixSiderbar: false, // sticky siderbar

src/views/dashboard/Analysis.vue

@@ -1,8 +1,325 @@
 <template>
-  <div>
-    这是首页
+  <div class="index">
+    <div class="upDiv">
+      <div class="outlevel">
+        <div id="ageRatio" class="ageRatio"></div>
+      </div>
+      <div class="outlevel">
+        <div id="genderRatio" class="genderRatio"></div>
+      </div>
+    </div>
+    <div class="downDiv">
+      <div id="styleRatio" class="styleRatio"></div>
+    </div>
   </div>
 </template>
+<style lang="less" scoped>
+.index {
+  display: flex;
+  width: 100%;
+  height: 800px;
+  margin: 0 auto;
+  flex-direction: column;
+  padding: 0px;
+  margin: 0px;
+  align-items: center;
+  /* background-color: yellow; */
+}
 
+.outlevel {
+  display: flex;
+  width: 50%;
+  height: 100%;
+  padding: 0px;
+  margin: 10px;
+  justify-content: center;
+  background-color: red;
+}
+
+.upDiv {
+  display: flex;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  height: 50%;
+  justify-content: center;
+}
+
+.genderRatio {
+  width: 100%;
+
+  height: 100%;
+  padding: 0px;
+  margin: 0px;
+  /* margin: 10px; */
+  background-color: white;
+  /* margin: 10px; */
+}
+
+.ageRatio {
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+
+  /* margin: 10px; */
+
+  height: 100%;
+  background-color: white;
+}
+
+.downDiv {
+  padding: 0px;
+  margin: 0px;
+  display: flex;
+  width: 100%;
+  height: 50%;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.styleRatio {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  margin: 10px;
+}
+</style>
 <script>
-</script>
+import * as echarts from 'echarts'
+
+export default {
+  data() {
+    return {
+      genderData: [
+        { value: 58.5, name: '男' },
+        { value: 41.5, name: '女' },
+      ],
+      ageDataY: [8.8, 19.7, 39.6, 15.9, 11.1, 4.9],
+      ageDataX: ['21岁以下', '21-25岁', '26-30岁', '31-35岁', '35-40岁', '40岁以上'],
+      styleData: [
+        { label: '流行', nowValue: 50.5, fiveYearsAgoValue: 58.2 },
+        { label: '中国风', nowValue: 40.9, fiveYearsAgoValue: 37.3 },
+        { label: '轻音乐', nowValue: 35.5, fiveYearsAgoValue: 33.6 },
+        { label: '民谣', nowValue: 25.0, fiveYearsAgoValue: 27.7 },
+        { label: '原创风', nowValue: 24.5, fiveYearsAgoValue: 22.7 },
+        { label: '古典', nowValue: 22.7, fiveYearsAgoValue: 22.3 },
+        { label: '摇滚', nowValue: 18.6, fiveYearsAgoValue: 15.9 },
+        { label: '说唱', nowValue: 16.8, fiveYearsAgoValue: 11.8 },
+        { label: 'Funk', nowValue: 3.6, fiveYearsAgoValue: 5.5 },
+        { label: '其他', nowValue: 2.3, fiveYearsAgoValue: 1.8 },
+      ],
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getDrawGenderChartData()
+      this.getDrawAgeChartData()
+      this.getDrawStyleChartData()
+    }, 200)
+  },
+
+  methods: {
+    // 获得性别比例数据
+    getDrawGenderChartData() {
+      console.log('drawGenderChart')
+      let drawData = this.genderData
+      console.log('drawData', drawData)
+      this.drawGenderChart(drawData)
+    },
+    // 绘制性别比例图
+    drawGenderChart(drawData) {
+      console.log('drawGenderCharting')
+      let genderChart = echarts.getInstanceByDom(document.getElementById('genderRatio'))
+      if (genderChart != null && genderChart != undefined) {
+        genderChart.dispose()
+      }
+      genderChart = echarts.init(document.getElementById('genderRatio'))
+      let option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        title: {
+          text: '流行音乐用户性别比例',
+          left: 'center',
+        },
+        legend: {
+          top: '5%',
+          left: 'center',
+        },
+
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                // show: true,
+                fontSize: 40,
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: drawData,
+          },
+        ],
+      }
+      genderChart.setOption(option)
+    },
+    getDrawAgeChartData() {
+      let XData = this.ageDataX
+      let YData = this.ageDataY
+      this.drawAgeChart(XData, YData)
+    },
+    drawAgeChart(XData, YData) {
+      let ageChart = echarts.getInstanceByDom(document.getElementById('ageRatio'))
+      if (ageChart != null && ageChart != undefined) {
+        ageChart.dispose()
+      }
+      ageChart = echarts.init(document.getElementById('ageRatio'))
+      let option = {
+        title: {
+          text: '流行音乐用户年龄比例',
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar'] },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        calculable: true,
+
+        xAxis: [
+          {
+            type: 'category',
+            data: XData,
+            // axisTick: {
+            //   alignWithLabel: true
+            // },
+            //x轴字体大小
+            axisLabel: {
+              interval: 0,
+             
+              textStyle: {
+                fontSize: 16,
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                fontSize: 16,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: XData,
+            type: 'bar',
+            // barWidth: '30%',
+            data: YData,
+          },
+        ],
+      }
+      ageChart.setOption(option)
+      ageChart.resize()
+    },
+    getDrawStyleChartData() {
+      let labelData = this.styleData.map((item) => item.label)
+      let nowValueData = this.styleData.map((item) => item.nowValue)
+      let fiveYearsAgoValueData = this.styleData.map((item) => item.fiveYearsAgoValue)
+      this.drawStyleChart(labelData, nowValueData, fiveYearsAgoValueData)
+    },
+    drawStyleChart(labelData, nowValueData, fiveYearsAgoValueData) {
+      let styleChart = echarts.getInstanceByDom(document.getElementById('styleRatio'))
+      if (styleChart != null && styleChart != undefined) {
+        styleChart.dispose()
+      }
+      styleChart = echarts.init(document.getElementById('styleRatio'))
+      let option = {
+        title: {
+          text: '流行音乐用户听歌风格偏好变化',
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        legend: {
+          data: ['五年前', '现在'],
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar'] },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            // prettier-ignore
+            data: labelData,
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                fontSize: 16,
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                fontSize: 16,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '五年前',
+            type: 'bar',
+            data: fiveYearsAgoValueData,
+          },
+          {
+            name: '现在',
+            type: 'bar',
+            data: nowValueData,
+          },
+        ],
+      }
+
+      styleChart.setOption(option)
+      styleChart.resize()
+    },
+  },
+}
+</script>

src/views/dashboard/RankingList.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="outside">
+    <!-- <a-spin :spinning="spinning" tip="Loading..." class="spin" size="large">
+        </a-spin> -->
+    <div class="button">
+      <a-button class="getDataButton" danger shape="round" :loading="spinning" @click="getDrawData()">
+        <a-icon type="reload" v-show="!spinning" />
+      </a-button>
+    </div>
+    <div class="ranking" id="ranking"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import { getAction, postAction } from '@/api/manage'
+
+export default {
+  name: 'RankingList',
+  data() {
+    return {
+      description: '排行榜页面',
+      songList: [],
+      spinning: false,
+      commentList: [],
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getDrawData()
+    }, 100)
+  },
+  methods: {
+    initRanking(commentList, songList) {
+      console.log('initRanking')
+      let rankingChart = echarts.getInstanceByDom(document.getElementById('ranking'))
+      if (rankingChart != null && rankingChart != undefined) {
+        rankingChart.dispose()
+      }
+      rankingChart = echarts.init(document.getElementById('ranking'))
+      let option = {
+        title: {
+          text: '网易云音乐歌曲评论排行榜',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: songList,
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'inside',
+              },
+            },
+            type: 'bar',
+            data: commentList,
+          },
+        ],
+      }
+      rankingChart.setOption(option)
+    },
+    getDrawData() {
+      this.spinning = true
+
+      this.commentList = []
+      this.songList = []
+      console.log('getDrawData')
+      const that = this
+      getAction('/cool/music/getRanking', {}).then((res) => {
+        console.log(res)
+        that.songList = res.result.map((item) => item.songName)
+        that.commentList = res.result.map((item) => item.comment)
+        that.spinning = false
+        that.$nextTick(() => {
+          that.initRanking(that.commentList, that.songList)
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.outside {
+  display: flex;
+  width: 100%;
+  height: 800px;
+  flex-direction: column;
+  // align-items: center;
+
+  padding: 0px;
+  margin: 0px;
+  //左右排放
+  // justify-content: space-between;
+
+  background-color: white;
+
+  .button {
+    padding-top: 20px;
+    padding-left: 20px;
+    //居左
+    justify-content: flex-start;
+
+    .getDataButton {
+      //字体
+      font-size: 20px;
+      //背景颜色
+      // background-color: #de6466;
+      //字体颜色
+      color: #de6466;
+      //边框
+      border: none;
+      //点击动画
+      transition: all 0s;
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
+  .ranking {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    background-color: white;
+  }
+}
+
+.spin-content {
+  border: 1px solid #91d5ff;
+  background-color: #e6f7ff;
+  padding: 30px;
+}
+</style>

src/views/dashboard/UserFromMap.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="outside">
+    <div class="map" id="map"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  data() {
+    return {
+      mapData: [
+        {
+          name: '辽宁',
+          value: 3.94,
+        },
+        {
+          name: '湖北',
+          value: 4.03,
+        },
+        {
+          name: '河北',
+          value: 4.52,
+        },
+        {
+          name: '四川',
+          value: 4.86,
+        },
+        {
+          name: '浙江',
+          value: 4.91,
+        },
+
+        {
+          name: '新疆',
+          value: 4.94,
+        },
+        {
+          name: '河南',
+          value: 5.02,
+        },
+
+        {
+          name: '江苏',
+          value: 6.5,
+        },
+        {
+          name: '山东',
+          value: 6.91,
+        },
+        {
+          name: '广东',
+          value: 9.92,
+        },
+      ],
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.initMap()
+    }, 100)
+  },
+  methods: {
+    initMap() {
+      let XData = []
+      let YData = []
+      this.mapData.forEach((item) => {
+        XData.push(item.value)
+        YData.push(item.name)
+      })
+      console.log('XData', XData)
+      console.log('YData', YData)
+
+      this.drawMap(XData, YData)
+    },
+    drawMap(XData, YData) {
+      console.log('initMap')
+      let mapChart = echarts.getInstanceByDom(document.getElementById('map'))
+      if (mapChart != null && mapChart != undefined) {
+        mapChart.dispose()
+      }
+      mapChart = echarts.init(document.getElementById('map'))
+      let option = {
+        title: {
+          text: '网易云主要用户地区分布',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: YData,
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+        },
+        series: [
+          {
+            name: YData,
+            type: 'bar',
+            data: XData,
+            //颜色
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  var colorList = [
+                    '#C1232B',
+                    '#B5C334',
+                    '#FCCE10',
+                    '#E87C25',
+                    '#27727B',
+                    '#FE8463',
+                    '#9BCA63',
+                    '#FAD860',
+                    '#F3A43B',
+                    '#60C0DD',
+                    '#D7504B',
+                    '#C6E579',
+                    '#F4E001',
+                    '#F0805A',
+                    '#26C0C0',
+                  ]
+                  return colorList[params.dataIndex]
+                },
+              },
+            },
+          },
+        ],
+      }
+      console.log('option', option)
+      mapChart.setOption(option)
+    },
+  },
+}
+</script>
+<style scoped lang="less">
+.outside {
+  width: 100%;
+  display: flex;
+  height: 800px;
+  padding: 0;
+  margin: 0;
+  background-color: white;
+
+  .map {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    padding: 20px;
+  }
+}
+</style>

src/views/dashboard/UserVip.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="outside">
+    <div class="vipMap" id="vipMap"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  data() {
+    return {
+      xAxisData: [
+        1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002,
+        2003, 2004, 2005, 2006,
+      ],
+      dataYes: [
+        223, 276, 354, 559, 714, 1764, 1356, 1875, 2131, 2739, 3391, 3716, 4101, 4413, 4131, 3884, 2476, 2011, 864, 617,
+        194, 57,
+      ],
+      dataNo: [
+        1000, 1312, 1632, 2136, 3217, 7648, 5632, 8734, 9841, 13418, 16259, 17810, 19905, 21397, 19876, 20159, 13398,
+        10131, 6491, 3495, 1748, 971,
+      ],
+    }
+  },
+  methods: {
+    initMap(dataYes, dataNo, xAxisData) {
+      let mapCharts = echarts.init(document.getElementById('vipMap'))
+      if (mapCharts != null && mapCharts != undefined) {
+        mapCharts.dispose()
+      }
+      mapCharts = echarts.init(document.getElementById('vipMap'))
+      let option = {
+        legend: {
+          data: ['黑胶会员', '非会员'],
+          left: '10%',
+        },
+
+        toolbox: {
+          feature: {
+            magicType: {
+              type: ['stack'],
+            },
+            dataView: {},
+          },
+        },
+        tooltip: {},
+        xAxis: {
+          data: xAxisData,
+          name: 'XAxis',
+          axisLine: { onZero: true },
+          splitLine: { show: false },
+          splitArea: { show: false },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+        },
+        yAxis: {
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+        },
+        grid: {
+          bottom: 100,
+        },
+        series: [
+          {
+            name: '黑胶会员',
+            type: 'bar',
+            stack: 'one',
+
+            data: dataYes,
+          },
+          {
+            name: '非会员',
+            type: 'bar',
+            stack: 'one',
+
+            data: dataNo,
+          },
+        ],
+      }
+
+      mapCharts.setOption(option)
+    },
+    drawMap() {
+      this.initMap(this.dataYes, this.dataNo, this.xAxisData)
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.drawMap()
+    }, 100)
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.outside {
+  width: 100%;
+  display: flex;
+  height: 600px;
+  padding: 0;
+  margin: 0;
+
+  .vipMap {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    padding: 20px;
+  }
+}
+</style>

src/views/dashboard/Visual.vue

@@ -0,0 +1,38 @@
+<template>
+
+  <div class="outside">
+    
+    <div class="map"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      map: null
+    }
+  },
+  mounted() {
+
+  },
+
+  
+}
+
+</script>
+
+
+<style lang="less" scoped>
+.outside {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .map{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/dashboard/WordCloud.vue

@@ -0,0 +1,419 @@
+<template>
+    <div class="outside">
+        <h1 class="title">网易云评论词云分析图</h1>
+        <a-row :gutter="24">
+            <a-col :xl="12" :style="{ marginBottom: '24px' }">
+                <div class="container">
+                    <div id="relativeCloud" style="width: 600px; height: 500px"></div>
+                </div>
+            </a-col>
+            <a-col :xl="12" :style="{ marginBottom: '24px' }">
+                <div class="container">
+                    <div id="moodCloud" style="width: 600px; height: 500px"></div>
+
+                </div>
+
+            </a-col>
+        </a-row>
+        <a-row :gutter="24">
+            <a-col :xl="12" :style="{ marginBottom: '24px' }">
+                <div class="container">
+                    <div id="chooseCloud" style="width: 600px; height: 500px"></div>
+                </div>
+            </a-col>
+            <a-col :xl="12" :style="{ marginBottom: '24px' }">
+                <div class="container">
+                    <div id="emotionCloud" style="width: 600px; height: 500px"></div>
+                </div>
+            </a-col>
+
+        </a-row>
+
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import 'echarts-wordcloud';
+export default {
+    data() {
+        return {
+            relativeWordList: [
+                {
+                    name: "妈妈",
+                    value: 3929
+                },
+                {
+                    name: "女朋友",
+                    value: 3141
+                },
+                {
+                    name: "哥哥",
+                    value: 2763
+                },
+                {
+                    name: "爸爸",
+                    value: 2561
+                },
+                {
+                    name: "男朋友",
+                    value: 2110
+                },
+                {
+                    name: "姐姐",
+                    value: 1516
+                },
+                {
+                    name: "奶奶",
+                    value: 1268
+                },
+                {
+                    name: "爷爷",
+                    value: 1258
+                },
+                {
+                    name: "老婆",
+                    value: 1168
+                },
+                {
+                    name: "妹妹",
+                    value: 1118
+                },
+
+            ],
+            moodWordList: [
+                {
+                    name: "开心",
+                    value: 6270
+                },
+                {
+                    name: "快乐",
+                    value: 3904
+                },
+                {
+                    name: "难过",
+                    value: 2992
+                },
+                {
+                    name: "哀伤",
+                    value: 2740
+                },
+                {
+                    name: "痛苦",
+                    value: 2252
+                },
+                {
+                    name: "伤心",
+                    value: 962
+                },
+                {
+                    name: "心酸",
+                    value: 841
+                },
+                {
+                    name: "发怒",
+                    value: 696
+                },
+                {
+                    name: "欢喜",
+                    value: 666
+                },
+                {
+                    name: "答应",
+                    value: 640
+                },
+
+            ],
+            chooseWordList: [
+                {
+                    name: "高考",
+                    value: 3864
+                },
+                {
+                    name: "考研",
+                    value: 1053
+                },
+                {
+                    name: "中考",
+                    value: 638
+                },
+                {
+                    name: "出国",
+                    value: 200
+                },
+                {
+                    name: "小升初",
+                    value: 29
+                },
+                {
+                    name: "考博",
+                    value: 4
+                },
+                {
+                    name: "考公",
+                    value: 2
+                },
+
+
+            ],
+            emotionWordList: [
+                {
+                    name: "结婚",
+                    value: 3155
+                },
+                {
+                    name: "分手",
+                    value: 2563
+                },
+                {
+                    name: "恋爱",
+                    value: 2181
+                },
+                {
+                    name: "单身",
+                    value: 1548
+                },
+                {
+                    name: "离婚",
+                    value: 441
+                },
+            ]
+
+        }
+    },
+    methods: {
+        initRelativeMap() {
+            console.log("relativeMap")
+            let wordCharts = echarts.getInstanceByDom(document.getElementById('relativeCloud'));
+            if (wordCharts != null && wordCharts != undefined) {
+                wordCharts.dispose();
+            }
+            wordCharts = echarts.init(document.getElementById('relativeCloud'));
+            let option = {
+                title: {
+                    text: '关键词:亲属',
+                    //居中
+                    left: 'center'
+                },
+                series: [{
+                    type: 'wordCloud',
+                    shape: 'pentagon',
+                    left: 'center',
+                    top: 'center',
+                    width: '100%',
+                    height: '100%',
+                    right: null,
+                    bottom: null,
+                    sizeRange: [12, 60],
+                    rotationRange: [-90, 90],
+                    rotationStep: 45,
+                    gridSize: 8,
+                    drawOutOfBound: false,
+                    textStyle: {
+                        normal: {
+                            fontFamily: 'sans-serif',
+                            fontWeight: 'bold',
+                            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.relativeWordList
+                }]
+            }
+
+
+            wordCharts.setOption(option);
+
+        },
+        initMoodMap() {
+            let moodCharts = echarts.getInstanceByDom(document.getElementById('moodCloud'));
+            if (moodCharts != null && moodCharts != undefined) {
+                moodCharts.dispose();
+            }
+            moodCharts = echarts.init(document.getElementById('moodCloud'));
+            let option = {
+                title: {
+                    text: '关键词:心情',
+                    //居中
+                    left: 'center'
+                },
+                series: [{
+                    type: 'wordCloud',
+                    shape: 'pentagon',
+                    left: 'center',
+                    top: 'center',
+                    width: '100%',
+                    height: '100%',
+                    right: null,
+                    bottom: null,
+                    sizeRange: [12, 60],
+                    rotationRange: [-90, 90],
+                    rotationStep: 45,
+                    gridSize: 8,
+                    drawOutOfBound: false,
+                    textStyle: {
+                        normal: {
+                            fontFamily: 'sans-serif',
+                            fontWeight: 'bold',
+                            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.moodWordList
+                }]
+            }
+            moodCharts.setOption(option);
+        },
+        initChooseMap() {
+            let chooseCharts = echarts.getInstanceByDom(document.getElementById('chooseCloud'));
+            if (chooseCharts != null && chooseCharts != undefined) {
+                chooseCharts.dispose();
+            }
+            chooseCharts = echarts.init(document.getElementById('chooseCloud'));
+            let option = {
+                title: {
+                    text: '关键词:选择',
+                    //居中
+                    left: 'center'
+                },
+                series: [{
+                    type: 'wordCloud',
+                    shape: 'pentagon',
+                    left: 'center',
+                    top: 'center',
+                    width: '100%',
+                    height: '100%',
+                    right: null,
+                    bottom: null,
+                    sizeRange: [12, 60],
+                    rotationRange: [-90, 90],
+                    rotationStep: 45,
+                    gridSize: 8,
+                    drawOutOfBound: false,
+                    textStyle: {
+                        normal: {
+                            fontFamily: 'sans-serif',
+                            fontWeight: 'bold',
+                            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.chooseWordList
+                }]
+            }
+            chooseCharts.setOption(option);
+        },
+        initEmotionMap() {
+            let emotionCharts = echarts.getInstanceByDom(document.getElementById('emotionCloud'));
+            if (emotionCharts != null && emotionCharts != undefined) {
+                emotionCharts.dispose();
+            }
+            emotionCharts = echarts.init(document.getElementById('emotionCloud'));
+            let option = {
+                title: {
+                    text: '关键词:情感',
+                    //居中
+                    left: 'center'
+                },
+                series: [{
+                    type: 'wordCloud',
+                    shape: 'pentagon',
+                    left: 'center',
+                    top: 'center',
+                    width: '100%',
+                    height: '100%',
+                    right: null,
+                    bottom: null,
+                    sizeRange: [12, 60],
+                    rotationRange: [-90, 90],
+                    rotationStep: 45,
+                    gridSize: 8,
+                    drawOutOfBound: false,
+                    textStyle: {
+                        normal: {
+                            fontFamily: 'sans-serif',
+                            fontWeight: 'bold',
+                            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.emotionWordList
+                }]
+            }
+            emotionCharts.setOption(option);
+        }
+    },
+    mounted() {
+
+        setTimeout(() => {
+            this.initRelativeMap()
+            this.initMoodMap()
+            this.initChooseMap()
+            this.initEmotionMap()
+        }, 100);
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.outside {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: white;
+
+    .container {
+        width: 100%;
+        height: 100%;
+        padding: 20px;
+        background-color: white;
+    }
+
+    .title {
+        padding: 20px;
+        //加粗
+        font-weight: bold;
+        //字体大小
+        font-size: 20px;
+        //左右居中
+        text-align: center;
+    }
+}
+</style>

src/views/system/DictItemList.vue

@@ -1,80 +1,5 @@
 <template>
-  <a-card :bordered="false">
-    <!-- 抽屉 -->
-    <a-drawer
-      title="字典列表"
-      :width="screenWidth"
-      @close="onClose"
-      :visible="visible"
-    >
-      <!-- 抽屉内容的border -->
-      <div
-        :style="{
-          padding:'10px',
-          border: '1px solid #e9e9e9',
-          background: '#fff',
-        }">
 
-        <div class="table-page-search-wrapper">
-          <a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
-            <a-row :gutter="10">
-              <a-col :md="8" :sm="12">
-                <a-form-item label="名称">
-                  <a-input style="width: 120px;" placeholder="请输入名称" v-model="queryParam.itemText"></a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :md="9" :sm="24">
-                <a-form-item label="状态" style="width: 170px" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                  <a-select
-                    placeholder="请选择"
-                    v-model="queryParam.status"
-                  >
-                    <a-select-option value="1">正常</a-select-option>
-                    <a-select-option value="0">禁用</a-select-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-              <a-col :md="7" :sm="24">
-              <span style="float: left;" class="table-page-search-submitButtons">
-                <a-button type="primary" @click="searchQuery">搜索</a-button>
-                <a-button type="primary" @click="searchReset" style="margin-left: 8px">重置</a-button>
-              </span>
-              </a-col>
-            </a-row>
-            <a-row>
-              <a-col :md="2" :sm="24">
-                <a-button style="margin-bottom: 10px" type="primary" @click="handleAdd">新增</a-button>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <div>
-          <a-table
-            ref="table"
-            rowKey="id"
-            size="middle"
-            :columns="columns"
-            :dataSource="dataSource"
-            :pagination="ipagination"
-            :loading="loading"
-            @change="handleTableChange"
-            :rowClassName="getRowClassname"
-          >
-
-          <span slot="action" slot-scope="text, record">
-            <a @click="handleEdit(record)">编辑</a>
-            <a-divider type="vertical"/>
-            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
-              <a>删除</a>
-            </a-popconfirm>
-          </span>
-
-          </a-table>
-        </div>
-      </div>
-    </a-drawer>
-    <dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
-  </a-card>
 </template>
 
 <script>

src/views/user/Login.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="main">
     <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
+
+      <span class="title">
+        流行音乐分析平台
+      </span>
       <!-- 登录修改 -->
       <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
 
@@ -148,6 +152,17 @@ export default {
   }
 </script>
 <style lang="less" scoped>
+  .title{
+    //左右居中
+    text-align: center;
+    font-size: 24px;
+    margin-bottom: 24px;
+    display: block;
+    //不可选中
+    user-select: none;
+    
+
+  }
   .user-layout-login {
     background-color: aliceblue;
     padding: 40px;

src/views/user/LoginAccount.vue

@@ -2,12 +2,12 @@
     <div>
       <a-form-model ref="form" :model="model" :rules="validatorRules">
         <a-form-model-item required prop="username">
-          <a-input v-model="model.username" size="large" placeholder="请输入帐户名 / admin">
+          <a-input v-model="model.username" size="large" placeholder="请输入帐户名">
             <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
           </a-input>
         </a-form-model-item>
         <a-form-model-item required prop="password">
-          <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码 / 123456">
+          <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
             <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
           </a-input>
         </a-form-model-item>
@@ -29,8 +29,8 @@
         currdatetime: '',
         loginType: 0,
         model:{
-          username: 'admin',
-          password: '123456',
+          username: '',
+          password: '',
         },
         validatorRules:{
           username: [