vue3之向echarts组件传值的问题分析

更新时间：2024年03月11日 09:26:33 作者：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进行通信的流程，仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue axios 二次封装的示例代码
本篇文章主要介绍了vue axios 二次封装的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
vue中使用moment设置倒计时的方法
这篇文章给大家介绍了vue中使用moment设置倒计时的方法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-02-02
Vue如何设置button的disable属性
这篇文章主要介绍了Vue如何设置button的disable属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue鼠标hover(悬停)改变background-color移入变色问题
这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
在vue中v-for循环遍历图片不显示错误的解决方案
这篇文章主要介绍了在vue中v-for循环遍历图片不显示错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
vue项目依赖升级报错处理方式
这篇文章主要介绍了vue项目依赖升级报错处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
在vue使用echarts报错:invalid dom问题
这篇文章主要介绍了在vue使用echarts报错:invalid dom问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Iview Table组件中各种组件扩展的使用
这篇文章主要介绍了Iview Table组件中各种组件扩展的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
讲解vue-router之什么是动态路由
这篇文章主要介绍了讲解vue-router之什么是动态路由，详细的介绍了什么是动态路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue表单验证插件Vue Validator使用方法详解
这篇文章主要为大家详细介绍了Vue表单验证插件Vue Validator使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04