vue3之向echarts組件傳值的問題分析
更新時(shí)間：2024年03月11日 09:26:33 作者：Vince_13
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3向echarts組件傳值的問題
這幾天在工作中遇到一個需求，我想要實(shí)現(xiàn)從vue3中選擇不同的選項(xiàng)卡，進(jìn)而改變圖表的展示，一開始不知道怎么將vue3所獲取的值傳入到echarts組件中，來對其進(jìn)行雙向綁定。
經(jīng)過一番研究，終于解決了這個問題
先看代碼結(jié)構(gòu)
可以看到這里的代碼結(jié)構(gòu)為父組件向子組件傳值
以下為選項(xiàng)卡的結(jié)構(gòu)，其中l(wèi)istOfSection為ref對象，其中的數(shù)據(jù)由接口異步提供（使用axios）
<el-row id="data">
<el-col
:span="3"
v-for="item in listOfSection"
:key="item.className"
@click="change(item)"
>
<div class="grid-content ep-bg-purple" />
<div
:class="[
'genernal',
cur === item.className ? 'CountPanelClick' : 'CountPanelNomal',
]"
>
<div>
<span class="values">{{ item.value }}</span>
<br />
<span class="names">{{ item.name }}</span>
</div>
</div>
</el-col>
<el-col :span="3" v-for="item in scale" :key="item.className">
<div class="grid-content ep-bg-purple" />
<div :class="['genernal', 'CountPanelNomal']">
<div>
<span class="values">{{ item.value }}</span>
<br />
<span class="names">{{ item.name }}</span>
</div>
</div>
</el-col>
</el-row>
在上述選項(xiàng)卡中，含有一個change函數(shù)，函數(shù)的作用為，將選項(xiàng)卡中的className屬性傳遞給cur變量，為了改變選項(xiàng)卡選中之后的樣式改變。
進(jìn)入正題
<echarts
:data="echartData"
:type="cur"
:xData="xDataArr"
:category="subclassiFication"
/>在子組件echarts中需要傳入數(shù)據(jù)，類型，橫坐標(biāo)（縱坐標(biāo)的數(shù)據(jù)由series的data提供），以及細(xì)分類的屬性
子組件中接收數(shù)據(jù)
const props = defineProps({
data: {},
type: "",
xData: [],
category: "",
});注意：傳入的數(shù)據(jù)類型需要和定義的類型一致
因?yàn)橐獙?shí)現(xiàn)監(jiān)聽效果，我使用了watch函數(shù)，來監(jiān)聽組件之間props的數(shù)值變化，來動態(tài)改變series該有的數(shù)據(jù)
watch(props, (newData) => {
const { data, category, type } = newData;
const title = titles[type];
const includes = ["totals", "totalValue", "seniorTotals"];
let newSeries;
console.log(category);
if (includes.includes(type)) {
newSeries = series[category];
let len = newSeries.length;
for (let i = 0; i < len; i++) {
newSeries[i].data = data[len - 1 - i];
}
} else {
newSeries = series["other"];
newSeries[0].data = Object.values(data);
}
console.log(category, newSeries);
const option = getOptions(newSeries, title);
freshEchart(option);
});接下來展示一些其余的必要代碼
const series = {
level: [
{
name: "200",
type: "bar",
stack: "level",
data: [],
},
{
name: "250",
type: "bar",
stack: "level",
data: [],
},
{
name: "300",
type: "bar",
stack: "level",
data: [],
},
{
name: "350",
type: "bar",
stack: "level",
data: [],
},
{
name: "400",
type: "bar",
stack: "level",
data: [],
},
{
name: "450",
type: "bar",
stack: "level",
data: [],
},
],
profession: [
{
name: "戰(zhàn)士",
type: "bar",
stack: "profession",
data: [],
},
{
name: "法師",
type: "bar",
stack: "profession",
data: [],
},
{
name: "輔助",
type: "bar",
stack: "profession",
data: [],
},
{
name: "坦克",
type: "bar",
stack: "profession",
data: [],
},
],
pos: [
{
name: "項(xiàng)鏈",
type: "bar",
stack: "pos",
data: [],
},
{
name: "戒指",
type: "bar",
stack: "pos",
data: [],
},
{
name: "護(hù)符",
type: "bar",
stack: "pos",
data: [],
},
{
name: "腰帶",
type: "bar",
stack: "pos",
data: [],
},
],
quality: [
{
name: "藍(lán)",
type: "bar",
stack: "quality",
data: [],
},
{
name: "紫",
type: "bar",
stack: "quality",
data: [],
},
{
name: "橙",
type: "bar",
stack: "quality",
data: [],
},
{
name: "紅",
type: "bar",
stack: "quality",
data: [],
},
{
name: "金",
type: "bar",
stack: "quality",
data: [],
},
{
name: "暗金",
type: "bar",
stack: "quality",
data: [],
},
],
other: [
{
type: "bar",
data: [],
},
],
};
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
const getOptions = (series, title, tag = true) => {
return {
title: {
text: title,
textStyle: {
fontWeight: "bolder",
fontSize: 25,
},
left: 700,
},
tooltip: {
trigger: "item",
},
legend: {
left: "right",
},
xAxis: {
type: "category",
data: props.xData,
},
yAxis: {
type: "value",
axisLabel: {
//數(shù)值之后添加單位
formatter: tag ? "{value}K" : "value",
},
},
series,
};
};//刷新圖表
const freshEchart = (option) => {
echartIns && echartIns.clear();
echartIns.setOption(option);
};總結(jié)
以上為vue3與子組件echarts進(jìn)行通信的流程，僅為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
webStorm?debug?vue項(xiàng)目的兩種方案圖文詳解
WebStorm作為一款功能強(qiáng)大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開發(fā)和調(diào)試Vue應(yīng)用,這篇文章主要給大家介紹了關(guān)于webStorm?debug?vue項(xiàng)目的兩種方案,需要的朋友可以參考下2024-07-07
在前后端分離架構(gòu)中,vue項(xiàng)目通常需要部署到nginx服務(wù)器以實(shí)現(xiàn)生產(chǎn)環(huán)境運(yùn)行,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
對于中小型企業(yè),vue應(yīng)用越來越多,學(xué)習(xí)vue相對于react的成本要低點(diǎn),入門相對簡單。這篇文章主要給大家介紹了關(guān)于Vue接口封裝的相關(guān)資料,需要的朋友可以參考下2021-05-05
Vue3中從一個頁面(index)傳輸數(shù)值到另一個頁面(form)的方法詳解
在 Vue 3 開發(fā)中,經(jīng)常需要在不同組件或頁面之間傳遞數(shù)據(jù),例如從 index 頁面獲取某個數(shù)值（如 cntr、tradeId）后,將其傳輸?shù)?nbsp;form 頁面進(jìn)行填寫或編輯,本文將介紹幾種常見的數(shù)據(jù)傳輸方法,并為每種方法提供一個小的 Demo 代碼示例,需要的朋友可以參考下2025-02-02
在vue3項(xiàng)目開發(fā)中,我們常常會遇到父子組件相互調(diào)用的場景,下面主要以setup語法糖格式詳細(xì)聊聊父子組件那些事兒,并通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-05-05
文章介紹了使用vue-pdf@4.3.0時(shí)遇到的上傳特殊PDF文件無法正常預(yù)覽的問題,通過查看控制臺報(bào)錯信息,發(fā)現(xiàn)是因?yàn)槿鄙僮煮w導(dǎo)致的,解決方法是修改pdfjs-dist庫的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應(yīng)用這個修改,使用了patch-package插件,感興趣的朋友一起看看吧2024-11-11
Vue中this.$nextTick()方法的使用及代碼示例
$nextTick()是Vue.js框架中的一個方法，它主要用于DOM操作，當(dāng)我們修改Vue組件中的數(shù)據(jù)時(shí)，Vue.js會在下次事件循環(huán)前自動更新視圖，并異步執(zhí)行$nextTick()中的回調(diào)函數(shù)，本文主要介紹了Vue中this.$nextTick()方法的使用及代碼示例,需要的朋友可以參考下2023-05-05
map()函數(shù)定義在JS的array中,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報(bào)錯,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue動態(tài)加載路由的3種方式總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06