快捷導(dǎo)航

vue+echarts動態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式

更新時間：2024年06月12日 14:45:46 作者：不愛寫代碼的小黃

這篇文章主要介紹了vue+echarts動態(tài)更新數(shù)據(jù)及數(shù)據(jù)變化重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、echarts基本使用

1. 安裝echarts

npm install echarts --save

這里說明一下問題，如果不加版本號，默認(rèn)安裝最新版。

問題是最新版在下面的引入會報錯，所以我安裝了@4.9.0版的echarts，使用起來沒問題。

npm install echarts@4.9.0 --save

2. 我使用的vue cli3

需要在main.js文件中全局引入echarts

// 全局引入echarts組件用于繪制圖表
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3. 在.vue文件里直接使用即可

<template>
  <div>
    <div id="chartLineBox" style="width: 100%;height: 360px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'FreshmenManageAdmitted',
  data () {
    return {
      // 指定圖表的配置項和數(shù)據(jù)
      option: {
        tooltip: { // 設(shè)置tip提示
            trigger: 'axis'
        },
        legend: { // 設(shè)置區(qū)分（哪條線屬于什么）
        },
        xAxis: { // 設(shè)置x軸
            type: 'category',
            boundaryGap: false, // 坐標(biāo)軸兩邊不留白
            data: ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7'],
            name: '日期', // X軸 name
            nameTextStyle: { // 坐標(biāo)軸名稱的文字樣式
                fontSize: 16,
                padding: [0, 0, 0, 20]
            }
        },
        yAxis: {
            name: '正確率',
            nameTextStyle: {
                fontSize: 16,
                padding: [0, 0, 10, 0]
            },
            type: 'value'
        },
        series: [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90], type: 'line' },
                 { name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50], type: 'line' }]
      }
    }
  },
  mounted () {
    this.chartChange()
  },
  methods: {
    chartChange () {
      const myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
      // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
      myEcharts.setOption(this.option, true)
    }
  }
}
</script>

4. 使用官方的樣式

網(wǎng)址：https://echarts.apache.org/zh/theme-builder.html

下載選擇的樣式.js文件即可使用，網(wǎng)站支持自定義樣式，并導(dǎo)出代碼，比女朋友都貼心-.-有木有。

js代碼：

// 三種樣式表，可以選擇一種使用
import 'assets/css/macarons.js'
import 'assets/css/customed.js'
import 'assets/css/vintage.js'
 
 
this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
this.myEcharts.setOption(this.option, true)

二、數(shù)據(jù)動態(tài)綁定及表格實時渲染問題

先上代碼：當(dāng)然是使用watch啦，watch大法好啊，為了數(shù)據(jù)變化時實時刷新表格，在監(jiān)聽到屬性值發(fā)生改變時，重新渲染一次表格。

敲重點：echarts不會自動幫你渲染數(shù)據(jù)的，需要手動再次調(diào)用setOption函數(shù)。

再次敲重點，重點，重點：看到 this.myEcharts.setOption(this.option, true)這一行代碼了嗎？最后這個屬性'true'真是nb壞了，沒它不行。

上官方代碼：setOption的函數(shù)定義，option是指圖表的配置項和數(shù)據(jù)，notMerge是指是否不跟之前設(shè)置的 option 進(jìn)行合并。默認(rèn)為 false。即表示合并。如果為 true，表示所有組件都會被刪除，然后根據(jù)新option 創(chuàng)建所有新組件。

也就是說如果不設(shè)置noeMerge就會自動合并數(shù)據(jù)，離譜！千萬要設(shè)置，千萬要設(shè)置，千萬要設(shè)置。

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
    notMerge?: boolean;
    replaceMerge?: string | string[];
    lazyUpdate?: boolean;
})

export default {
  name: 'StudentCourseDataChart',
  props: {
    xData: {
      type: Array,
      default () {
        return []
      }
    },
    yData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    'xData': function (val) {
      this.chartChange()
    },
    'yData': function (val) {
      this.chartChange()
    }
  },
  methods: {
    chartChange () {
      this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
      this.option.xAxis.data = this.xData
      for (var i = 0; i < this.yData.length; i++) {
        this.yData[i]['type'] = 'line'
      }
      this.option.series = this.yData
      // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
      this.myEcharts.setOption(this.option, true)
    }
  }

數(shù)據(jù)部分如下：

上面的循環(huán)添加'type'屬性只是為了簡化原數(shù)據(jù)內(nèi)容，若不加這個屬性會報錯。

const StudentCourseChartDataX = ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7']
const StudentCourseChartDataY = [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90] },
                                 { name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50] }]

也可以使用計算屬性實時更新數(shù)據(jù)，這里就不展示了。