vue項(xiàng)目如何雅的封裝echarts

這篇文章主要介紹“vue項(xiàng)目如何雅的封裝echarts”，在日常操作中，相信很多人在vue項(xiàng)目如何雅的封裝echarts問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue項(xiàng)目如何雅的封裝echarts”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

場(chǎng)景

• 1、Echarts使用時(shí)，都需要寫一堆的option，如果每個(gè)圖表都要寫一個(gè)，一個(gè)文件里面的代碼量是很大的

• 2、不方便復(fù)用

需求

• 1、方便復(fù)用

• 2、展示類的圖表，數(shù)據(jù)與業(yè)務(wù)、樣式分離，只傳數(shù)據(jù)就行

• 3、項(xiàng)目里需要用到的圖表會(huì)有多個(gè)，實(shí)現(xiàn)少代碼自動(dòng)化導(dǎo)入，不需要一個(gè)個(gè)import

• 4、本人圖表用在大屏數(shù)據(jù)可視化的情況比較多，采用的是等比縮放的方式，所以圖表也能根據(jù)界面縮放自動(dòng)縮放，不需要手動(dòng)調(diào)用。5、圖表可配置

代碼總覽

涉及的文件如下（具體參考代碼）：

|-- src
    |-- components
        |-- chart
            |-- index.vue    // 圖表單文件組件，供界面調(diào)用
            |-- index.js    // 實(shí)現(xiàn)自動(dòng)化導(dǎo)入options里的圖表option
            |-- options    // 存放各種圖表的option
                |-- bar    // 隨便一例子
                    |-- index.js
    |-- views
        |-- chartTest    // 實(shí)例所在
            |-- index.vue
            |-- index.scss
            |-- index.js
|-- main.js    // 全局引入echarts圖表

實(shí)現(xiàn)

components--chart--index.vue

這里定義了一個(gè)名為ChartView 的組件，開放了4個(gè)可配置的屬性：寬度width，高度height， 是否自動(dòng)調(diào)整大小autoResize（默認(rèn)是），  圖表的配置chartOption。

這里默認(rèn)用Canvas 渲染圖表了，也可以用SVG的，自選吧

具體代碼如下

<template>
  <div class="chart">
    <div ref="chart" :style="{ height: height, width: width }" />
  </div>
</template>
<script>

// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core'
// 引入柱狀圖圖表，圖表后綴都為 Chart
import {
  BarChart
} from 'echarts/charts'
// 引入提示框，標(biāo)題，直角坐標(biāo)系組件，組件后綴都為 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注冊(cè)必須的組件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
)

export default {
  name: 'ChartView',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartOption: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'canvas'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartOption: {
      deep: true,
      handler(newVal) {
        this.setOptions(newVal)
      }
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      window.addEventListener('resize', this.resizeHandler)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.resizeHandler)
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    resizeHandler() {
      this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, '', {
        renderer: this.type
      })
      this.chart.setOption(this.chartOption)
      this.chart.on('click', this.handleClick)
    },
    handleClick(params) {
      this.$emit('click', params)
    },
    setOptions(option) {
      this.clearChart()
      this.resizeHandler()
      if (this.chart) {
        this.chart.setOption(option)
      }
    },
    refresh() {
      this.setOptions(this.chartOption)
    },
    clearChart() {
      this.chart && this.chart.clear()
    }
  }
}
</script>

components--chart--index.js

這里主要利用require.context，把options里面定義的圖表遍歷導(dǎo)入，這樣就不需要在代碼里一個(gè)個(gè)import了，特別是圖表多的時(shí)候。

