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

成都創(chuàng)新互聯(lián)公司是一家專注于成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)與策劃設(shè)計,醴陵網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:醴陵等地區(qū)。醴陵做網(wǎng)站價格咨詢:13518219792

場景

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

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

需求

• 1、方便復(fù)用

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

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

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

代碼總覽

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

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

實現(xiàn)

components--chart--index.vue

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

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

具體代碼如下

components--chart--index.js

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

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官方示例上隨便選了個示例

在options下新建一個bar目錄，bar目錄下新建一個index.js文件。（個人習(xí)慣而已，喜歡每個圖表都獨立文件夾存放。不喜歡這種方式的，可以不放目錄，直接js文件，但是components--chart--index.js要對應(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方法是可以傳參的，具體使用的時候，圖表所需要配置的屬性，如：data數(shù)據(jù)、圖表顏色......等都可以作為參數(shù)傳。

main.js

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

具體代碼如下：

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

index.js

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

效果如下

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

代碼

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

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

總結(jié)

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

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

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

補充

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

以下是新增的參考代碼

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

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

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

效果如下：

補充2：圖表高亮輪詢，dispatchAction使用

使用方法

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

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

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

到此，關(guān)于“vue項目如何雅的封裝echarts”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁名稱：vue項目如何雅的封裝echarts
地址分享：http://weahome.cn/article/ihgpjh.html