解决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提供），以及细分类的属性

子组件中接收数据

扫描二维码关注公众号，回复： 17186468 查看本文章

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进行通信的流程，希望对您有帮助