const modulesFiles = require.context('./options', true, /index.js$/)
let modules = {}
modulesFiles.keys().forEach(item => {
  modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modules

components--chart--options

這里展示下如何封裝自己想要的圖表

在Echarts官方示例上隨便選了個(gè)示例

在options下新建一個(gè)bar目錄，bar目錄下新建一個(gè)index.js文件。（個(gè)人習(xí)慣而已，喜歡每個(gè)圖表都獨(dú)立文件夾存放。不喜歡這種方式的，可以不放目錄，直接js文件，但是components--chart--index.js要對(duì)應(yīng)修改下）

直接復(fù)制示例的option代碼

index.js具體代碼如下

const testBar = (data) => {
  const defaultConfig = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  }

  const opt = Object.assign({}, defaultConfig)
  return opt
}

export default {
  testBar
}

testBar方法是可以傳參的，具體使用的時(shí)候，圖表所需要配置的屬性，如：data數(shù)據(jù)、圖表顏色......等都可以作為參數(shù)傳。

main.js

這里全局引入下封裝的Echarts組件，方便界面調(diào)用。（至于單個(gè)引用的方式，就不必多說了）

具體代碼如下：

import eChartFn from '@/components/chart/index.js'
import ChartPanel from '@/components/chart/index.vue'
Vue.component(ChartPanel.name, ChartPanel)
Vue.prototype.$eChartFn = eChartFn

chartTest

這里展示下如何調(diào)用封裝的bar圖表，主要代碼如下

index.vue

<chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" />

index.js

export default {
  name: 'chartTestView',
  data() {
    return {
      chartOpt: {}
    }
  },
  mounted() {},
  created() {
    this.chartOpt = this.$eChartFn.testBar()
  },
  methods: {
  },
  watch: {}
}

效果如下

可以嘗試拖動(dòng)瀏覽器的大小，可以看到，圖表也是隨著瀏覽器的拖動(dòng)自動(dòng)縮放的。

代碼

按代碼總覽的目錄去代碼里找著看就行了。

• https://github.com/liyoro/vue-skill

總結(jié)

Echarts用到的各種圖表，基本上都可以在Echarts官方示例和Echarts可視化作品分享上找到，特別是Echarts可視化作品分享，做項(xiàng)目的時(shí)候，可以去參考。

以上，封裝了chart組件，按照上述方式，把圖表的option配置和相關(guān)處理都放options文件夾下面，調(diào)用圖表時(shí)傳對(duì)應(yīng)的option，也就幾行代碼的事情，算是比較方便了。

chart組件很方便復(fù)用的，直接就可以使用了。

補(bǔ)充

評(píng)論里說想動(dòng)態(tài)修改option里面的屬性，稍微做了個(gè)例子，動(dòng)態(tài)修改pie圖表的data和color屬性，這個(gè)是直接生產(chǎn)就可以使用的例子了，直接參考代碼就行了，不詳細(xì)說了。想修改什么屬性，直接傳參就行。傳具體參數(shù)可以，想修改的屬性多了就把參數(shù)封裝成一個(gè)json傳也可以。懂得在封裝的option里面靈活使用就行。

以下是新增的參考代碼

|-- src
    |-- components
        |-- chart
            |-- options    // 存放各種圖表的option
                |-- pie    // pie例子
                    |-- index.js
    |-- views
        |-- chartTest    // 實(shí)例所在
            |-- index.vue
            |-- index.scss
            |-- index.js

代碼使用都是直接一行調(diào)用的

this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])

效果如下：

補(bǔ)充2：圖表高亮輪詢，dispatchAction使用

使用方法

加上:play-highlight="true"屬性就行

<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" />

主要實(shí)現(xiàn)的代碼在如下文件的playHighlightAction方法里面，參考的echarts 餅圖調(diào)用高亮示例 dispatchAction實(shí)現(xiàn)的。只是簡(jiǎn)單的高亮輪詢，具體各種實(shí)現(xiàn)就自己看文檔調(diào)樣式了。

|-- src
    |-- components
        |-- chart
            |-- index.js    // 實(shí)現(xiàn)自動(dòng)化導(dǎo)入options里的圖表option

到此，關(guān)于“vue項(xiàng)目如何雅的封裝echarts”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！