【山东大学创新实训】VCRS-前端设计与开发（6）

在前面已经完成了左侧侧边栏和右边对话组件的实现，接下来要对界面的中间部分进行设计和实现。首先是首页的实现，首页主要展示一些计算机网络的总体的可视化数据，例如知识库概念实体数量、知识库概念关系数量、知识库最后更新时间。计算机网络各层的知识占比、章节之间实体的关系的可视化、章内实体关系样例。

知识库数据统计

首先对知识库内的概念实体和概念关系进行统计，并展示知识库最后更新时间。

<div class="row">
      <div class="col-lg-4" :class="{ 'text-right': isRTL }">
        <card type="chart" cardCol>
          <template slot="header">
            <h5 class="card-category">知识库概念实体数量</h5>
            <h3 class="card-title">
              <i class="tim-icons icon-bell-55 text-primary"></i> 7308
            </h3>
          </template>
        </card>
      </div>
      <div class="col-lg-4">
        <card type="chart" cardCol>
          <template slot="header">
            <h5 class="card-category">知识库概念关系数量</h5>
            <h3 class="card-title">
              <i class="tim-icons icon-send text-success"></i> 509130
            </h3>
          </template>
        </card>
      </div>
      <div class="col-lg-4">
        <card type="chart" cardCol>
          <template slot="header">
            <h5 class="card-category">知识库最后更新</h5>
            <h3 class="card-title">
              <i class="tim-icons icon-delivery-fast text-success"></i> 2024.5.28
            </h3>
          </template>
        </card>
      </div>
    </div>

效果如下：

 计算机网络各层知识占比

本项目选用echarts来完成对数据的可视化图表的展示。

对于计算机网络各层知识占比

查看Echarts的示例代码，可以看到数据以下形式存放

data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],

在vue中导入echarts组件

import * as echarts from "echarts";

在HTML中为图表预留位置，id为"main"。

<div id="main" style="width: 100%; height: 400px"></div>

在methods中创建SetOption方法，使用document.getElementById获取位置信息，使用echarts来初始化图标，将数据放入配置项放入option将echarts生成。

setOption() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '目录',
          subtext: 'OSI',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [{"value": 2730, "name": "物理层"}, {"value": 1341, "name": "数据链路层"}, {"value": 1254, "name": "介质访问控制"}, {"value": 1848, "name": "网络层"}, {"value": 766, "name": "传输层"}, {"value": 256, "name": "应用层"}, {"value": 1, "name": "其他"}],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }

最后再在mounted中调用函数，即可使用echarts对数据进行可视化

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

展示效果 

章节关系

 使用方式与上述饼状图方法类似，不同的是存有章节关系的json文件要通过$.get获取，通过回调函数拿到json文件中的实体关系内容，为每一个node加上索引idx后组成新的node列表，同时获取json文件中的category和links，加入到echarts的配置项中，生成出关系图。

mainReSetOption(){
      var chartDom = document.getElementById("main-re");
      var myChart = echarts.init(chartDom);
      var option;
      myChart.showLoading();
      myChart.showLoading();
      $.get('/kg_by_category.json', function (webkitDep) {
        myChart.hideLoading();
        option = {
          legend: {
            data: ['物理层', '数据链路层', '介质访问控制', '网络层', '传输层', '应用层', '其他'],
            top: 10
          },
          series: [
            {
              type: 'graph',
              layout: 'force',
              animation: false,
              label: {
                position: 'right',
                formatter: '{b}'
              },
              draggable: false,
              data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
              }),
              categories: webkitDep.categories,
              force: {
                edgeLength: 5,
                repulsion: 20,
                gravity: 0.2
              },
              edges: webkitDep.links,
              symbolSize: 7,
              zoom: 0.5
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              start: 0,
              end: 100
            }
          ]
        };
        myChart.setOption(option);
      });
    },

效果展示

章内实体关系

 

使用方法与上述两个图表相似，这里不做过多阐述

setCircleOptions(){
      var chartDom = document.getElementById('main-circle');
      var myChart = echarts.init(chartDom);
      var option;

      myChart.showLoading();
      $.getJSON('re_circle.json', function (graph) {
        myChart.hideLoading();
        graph.nodes.forEach(function (node) {
          node.label = {
            show: node.symbolSize > 30
          };
        });
        option = {
          title: {
            text: '环状关系网',
            subtext: 'Circular layout',
            top: 'bottom',
            left: 'right'
          },
          tooltip: {},
          legend: [
            {
              data: graph.categories.map(function (a) {
                return a.name;
              })
            }
          ],
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: 'Les Miserables',
              type: 'graph',
              layout: 'circular',
              circular: {
                rotateLabel: true
              },
              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,
              roam: true,
              label: {
                position: 'right',
                formatter: '{b}'
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    },

效果展示

 

通过这三个可视化的图表，可以直观地看到计算机网络知识在不同层次（如物理层、数据链路层、网络层、传输层、应用层等）的分布情况。理解整个计算机网络课程或书籍的逻辑结构和章节的组织方式。明确学习的路径和顺序。并深入理解每个章节的内部结构和知识点的逻辑关系。通过了解知识点之间的关系，掌握知识的连贯性和整体性。