vue之將echart封裝為組件
最近的新項(xiàng)目里，有大量數(shù)據(jù)圖表類的需求，為了增強(qiáng)代碼的復(fù)用性，減少冗余，我開始思考如何將echart封裝為組件調(diào)用。本文將會(huì)以雷達(dá)圖為案例，一步步講解在vue項(xiàng)目中如何使用echart，如何將其封裝為能重復(fù)調(diào)用的組件。
閱讀之前，可以先看看我之前的一些文章，這樣能更好的理解這次的內(nèi)容：
【使用vue-cli（vue腳手架）快速搭建項(xiàng)目】：http://chabaoo.cn/article/140498.htm
【vue之父子組件間通信實(shí)例講解（props、$ref 、 $emit ）】：chabaoo.cn/article/140581.htm
1. 安裝Echarts
首先第一步，肯定是安裝Echarts了。通過cd命令進(jìn)入項(xiàng)目根目錄，然后敲以下命令行：
cnpm install echarts -S
安裝成功會(huì)如下顯示，package.json里的dependencies屬性也會(huì)自動(dòng)加上Echarts依賴：
安裝Echarts
package.json
2.在vue項(xiàng)目中使用Echarts
安裝成功以后，我們先要考慮的是如何在vue項(xiàng)目中導(dǎo)入Echarts，并成功初始化一個(gè)圖表。
下面我會(huì)先建兩個(gè).vue文件 chart.vue 和 radar-chart.vue 作為這次示例的基礎(chǔ)。 chart.vue的角色是調(diào)用雷達(dá)圖，radar-chart.vue的角色是提供雷達(dá)圖：
//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)建一個(gè)Echarts圖表了
（1）在radar-chart.vue導(dǎo)入echart ：
// 引入基本模板 import echarts from 'echarts/lib/echarts' // 引入雷達(dá)圖組件 import 'echarts/lib/chart/radar' // 引入提示框和圖例組件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend'
（2）創(chuàng)建圖表配置數(shù)據(jù)，數(shù)據(jù)格式參考 Echarts官網(wǎng)：
const option = {
tooltip: {},
radar: {
indicator: [{name: '體育', max: '100'}, {name: '數(shù)學(xué)', max: '100'}, {name: '化學(xué)', max: '100'}, {name: '勞動(dòng)', max: '100'}, {name: '物理', max: '100'}],
center: ['50%', '51%']
},
series: [{
type: 'radar',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: [58,56,78,64,98],
name: '各項(xiàng)得分',
itemStyle: {normal: {color: '#f0ad4e'}}
}
]
}]
}
（3）初始化圖表：
const chartObj = echarts.init(document.getElementById('radar'))
chartObj.setOption(option)
上面幾步匯總為以下代碼，另外補(bǔ)充一點(diǎn)就是，創(chuàng)建配置數(shù)據(jù)option和初始化的時(shí)候，都要放在mounted鉤子函數(shù)里執(zhí)行，這樣才能保證獲取dom的是時(shí)候，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'
// 引入雷達(dá)圖組件
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)建圖表配置數(shù)據(jù)
tooltip: {},
radar: {
indicator: [{name: '體育', max: '100'}, {name: '數(shù)學(xué)', max: '100'}, {name: '化學(xué)', max: '100'}, {name: '勞動(dòng)', max: '100'}, {name: '物理', max: '100'}],
center: ['50%', '51%']
},
series: [{
type: 'radar',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: [58,56,78,64,98],
name: '各項(xiàng)得分',
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封裝為組件
上面我們已經(jīng)成功創(chuàng)建一個(gè)雷達(dá)圖了，但是很明顯的是，radar-chart.vue里的數(shù)據(jù)寫死的，無法重復(fù)調(diào)用。接下來著手封裝的事情了。
封裝的思路是這樣的：
（1）chart.vue向radar-chart.vue傳遞一組個(gè)性化數(shù)據(jù)
（2）radar-chart.vue通過props選項(xiàng)接收數(shù)據(jù)
（3）提煉接收到的數(shù)據(jù)，覆蓋配置數(shù)據(jù)option
（4）初始化圖表
（如果對(duì)如何傳遞數(shù)據(jù)不理解，可以先看看我在開始的時(shí)候提到的，我的另一篇文章 —— “ vue之父子組件間通信實(shí)例講解（props、$ref 、 $emit ）”）
具體代碼如下：
//chart.vue （父組件）
<template>
<radar-chart :items="items"></radar-chart> //傳遞在子組件prop選項(xiàng)里約定好的數(shù)據(jù)
</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: '數(shù)學(xué)', value: 55, max: '100'}, {name: '化學(xué)', value: 75, max: '100'}, {name: '勞動(dòng)', 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'
// 引入雷達(dá)圖組件
import 'echarts/lib/chart/radar'
// 引入提示框和圖例組件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
export default {
name: "radar-chart",
props: { //接受父組件傳遞來的數(shù)據(jù)
items: {
type: Array,
default () { //默認(rèn)數(shù)據(jù)，沒有數(shù)劇的情況下啟用
return [{name: '生物', value: 95, max: '100'}, {name: '數(shù)學(xué)', value: 55, max: '100'}, {name: '語文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美術(shù)', value: 59, max: '100'}]
}
},
},
mounted(){
let values = [] //提煉接收到的數(shù)據(jù)
this.items.forEach(el => {
values.push(el.value)
})
const option = { //覆蓋配置數(shù)據(jù)option
tooltip: {},
radar: {
indicator: this.items,
center: ['50%', '51%']
},
series: [{
type: 'radar',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: values,
name: '各項(xiàng)得分',
itemStyle: {normal: {color: '#f0ad4e'}}
}
]
}]
}
//初始化
const chartObj = echarts.init(document.getElementById('radar'))
chartObj.setOption(option)
}
}
</script>
<style scoped>
.container{width: 500px;height: 400px;}
</style>
封裝以后，就能傳遞自定義的數(shù)據(jù)，反復(fù)調(diào)用了。上面代碼最后的效果是這樣的：
效果二
4.細(xì)節(jié)優(yōu)化
基本的功能已經(jīng)實(shí)現(xiàn)了，下面我們來優(yōu)化下一些細(xì)節(jié)。
不知道大家有沒發(fā)現(xiàn)radar-chart.vue里的<template>-id是寫死的，這會(huì)出現(xiàn)什么問題？當(dāng)一個(gè)頁面調(diào)用兩次這個(gè)雷達(dá)圖組件，id就會(huì)重復(fù)了，從而報(bào)錯(cuò)。
為了解決這個(gè)問題，我引入了uuid（vue-cli項(xiàng)目自帶，不需另外安裝），意在為每個(gè)生成的雷達(dá)圖配一個(gè)不重復(fù)的隨機(jī)id。還需要注意的是，我們要在created()方法里去做這個(gè)生成id的事情，如果寫在mounted了就會(huì)出現(xiàn)無法初始化的情況，因?yàn)閬聿患颁秩拘碌腎D，就執(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: '數(shù)學(xué)', value: 55, max: '100'}, {name: '化學(xué)', value: 75, max: '100'}, {name: '勞動(dòng)', value: 85, max: '100'}, {name: '烹飪', value: 85, max: '100'}],
items_two: [{name: '體育', value: 22, max: '100'}, {name: '數(shù)學(xué)', value: 55, max: '100'}, {name: '化學(xué)', value: 75, max: '100'}, {name: '勞動(dòng)', 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'
// 引入雷達(dá)圖組件
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: '數(shù)學(xué)', value: 55, max: '100'}, {name: '語文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美術(shù)', value: 59, max: '100'}]
}
},
},
data () {
return {
elId: ''
}
},
created(){
this.elId = uuidv1() //獲取隨機(jī)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: '各項(xiàng)得分',
itemStyle: {normal: {color: '#f0ad4e'}}
}
]
}]
}
const chartObj = echarts.init(document.getElementById(this.elId));
chartObj.setOption(option)
}
}
</script>
<style scoped>
.container{width: 500px;height: 400px;}
</style>
成功解決重復(fù)id的問題：
效果三
整個(gè)封裝echart的思路就是上面那樣了，其實(shí)這個(gè)demo還不完美，像雷達(dá)圖的寬高也是寫死的，還沒來得及做更多的優(yōu)化，后面有空慢慢再完善它~
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3中的hook簡單封裝，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目history模式刷新404問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目history模式刷新404問題的解決辦法,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue如何基于es6導(dǎo)入外部js文件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端判斷手指在屏幕滑動(dòng)方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
今天小編就為大家分享一篇在vue中讀取本地Json文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了解決vue 退出動(dòng)畫無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)
這篇文章主要介紹了element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進(jìn)行增刪改,感興趣的朋友跟隨小編一起看看吧2024-07-07
vue?element修改el-select控件長度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長度style=“width:XXpx“不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07