vue-echarts動態圖表制作

一、技術概述

  （1）這個技術是做什么？

在vue框架下根據后端傳來的數據進行動態圖表的繪制。

  （2）學習該技術的原因？

社團管理系統的管理員首頁需要提供新注冊人數折線圖和各類別社團餅圖，數據需要動態的從后端獲取。

  （3）技術的難點在哪里？

從后端獲取新的數據后及時更新圖表，將變量數組作為繪制圖表的參數。

二、技術詳述

1.安裝npm

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  cnpm install echarts -S

2.引入

在需要繪制圖表的vue文件添加：

      import echarts from 'echarts'

3.將option中折線坐標設為變量

以知社項目中新注冊用戶折線圖為例：

      option: {
        tooltip: { // 設置tip提示
          trigger: 'axis'
        },
        legend: { // 設置區分（哪條線屬於什么）
          data: ['注冊人數']
        },
        color: ['#8AE09F'], // 設置區分（每條線是什么顏色，和 legend 一一對應）
        xAxis: { // 設置x軸
          type: 'category',
          boundaryGap: false, // 坐標軸兩邊不留白
          data: [],
          name: '日期', // X軸 name
          nameTextStyle: { // 坐標軸名稱的文字樣式
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: { // 坐標軸軸線相關設置。
            lineStyle: {
              color: '#FA6F53'
            }
          },
          inverse: true
        },
        yAxis: {
          name: '注冊人數',
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53'
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '注冊人數',
            data: [],
            type: 'line', // 類型為折線圖
            lineStyle: { // 線條樣式 => 必須使用normal屬性
              normal: {
                color: '#8AE09F'
              }
            }
          }
        ]
      }

4.從后端獲取數據並賦值

      const param = {
        startDate: sD,
        endDate: eD
      }
      getNewUserData(param).then(response => {
        if (response.status === 200) {
          this.option.xAxis.data = response.data.date
          this.option.series[0].data = response.data.newUsers
        }
      })

5.監聽數據，變化時調用繪圖函數

      watch: {
          'option.xAxis.data': function() {
           this.showChartLine()
          }
      },

6.生成折線圖

      showChartLine() {
      this.chartLine = echarts.init(document.getElementById('chartLineBox'))
      this.chartLine.setOption(this.option)
      // 指定圖表的配置項和數據
      },

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

問題：生成圖片會比獲取數據慢上半拍，圖片顯示存在滯后，例如查詢‘2020-5-15’-‘2020-5-20’之間的數據時，需要點擊一次獲取數據，這時圖表沒有變化，然后再點擊一次，圖表才會顯示根據‘2020-5-15’-‘2020-5-20’之間的數據生成的折線圖。
解決過程：添加watch監聽數據變化，調用繪圖函數，即上示第五步。

四、總結

結對第二次作業其實也能運用這個技術實現，不過當時連vue框架也沒接觸過，看上去很難的樣子所以選了別的方法，實際使用過才發現這樣做不僅更簡單、而且效果也比我之前使用的那種更好。
所以軟件開發行業中時刻掌握新技術真的很重要、很重要！即使對於已掌握的更熟悉，但是新的、得到廣泛認可的技術真的往往能帶來很大的便利。

五、參考文獻、參考博客

Vue系列——在vue項目中使用echarts
vue中插入Echarts示例
Vue:在Vue中使用echarts
vue中使用echarts繪制折線圖
echarts官網