vue項目中如何封裝echarts

本文小編為大家詳細(xì)介紹“vue項目中如何封裝echarts”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue項目中如何封裝echarts”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

場景

• 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（默認(rèn)是）， 圖表的配置chartOption。

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

具體代碼如下

<template>
  <div class="chart">
    <div ref="chart" : />
  </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'

// 注冊必須的組件
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)入，這樣就不需要在代碼里一個個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

<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: {}
}

效果如下

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

代碼

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

總結(jié)

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)就可以使用的例子了，直接參考代碼就行了，不詳細(xì)說了。想修改什么屬性，直接傳參就行。傳具體參數(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"屬性就行

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

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

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

附：echarts 餅圖調(diào)用高亮示例 dispatchAction

 <!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
    <div id="main" ></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var app = {};
        option = {
            title:{
                text:'餅圖程序調(diào)用高亮示例',
                left:'center'
            },
            tooltip:{
                trigger:'item',
                formatter:'{a}
:{c}qe8gkuk%'
            },
            legend:{
                orient:'vertical', //圖例列表的布局朝向。'horizontal''vertical'
                left:'left',
                data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜素引擎']
            },
            series:[
                {
                    name:'訪問來源',
                    type:'pie',
                    radius:'55%',
                    center:['50%','60%'],
                    data:[
                        {value:335,name:'直接訪問'},
                        {value:310,name:'郵件營銷'},
                        {value:234,name:'聯(lián)盟廣告'},
                        {value:135,name:'視頻廣告'},
                        {value:1548,name:'搜索引擎'},
                    ],
                    emphasis:{
                        itemStyle:{
                            shadowBlur:10,
                            shadowOffsetX:0,
                            shadowColor:'rgba(0,0,0,0.5)'
                        }
                    }
                }
            ]
        };
        
        app.currentIndex = -1;
        setInterval(() => {
            var dataLen = option.series[0].data.length;
            //取消之前高亮的圖形
            myChart.dispatchAction({
                type:'downplay',
                seriesIndex:0,
                dataIndex:app.currentIndex
            });
            app.currentIndex = (app.currentIndex + 1) % dataLen;
            //高亮當(dāng)前圖形
            myChart.dispatchAction({
                type:'highlight',
                seriesIndex:0,
                dataIndex:app.currentIndex
            });
            //顯示tooltip
            myChart.dispatchAction({
                type:'showTip',
                seriesIndex:0,
                dataIndex:app.currentIndex
            })
        }, 1000);
        option && myChart.setOption(option);
    </script>

讀到這里，這篇“vue項目中如何封裝echarts”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。