echarts常用功能封裝|抽象為mixin

Dd²⁰¹⁷發表於2020-10-24
Echarts封裝抽象

目前已解鎖以下功能：

  • [x] 初始化echarts（initChart）
  • [x] 獲取echarts引數配置（getOption）
  • [x] 生成echarts圖表（setOption）
  • [x] 監聽resize事件觸發echarts圖表更新
  • [x] 載入中loading
// charts.js
import echarts from 'echarts'

export default {
  computed: {
    // 初始化echarts
    getChart () {
      return this.$echarts.init(this.$refs.echart)
    }
  },
  watch: {
    chartData: {
      handler (val) {
        val && this.initChart()
      }
    }
  },
  mounted () {
    this.getChart.showLoading()
    window.addEventListener('resize', this.chartResize)
    // 移除resize事件
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.chartResize)
    })
  },
  methods: {
    initChart () {
      this.getChart.setOption(this.getOption())
      this.getChart.hideLoading()
    },
    chartResize () {
      this.getChart.resize()
    }
  }
}

example:

<template>
  <div>
    <div ref="echart" style="height: 600px"></div>
  </div>
</template>

<script>
import Charts from '@/components/Charts.js'

export default {
   // 混入Charts
  mixins: [Charts],
  data () {
    return {
        chartData: []
    }
  },
  mounted () {
    // 模擬ajax請求
    setTimeout(() => {
      this.chartData = [0, 1, 2, 3]
    }, 2000)
  },
  methods: {
    getOption () {
      // 配置options
      return {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        // 程式碼塊...
      }
    }
  }
}
</script>

ps：詳情請檢視examples

如何貢獻

筆記內容是筆者一個字一個字打上去的，難免會有一些筆誤，如果發現筆誤可直接在相應文件進行編輯修改。

歡迎提交對本倉庫的改進建議~

如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章