AI_Student_Client/src/views/home.vue

<template>
  <div class="home">
    <el-container style="height: 100%;">
      <el-aside width="300px" style="background-color: rgb(238, 241, 246);height: 100%;">
        <el-menu :default-openeds="['1', '3']"  @select="handleSelect">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>专业课列表</template>
             <el-menu-item index="1" >数据结构与算法</el-menu-item>
              <el-menu-item index="2">数据库原理与应用</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>  
        <el-main>
          <div id="knowmap"></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { mapGetters } from 'vuex'

import { getData} from '../mock/knowmap' 
 

export default {
  components: {

  },
  data() {
    return { 
      echarts: null,
      option: {
        title: {
          text: '数据结构与算法知识图谱',
          subtext: 'Default layout',
          top: 'bottom',
          left: 'right'
        },
        tooltip: {},
        legend: [
          
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: '知识点',
            type: 'graph',
            legendHoverLink: false,
            layout: 'force',
            data: [],
            links: [],
            categories: [],
            roam: true,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}'
            },
            edgeSymbol: ['circle', 'arrow'],
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            }
          }
        ]
      }
    }
  },

  mounted() {
    this.initECharts();
  },

  methods: {
    initECharts() {
      //
      this.echarts = this.$echarts.init(document.getElementById("knowmap"))

      this.echarts.setOption(this.option)
    },
 
    handleSelect(obj) {
      //科目的知识图谱数据
      const knows = getData(obj)
       this.option.series[0].data = knows.nodes
       this.option.series[0].links = knows.links
       this.option.series[0].categories = knows.categories
       this.echarts.setOption(this.option)
    }
  },
}

</script>

<style lang='scss' scoped>
#knowmap { 
  height: 100%;
}

h2 {
  font-size: 36px;
  text-align: center;
  margin: 40px 0;
  font-weight: normal;
}

h3 {
  font-size: 18px;
  text-align: center;
  color: #737373;
  margin: 40px 0;
  font-weight: normal;
}

.el-divider__text,
.el-link {
  font-weight: 500;
  font-size: 45px;
}

.demoList ul {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 100px;
}

.demoList {
  margin: 0 auto;
  padding-top: 30px;
}

.course_detail {
  padding-top: 6px;
  max-height: 48px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  color: #93999f
}

.demoList li {
  box-sizing: border-box;
  width: 192px;
  min-height: 160px;
  float: left;
  margin-right: 40px;
  margin-bottom: 30px;
  text-align: left;

  img {
    cursor: pointer;
    width: 100%;
    height: 108px;
    display: block;
    border-radius: 8px;

    &:hover {
      opacity: 0.7;
      /* .course_title{
          color:#ca0000;
        }*/
    }
  }
}

.typeitem {
  cursor: pointer;
  width: 300px;

  .title {
    padding-top: 8px;
    font-weight: bold;

    &:hover {
      cursor: pointer;
      color: red;
    }
  }
}

.demoList li {
  width: 30%;
}

.demoList .page {
  position: relative;
  left: 0;
  bottom: 50px;
  width: 100%;
  text-align: center;
}

.demoList li .image {
  height: 199px;
  width: 100%;
  display: block;
}

@keyframes turn-over {
  to {
    transform: rotateX(-180deg);
  }
}

.home {
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>