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

这周继续做剩余数据的可视化展示

可视化目录树

工具使用

Echarts 矩形树图

先对Echarts给出的json实例进行观察，数据的结构为以下结构

{
  "name": "echarts",
  "size": 3835461,
  "children": [
    {
      "name": "action",
      "size": 2307,
      "children": [
        {
          "name": "action/roamHelper.ts",
          "size": 2307,
          "value": 2307
        }
      ],
      "value": 2307
    },
    {
      "name": "animation",
      "size": 44515,
      "children": [
        {
          "name": "animation/basicTrasition.ts",
          "size": 11322,
          "value": 11322
        },
        {
          "name": "animation/morphTransitionHelper.ts",
          "size": 8706,
          "value": 8706
        },
        {
          "name": "animation/universalTransition.ts",
          "size": 24487,
          "value": 24487
        }
      ],
      "value": 44515
    },
  ]
}

每一矩形块有name,size,children,value四个参数，其中children里可以嵌套的加入矩形块，来达到展示表示包含，分类等关系的目录树的目的。

实现与展示

在队友完成对关系的提取，数据的生成与保存后，即可实现对计算机网络相关知识点的矩形目录树的可视化展示。

loadTreeData(item) {
      const self = this;
      self.currentItem = item['title']
      if (self.intervalId != null) {
        clearInterval(self.intervalId);
        self.intervalId = null;
      }
      echarts.dispose(document.getElementById('vis-tree'))
      var chartDom = document.getElementById('vis-tree');
      var myChart = echarts.init(chartDom);
      var option;
      $.getJSON(
        'tree_data/' + item['id'] + '.json',
        function (data) {
          const treemapOption = {
            series: [
              {
                type: 'treemap',
                id: 'echarts-package-size',
                animationDurationUpdate: 1000,
                roam: false,
                nodeClick: undefined,
                data: data.children,
                universalTransition: true,
                label: {
                  show: true
                },
                breadcrumb: {
                  show: false
                }
              }
            ]
          };
          const sunburstOption = {
            series: [
              {
                type: 'sunburst',
                id: 'echarts-package-size',
                radius: ['20%', '90%'],
                animationDurationUpdate: 1000,
                nodeClick: undefined,
                data: data.children,
                universalTransition: true,
                itemStyle: {
                  borderWidth: 1,
                  borderColor: 'rgba(255,255,255,.5)'
                },
                label: {
                  show: false
                }
              }
            ]
          };
          let currentOption = treemapOption;
          myChart.setOption(currentOption);
          self.intervalId = setInterval(function () {
            currentOption =
              currentOption === treemapOption ? sunburstOption : treemapOption;
            myChart.setOption(currentOption);
          }, 3000);
        }
      );
    },

效果展示

​

​

大数据词云的实现

工具使用

• python jieba模块

Python的jieba库是一个中文分词工具，它可以将一段中文文本分割成一个一个的词语，帮助进行文本分类、情感分析等工作。jieba库使用了基于前缀词典的分词方法，能够处理中文的各种复杂情况，如歧义词、新词等。它还提供了多种分词模式，如精确模式、全模式、搜索引擎模式等，以适应不同场景的需求。

• python wordcloud模块

wordcloud则是一个非常优秀的词云展示python库，它支持自定义词云图的大小、颜色、字体等，甚至可以通过蒙版图片设置词云图的形状。

实现与展示

使用jieba库和wordcloud库对计算机网络相关知识点进行分词和词云的生成并在前端进行展示 

loadImageData(item) {
      this.currentImage = {
        'title': item['title'],
        'img': `img_data/${item['id']}.png`
      };
    },

 效果展示