在開始之前，我們先按照正常的元件註冊流程，在專案components目錄中新建一個名為radar-chart的元件，然後在一個Demo頁面引入該元件使用。
新建的radar-chart 元件內容：
// radar-chart.vue （子组件）
<template>
<p style="width: 100%; height: 100%;"></p>
</template>
<script>
export default {
name: 'radar-chart'
};
</script>
<style scoped>
</style>Demo 頁面程式碼：
// demo.vue （父组件）
<template>
<p style="border: 1px solid black; width: 400px; height: 300px; margin: 5px;">
<radar-chart></radar-chart>
</p>
</template>
<script>
import radarChart from '@/components/proj-components/echarts/radar-chart';
export default {
name: 'radar-chart-demo',
components: {
radarChart,
},
};
</script>
<style scoped>
</style>Demo 頁面效果圖一：
#初始化圖表
準備工作完成之後，我們要做的是引入ECharts，並在元件中初始化一個ECharts 的實例，這裡可以先照搬官網的實例和數據。
（1）在radar-chart.vue 引入ECharts ：
// radar-chart.vue （子组件） import echarts from 'echarts';
（2）在methods 中建立圖表設定資料的方法，資料格式參考Echarts 官網：
// radar-chart.vue （子组件）
methods: {
// 初始化图表配置
initOption() {
let vm = this;
vm.option = {
title: {
text: '基础雷达图'
},
tooltip: {},
legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [{ name: '销售（sales）', max: 6500}, { name: '管理（Administration）', max: 16000}, { name: '信息技术（Information Techology）', max: 30000}, { name: '客服（Customer Support）', max: 38000}, { name: '研发（Development）', max: 52000}, { name: '市场（Marketing）', max: 25000}]
},
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
// areaStyle: {normal: {}},
data: [{value: [4300, 10000, 28000, 35000, 50000, 19000], name: '预算分配（Allocated Budget）'}, {value: [5000, 14000, 28000, 31000, 42000, 21000], name: '实际开销（Actual Spending）'}]
}]
};
},
},（3 ）初始化圖表： 在元件鉤子mounted 方法中：
// radar-chart.vue （子组件）
mounted() {
this.initOption();
this.$nextTick(() => { // 这里的 $nextTick() 方法是为了在下次 DOM 更新循环结束之后执行延迟回调。也就是延迟渲染图表避免一些渲染问题
this.ready();
});
},在methods 中：
// radar-chart.vue （子组件）
ready() {
let vm = this;
let dom = document.getElementById('radar-chart');
vm.myChart = echarts.init(dom);
vm.myChart && vm.myChart.setOption(vm.option);
},Demo 頁面效果圖二：
這裡一共分了三步，引入ECharts、初始化圖表配置、初始化圖表，最後可以在Demo 頁面中看到，已經初步地把ECharts 的雷達圖顯示到專案中來了。
提取圖表配置屬性（重點）
上面我們已經成功創建一個雷達圖了，但是很明顯的是，radar-chart.vue 裡的資料寫死的，無法重複呼叫。接下來著手封裝的事情了。
封裝的想法是這樣的：
1、demo.vue 向radar-chart.vue 傳遞一組個人化資料
2、radar-chart.vue 通過props 選項接收數據
3、提煉接收到的數據，覆蓋配置數據option
#4、初始化圖表
#具體實現： 向子組件傳遞數據，在data 中定義變量，在mounted 中賦值
// demo.vue （父组件）
<template>
<p style="border: 1px solid black; width: 900px; height: 600px; margin: 5px;">
<radar-chart :indicator="indicator" :legendData="radarData"></radar-chart>
</p>
</template>
<script>
import radarChart from '@/components/proj-components/echarts/radar-chart';
export default {
name: 'radar-chart-demo',
components: {
radarChart,
},
mounted() {
this.indicator = [
{ name: '销售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技术', max: 30000 },
{ name: '客服', max: 38000 },
];
this.radarData = [
{
value: [4000, 15000, 26000, 21000],
name: '实际开销（Actual Spending）',
}
];
},
data() {
return {
indicator: [], // 雷达指示器数据
legendData: [], // 雷达图例数据
};
},
};
</script>
<style scoped>
</style>在props 中接收來自父組件的資料
// radar-chart.vue （子组件）
props: {
// 指示器数据，必传项
// 格式举例 [{ name: 'a', max: 1},{ name: 'a', max: 1},{ name: 'a', max: 1}]
indicator: {
type: Array,
default: () => []
},
// 图例数据，必填项。
// 格式举例 [{ value: [5000, 14000, 28000], name: 'name' }，{ value: [5000, 14000, 28000], name: 'name' }]
legendData: {
type: Array,
default: () => []
},
},在ready() 中更新圖表資料option 如果在這裡更新indicator、data 這兩個屬性值，initOption() 中就不需要初始化這兩個值了
// radar-chart.vue （子组件）
ready() {
let vm = this;
let dom = document.getElementById('radar-chart');
vm.myChart = echarts.init(dom);
// 得到指示器数据
vm.option.radar.indicator = vm.indicator;
// 得到图例数据
vm.option.series[0].data = vm.legendData;
vm.myChart && vm.myChart.setOption(vm.option);
},Demo 頁面效果圖三：
細節優化與其他注意事項：
1.一個頁面有多個圖表的情況下，自動產生圖表ID。
// radar-chart.vue （子组件）
<template>
<p :id="chartId" style="height: 100%; width: 100%;"></p>
</template>
<script>
let chartIdSeed = 1;
export default {
data() {
return {
chartId: 1,
};
},
mounted() {
let vm = this;
vm.chartId = 'radar-chart_' + chartIdSeed++;
},
methods: {
let vm = this;
let dom = document.getElementById(vm.chartId);
}
};
</script>2.圖表資料屬性用 props 接收，圖表預設配置屬性用 defaultConfig 保存，父組件傳入的配置屬性 chartConfig 透過 $attrs 直接取得，最終合併為 finallyConfig 使用，利於擴展與維護。
// radar-chart.vue （子组件）
<script>
export default {
data() {
return {
// 默认配置项。以下配置项可以在父组件 :chartConfig 进行配置，会覆盖这里的默认配置
defaultConfig: {
tooltipShow: true
},
finallyConfig: {}, // 最后配置项
};
},
mounted() {
// 在这里合并默认配置与父组件传进来的配置
vm.finallyConfig = Object.assign({}, vm.defaultConfig, vm.$attrs.chartConfig);
},
methods: {
initOption() {
vm.option = {
tooltip: {
show: vm.finallyConfig.tooltipShow, // 在这里使用最终配置
},
}
},
}
};
</script>3.使用watch 監聽圖表資料更新
// radar-chart.vue （子组件）
watch: {
legendData() {
this.$nextTick(() => {
this.ready();
});
}
},4.新增視窗resize 事件與圖表click 事件
// radar-chart.vue （子组件）
export default {
data() {
return {
chartResizeTimer: null, // 定时器，用于resize事件函数节流
};
},
methods: {
ready() {
// 添加窗口resize事件
window.addEventListener('resize', vm.handleChartResize);
// 触发父组件的 @chartClick 事件
vm.myChart.on('click', function(param) {
vm.$emit('chartClick', param);
});
},
// 处理窗口resize事件
handleChartResize() {
let vm = this;
clearTimeout(vm.chartResizeTimer);
vm.chartResizeTimer = setTimeout(function() {
vm.myChart && vm.myChart.resize();
}, 200);
},
},
beforeDestroy() {
// 释放该图例资源，较少页面卡顿情况
if (this.myChart) this.myChart.clear();
// 移除窗口resize事件
window.removeEventListener('resize', this.handleChartResize);
}
};【相關推薦：《vue.js教程》】
以上是Vue如何封裝Echarts圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
总结分享几个 VueUse 最佳组合，快来收藏使用吧！Jul 20, 2022 pm 08:40 PMVueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合，希望对大家有所帮助！
聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PMVue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。
如何使用VueRouter4.x？快速上手指南Jul 13, 2022 pm 08:11 PM如何使用VueRouter4.x？下面本篇文章就来给大家分享快速上手教程，介绍一下10分钟快速上手VueRouter4.x的方法，希望对大家有所帮助！
Github 上 8 个不可错过的 Vue 项目，快来收藏！！Jun 17, 2022 am 10:37 AM本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目，都是非常棒的项目，希望当中有您想要收藏的那一个。
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
