個人技術總結

• 個人技術總結
  • 課程回顧與總結
    • 技術概述
    • 技術詳述
    • 技術使用中遇到的問題和解決過程
    • 總結
    • 參考文獻、參考部落格

課程回顧與總結

技術概述

在vue中引入echart及echart整體圖形大小調整
使用圖表展示資料，可以讓資料看起來更加的直觀，通過餅圖或者直方圖折線，能展示出資料的趨勢。
技術的原因：為了能夠讓老師直觀地看到學生成績的分佈情況，能讓老師更好地瞭解到學生作業成績和期末考試成績。echart整體圖形大小調整通過在series裡面，通過改變radius和center的大小值就可以調整大小。
技術的難點：總會有不知道什麼原因顯示不出餅狀圖來。

技術詳述

一、安裝echart和axios
首先要先安裝能夠引入echart圖表和通過axios獲取後端資料的依賴

npm install echarts -S
npm install axios

二、全域性引入echarts和axios

import echarts from 'echarts'
import axios from 'axios'

三、資料格式

data() {
      return {
        options: [],
        value: '',
        list: [],
        a:'',
        b:'',
        c:'',
        d:'',
        e:'',
        f:'',
        g:'',
      }
}
 

四、建立圖表
建立容器

<div id="main"></div>

匯入

import echarts from 'echarts'

傳送請求方法

      selectChange() {
        localStorage.setItem('clazzvalue', this.value)
        this.initChart();
      },
      initChart() {
        this.char=echarts.init(document.getElementById("main"));
        this.char.setOption({
          tooltip:{},
          series:[
            {
              name: '訪問來源',
              type: 'pie',
              radius: '80%',
              data: []
            }
          ]
        });
 

this.$axios.get(```'http://1.15.149.222:8080/coursewebsite/teacher/score/final?cid='+localStorage.getItem('clazzvalue')```).then((res)=>{
            console.log('訪問後臺');
            var list = [{'name': '100', 'value':res.data.data.a},
              {'name': '90-99', 'value':res.data.data.b},
              {'name': '85-89', 'value':res.data.data.c},
              {'name': '80-84', 'value':res.data.data.d},
              {'name': '70-79', 'value':res.data.data.e},
              {'name': '60-69', 'value':res.data.data.f},
              {'name': '0-59', 'value':res.data.data.g} ];
            console.log(list);
            this.char.setOption({
              series:[
                {
                  name: '訪問來源',
                  type: 'pie',
                  radius: '80%',
                  data:list//賦值
                }
              ]
            })
}

created() {
  this.options = JSON.parse(localStorage.getItem('clazzInfo'))
  this.value = this.options[0].id+''
  if (!localStorage.getItem('clazzvalue'))
    localStorage.setItem('clazzvalue', this.value)
  else this.value = localStorage.getItem('clazzvalue')
  this.initChart();
},
mounted: function() {
  this.initChart();
},

技術使用中遇到的問題和解決過程

一開始一直出現圖表載入不進去的情況，後來忘記改了什麼引數就載入進去了。

總結

跟前端和圖表相關的東西，網頁可能因為各種各樣的原因載入不出來。有可能是載入順序，有可能是哪個部件的覆蓋，也有可能是一點點細微打錯變數名之類的錯誤。一定要很耐心地一點點去嘗試。繪製圖表的時候，一直執行就是空白執行就是空白，挺難受的，但最後最後圖表能呈現出來的時候是讓人感動的。

參考文獻、參考部落格

https://blog.csdn.net/qq_44758515/article/details/106963971