vue之將echart封裝為組件
最近的新項(xiàng)目里，有大量數(shù)據(jù)圖表類的需求，為了增強(qiáng)代碼的復(fù)用性，減少冗余，我開(kāi)始思考如何將echart封裝為組件調(diào)用。本文將會(huì)以雷達(dá)圖為案例，一步步講解在vue項(xiàng)目中如何使用echart，如何將其封裝為能重復(fù)調(diào)用的組件。
閱讀之前，可以先看看我之前的一些文章，這樣能更好的理解這次的內(nèi)容：
【使用vue-cli（vue腳手架）快速搭建項(xiàng)目】：http://m.fzitv.net/article/140498.htm
【vue之父子組件間通信實(shí)例講解（props、$ref 、 $emit ）】：m.fzitv.net/article/140581.htm
1. 安裝Echarts
首先第一步，肯定是安裝Echarts了。通過(guò)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>
出來(lái)的效果是這樣的：
效果一
3.將Echarts封裝為組件
上面我們已經(jīng)成功創(chuàng)建一個(gè)雷達(dá)圖了，但是很明顯的是，radar-chart.vue里的數(shù)據(jù)寫死的，無(wú)法重復(fù)調(diào)用。接下來(lái)著手封裝的事情了。
封裝的思路是這樣的：
（1）chart.vue向radar-chart.vue傳遞一組個(gè)性化數(shù)據(jù)
（2）radar-chart.vue通過(guò)props選項(xiàng)接收數(shù)據(jù)
（3）提煉接收到的數(shù)據(jù)，覆蓋配置數(shù)據(jù)option
（4）初始化圖表
（如果對(duì)如何傳遞數(shù)據(jù)不理解，可以先看看我在開(kāi)始的時(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: { //接受父組件傳遞來(lái)的數(shù)據(jù)
items: {
type: Array,
default () { //默認(rèn)數(shù)據(jù)，沒(méi)有數(shù)劇的情況下啟用
return [{name: '生物', value: 95, max: '100'}, {name: '數(shù)學(xué)', value: 55, max: '100'}, {name: '語(yǔ)文', 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)了，下面我們來(lái)優(yōu)化下一些細(xì)節(jié)。
不知道大家有沒(méi)發(fā)現(xiàn)radar-chart.vue里的<template>-id是寫死的，這會(huì)出現(xiàn)什么問(wèn)題？當(dāng)一個(gè)頁(yè)面調(diào)用兩次這個(gè)雷達(dá)圖組件，id就會(huì)重復(fù)了，從而報(bào)錯(cuò)。
為了解決這個(gè)問(wèn)題，我引入了uuid（vue-cli項(xiàng)目自帶，不需另外安裝），意在為每個(gè)生成的雷達(dá)圖配一個(gè)不重復(fù)的隨機(jī)id。還需要注意的是，我們要在created()方法里去做這個(gè)生成id的事情，如果寫在mounted了就會(huì)出現(xiàn)無(wú)法初始化的情況，因?yàn)閬?lái)不及渲染新的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: '數(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: '語(yǔ)文', 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的問(wèn)題：
效果三
整個(gè)封裝echart的思路就是上面那樣了，其實(shí)這個(gè)demo還不完美，像雷達(dá)圖的寬高也是寫死的，還沒(méi)來(lái)得及做更多的優(yōu)化，后面有空慢慢再完善它~
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
v-for是vue的循環(huán)指令,作用是遍歷數(shù)組(對(duì)象)的每一個(gè)值,這篇文章主要給大家介紹了關(guān)于Vue中v-for的9種使用案例的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue?調(diào)用瀏覽器攝像頭實(shí)現(xiàn)及原理解析
這篇文章主要為大家介紹了vue調(diào)用瀏覽器攝像頭實(shí)現(xiàn)及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能
視頻才用流媒體，有后臺(tái)實(shí)時(shí)返回?cái)?shù)據(jù)， 要支持flash播放， 所以需安裝對(duì)應(yīng)的flash插件。這篇文章主要介紹了vue + typescript + video.js 流媒體播放 視頻監(jiān)控,需要的朋友可以參考下2019-07-07
el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中的操作代碼
這篇文章主要介紹了el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中的操作代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
本文主要介紹了vue3中toRef、toRefs和toRaw的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
小編之前介紹了通過(guò)vue.js計(jì)算屬性，不知道大家都學(xué)會(huì)了嗎。那這篇文章中我們將一起學(xué)習(xí)vue.js實(shí)現(xiàn)綁定class和style樣式，有需要的朋友們可以參考借鑒。2016-09-09
這篇文章主要為大家介紹了Vue多重文字描邊組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue項(xiàng)目如何引入公共頭部底部問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue el-switch綁定數(shù)值時(shí)需要注意的問(wèn)題
在Vue中使用`el-switch`組件時(shí),綁定數(shù)值類型時(shí)應(yīng)使用布爾值（true/false）,而綁定字符串類型時(shí)應(yīng)使用字符串（'true'/'false'）2024-12-12
vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)過(guò)程詳解
前端的業(yè)務(wù)開(kāi)發(fā)中會(huì)遇到不使用分頁(yè)方式來(lái)加載長(zhǎng)列表的需求,下面這篇文章主要給大家介紹了關(guān)于vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08