vue之將echart封裝為組件

更新時間：2018年06月02日 15:28:59 作者：四小七

這篇文章主要介紹了vue之將echart封裝為組件，本文將會以雷達圖為案例，一步步講解在vue項目中如何使用echart，如何將其封裝為能重復調用的組件

最近的新項目里，有大量數據圖表類的需求，為了增強代碼的復用性，減少冗余，我開始思考如何將echart封裝為組件調用。本文將會以雷達圖為案例，一步步講解在vue項目中如何使用echart，如何將其封裝為能重復調用的組件。

閱讀之前，可以先看看我之前的一些文章，這樣能更好的理解這次的內容：

【使用vue-cli（vue腳手架）快速搭建項目】：http://www.fzitv.net/article/140498.htm

【vue之父子組件間通信實例講解（props、$ref 、 $emit ）】：www.fzitv.net/article/140581.htm

1. 安裝Echarts

首先第一步，肯定是安裝Echarts了。通過cd命令進入項目根目錄，然后敲以下命令行：

cnpm install echarts -S

安裝成功會如下顯示，package.json里的dependencies屬性也會自動加上Echarts依賴：

安裝Echarts

package.json

2.在vue項目中使用Echarts

安裝成功以后，我們先要考慮的是如何在vue項目中導入Echarts，并成功初始化一個圖表。

下面我會先建兩個.vue文件 chart.vue 和 radar-chart.vue 作為這次示例的基礎。 chart.vue的角色是調用雷達圖，radar-chart.vue的角色是提供雷達圖：

//chart.vue 
<template>
 <radar-chart></radar-chart>
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart
 }
</script>

//radar-chart.vue
<template>
</template>
<script>
 export default {
   name: "radar-chart"
 }
</script>

好，正式創(chuàng)建一個Echarts圖表了

（1）在radar-chart.vue導入echart ：

 // 引入基本模板
 import echarts from 'echarts/lib/echarts'
 // 引入雷達圖組件
 import 'echarts/lib/chart/radar'
 // 引入提示框和圖例組件
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'

（2）創(chuàng)建圖表配置數據，數據格式參考 Echarts官網：

   const option = {
    tooltip: {},
    radar: {
     indicator: [{name: '體育', max: '100'}, {name: '數學', max: '100'}, {name: '化學', max: '100'}, {name: '勞動', max: '100'}, {name: '物理', max: '100'}],
     center: ['50%', '51%']
    },
    series: [{
     type: 'radar',
     itemStyle: {normal: {areaStyle: {type: 'default'}}},
     data: [
      {
       value: [58,56,78,64,98],
       name: '各項得分',
       itemStyle: {normal: {color: '#f0ad4e'}}
      }
     ]
    }]
   }

（3）初始化圖表：

  const chartObj = echarts.init(document.getElementById('radar'))
  chartObj.setOption(option)

上面幾步匯總為以下代碼，另外補充一點就是，創(chuàng)建配置數據option和初始化的時候，都要放在mounted鉤子函數里執(zhí)行，這樣才能保證獲取dom的是時候，dom已完成渲染：

//chart.vue 
<template>
 <radar-chart></radar-chart>
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart
 }
</script>

//radar-chart.vue
<template>
 <div id="radar" class="container"> </div>
</template>

<script>
 // 引入基本模板
 import echarts from 'echarts/lib/echarts'
 // 引入雷達圖組件
 import 'echarts/lib/chart/radar'
 // 引入提示框和圖例組件
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 export default {
  name: "radar-chart",
  mounted(){
   const option = { //創(chuàng)建圖表配置數據
    tooltip: {},
    radar: {
     indicator: [{name: '體育', max: '100'}, {name: '數學', max: '100'}, {name: '化學', max: '100'}, {name: '勞動', max: '100'}, {name: '物理', max: '100'}],
     center: ['50%', '51%']
    },
    series: [{
     type: 'radar',
     itemStyle: {normal: {areaStyle: {type: 'default'}}},
     data: [
      {
       value: [58,56,78,64,98],
       name: '各項得分',
       itemStyle: {normal: {color: '#f0ad4e'}}
      }
     ]
    }]
   }
   //初始化圖表
   const chartObj = echarts.init(document.getElementById('radar'))
   chartObj.setOption(option)
  }
 }
