這篇文章主要介紹“如何在vue中將echart封裝為組件”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“如何在vue中將echart封裝為組件”文章能幫助大家解決問(wèn)題。
成都創(chuàng)新互聯(lián)公司主營(yíng)葉縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件定制開(kāi)發(fā),葉縣h5微信小程序開(kāi)發(fā)搭建,葉縣網(wǎng)站營(yíng)銷推廣歡迎葉縣等地區(qū)企業(yè)咨詢
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ù)寫(xiě)死的,無(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是寫(xiě)死的,這會(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的事情,如果寫(xiě)在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)題:
關(guān)于“如何在vue中將echart封裝為組件”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
網(wǎng)站欄目:如何在vue中將echart封裝為組件
網(wǎng)頁(yè)路徑:http://bm7419.com/article18/ipddgp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、Google、建站公司、小程序開(kāi)發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)