vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3向echarts组件传值

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进行通信的流程,仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文