</script>
<style scoped>
 .container{width: 500px;height: 400px;}
</style>

出來的效果是這樣的：

效果一

3.將Echarts封裝為組件

上面我們已經成功創(chuàng)建一個雷達圖了，但是很明顯的是，radar-chart.vue里的數據寫死的，無法重復調用。接下來著手封裝的事情了。

封裝的思路是這樣的：
（1）chart.vue向radar-chart.vue傳遞一組個性化數據
（2）radar-chart.vue通過props選項接收數據
（3）提煉接收到的數據，覆蓋配置數據option
（4）初始化圖表
（如果對如何傳遞數據不理解，可以先看看我在開始的時候提到的，我的另一篇文章 —— “ vue之父子組件間通信實例講解（props、$ref 、 $emit ）”）

具體代碼如下：

//chart.vue （父組件）

<template>
 <radar-chart :items="items"></radar-chart> //傳遞在子組件prop選項里約定好的數據
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart,
  data () {
   return {
    items: [{name: '體育', value: 95, max: '100'}, {name: '數學', value: 55, max: '100'}, {name: '化學', value: 75, max: '100'}, {name: '勞動', value: 85, max: '100'}, {name: '烹飪', value: 85, max: '100'}]
   }
  }
 }
</script>

//radar-chart.vue （子組件）

<template>
 <div id="radar" class="container"> </div>
</template>

<script>
 // 引入基本模板
 import echarts from 'echarts/lib/echarts'
 // 引入雷達圖組件
 import 'echarts/lib/chart/radar'
 // 引入提示框和圖例組件
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 export default {
  name: "radar-chart",
  props: {        //接受父組件傳遞來的數據
   items: {
    type: Array,
    default () {    //默認數據，沒有數劇的情況下啟用
     return [{name: '生物', value: 95, max: '100'}, {name: '數學', value: 55, max: '100'}, {name: '語文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美術', value: 59, max: '100'}]
    }
   },
  },
  mounted(){
   let values = [] //提煉接收到的數據
   this.items.forEach(el => {
    values.push(el.value)  
   })            
   const option = { //覆蓋配置數據option
    tooltip: {},
    radar: {
     indicator: this.items, 
     center: ['50%', '51%']
    },
    series: [{
     type: 'radar',
     itemStyle: {normal: {areaStyle: {type: 'default'}}},
     data: [
      {
       value: values, 
       name: '各項得分',
       itemStyle: {normal: {color: '#f0ad4e'}}
      }
     ]
    }]
   }
   //初始化
   const chartObj = echarts.init(document.getElementById('radar'))
   chartObj.setOption(option)
  }
 }
</script>
<style scoped>
 .container{width: 500px;height: 400px;}
</style>

封裝以后，就能傳遞自定義的數據，反復調用了。上面代碼最后的效果是這樣的：

效果二

4.細節(jié)優(yōu)化

基本的功能已經實現(xiàn)了，下面我們來優(yōu)化下一些細節(jié)。

不知道大家有沒發(fā)現(xiàn)radar-chart.vue里的<template>-id是寫死的，這會出現(xiàn)什么問題？當一個頁面調用兩次這個雷達圖組件，id就會重復了，從而報錯。

為了解決這個問題，我引入了uuid（vue-cli項目自帶，不需另外安裝），意在為每個生成的雷達圖配一個不重復的隨機id。還需要注意的是，我們要在created()方法里去做這個生成id的事情，如果寫在mounted了就會出現(xiàn)無法初始化的情況，因為來不及渲染新的ID，就執(zhí)行document.getElementById()了，具體代碼如下：

<template>
 <div>
  <radar-chart :items="items_one"></radar-chart>
  <radar-chart :items="items_two"></radar-chart>
 </div>
</template>

