vue3之向echarts组件传值的问题分析
作者：Vince_13
这篇文章主要介绍了vue3之向echarts组件传值的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3向echarts组件传值的问题
这几天在工作中遇到一个需求，我想要实现从vue3中选择不同的选项卡，进而改变图表的展示，一开始不知道怎么将vue3所获取的值传入到echarts组件中，来对其进行双向绑定。
经过一番研究，终于解决了这个问题
先看代码结构
可以看到这里的代码结构为父组件向子组件传值
以下为选项卡的结构，其中listOfSection为ref对象，其中的数据由接口异步提供（使用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>
在上述选项卡中，含有一个change函数，函数的作用为，将选项卡中的className属性传递给cur变量，为了改变选项卡选中之后的样式改变。
进入正题
<echarts
:data="echartData"
:type="cur"
:xData="xDataArr"
:category="subclassiFication"
/>在子组件echarts中需要传入数据，类型，横坐标（纵坐标的数据由series的data提供），以及细分类的属性
子组件中接收数据
const props = defineProps({
data: {},
type: "",
xData: [],
category: "",
});注意：传入的数据类型需要和定义的类型一致
因为要实现监听效果，我使用了watch函数，来监听组件之间props的数值变化，来动态改变series该有的数据
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: "战士",
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: "项链",
type: "bar",
stack: "pos",
data: [],
},
{
name: "戒指",
type: "bar",
stack: "pos",
data: [],
},
{
name: "护符",
type: "bar",
stack: "pos",
data: [],
},
{
name: "腰带",
type: "bar",
stack: "pos",
data: [],
},
],
quality: [
{
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: [],
},
{
name: "暗金",
type: "bar",
stack: "quality",
data: [],
},
],
other: [
{
type: "bar",
data: [],
},
],
};
// 指定图表的配置项和数据
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: {
//数值之后添加单位
formatter: tag ? "{value}K" : "value",
},
},
series,
};
};//刷新图表
const freshEchart = (option) => {
echartIns && echartIns.clear();
echartIns.setOption(option);
};总结
以上为vue3与子组件echarts进行通信的流程，仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。