您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue中如何將echart封裝為組件”,在日常操作中,相信很多人在vue中如何將echart封裝為組件問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”vue中如何將echart封裝為組件”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
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)初始化圖表
具體代碼如下:
//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>
Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì),Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
到此,關(guān)于“vue中如何將echart封裝為組件”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。