<script>
 import RadarChart from '../components/radar-chart'
 export default {
  name: "chart",
  components: {RadarChart},
  component: RadarChart,
  data () {
   return {
    items_one: [{name: '體育', value: 95, max: '100'}, {name: '數學', value: 55, max: '100'}, {name: '化學', value: 75, max: '100'}, {name: '勞動', value: 85, max: '100'}, {name: '烹飪', value: 85, max: '100'}],
    items_two: [{name: '體育', value: 22, max: '100'}, {name: '數學', value: 55, max: '100'}, {name: '化學', value: 75, max: '100'}, {name: '勞動', value: 85, max: '100'}, {name: '烹飪', value: 85, max: '100'}]
   }
  }
 }
</script>

<template>
 <div :id="elId" class="container"> </div>
</template>

<script>
 // 引入基本模板
 import echarts from 'echarts/lib/echarts'
 // 引入雷達圖組件
 import 'echarts/lib/chart/radar'
 // 引入提示框和圖例組件
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 //引入uuid文件
 import uuidv1 from 'uuid/v1' 
 export default {
  name: "radar-chart",
  props: {
   items: {
    type: Array,
    default () {
     return [{name: '生物', value: 95, max: '100'}, {name: '數學', value: 55, max: '100'}, {name: '語文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美術', value: 59, max: '100'}]
    }
   },
  },
  data () {
   return {
    elId: ''
   }
  },
  created(){
   this.elId = uuidv1() //獲取隨機id
  },
  mounted(){
   let values = []
   this.items.forEach(el => {
    values.push(el.value)
   })
   const option = {
    tooltip: {},
    radar: {
     indicator: this.items,
     center: ['50%', '51%']
    },
    series: [{
     type: 'radar',
     itemStyle: {normal: {areaStyle: {type: 'default'}}},
     data: [
      {
       value: values,
       name: '各項得分',
       itemStyle: {normal: {color: '#f0ad4e'}}
      }
     ]
    }]
   }
   const chartObj = echarts.init(document.getElementById(this.elId));
   chartObj.setOption(option)
  }
 }
</script>
<style scoped>
 .container{width: 500px;height: 400px;}
</style>

成功解決重復id的問題：

效果三

整個封裝echart的思路就是上面那樣了，其實這個demo還不完美，像雷達圖的寬高也是寫死的，還沒來得及做更多的優(yōu)化，后面有空慢慢再完善它~

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue中v-for的9種使用案例總結大全
v-for是vue的循環(huán)指令,作用是遍歷數組(對象)的每一個值,這篇文章主要給大家介紹了關于Vue中v-for的9種使用案例的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-12-12
vue?調用瀏覽器攝像頭實現(xiàn)及原理解析
這篇文章主要為大家介紹了vue調用瀏覽器攝像頭實現(xiàn)及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
vue + typescript + video.js實現(xiàn) 流媒體播放視頻監(jiān)控功能
視頻才用流媒體，有后臺實時返回數據，要支持flash播放，所以需安裝對應的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放視頻監(jiān)控,需要的朋友可以參考下
2019-07-07
el-table 選擇框根據條件設置某項不可選中的操作代碼
這篇文章主要介紹了el-table 選擇框根據條件設置某項不可選中的操作代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
vue3中toRef、toRefs和toRaw的使用
本文主要介紹了vue3中toRef、toRefs和toRaw的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-05-05
vue.js入門教程之綁定class和style樣式
小編之前介紹了通過vue.js計算屬性，不知道大家都學會了嗎。那這篇文章中我們將一起學習vue.js實現(xiàn)綁定class和style樣式，有需要的朋友們可以參考借鑒。
2016-09-09
Vue多重文字描邊組件實現(xiàn)示例詳解
這篇文章主要為大家介紹了Vue多重文字描邊組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
vue項目如何引入公共頭部底部
這篇文章主要介紹了vue項目如何引入公共頭部底部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue el-switch綁定數值時需要注意的問題
在Vue中使用`el-switch`組件時,綁定數值類型時應使用布爾值（true/false）,而綁定字符串類型時應使用字符串（'true'/'false'）
2024-12-12
vue長列表優(yōu)化之虛擬列表實現(xiàn)過程詳解
前端的業(yè)務開發(fā)中會遇到不使用分頁方式來加載長列表的需求,下面這篇文章主要給大家介紹了關于vue長列表優(yōu)化之虛擬列表實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-08-08