" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3之向echarts組件傳值的問題分析

 更新時間：2024年03月11日 09:26:33   作者：Vince_13  
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3向echarts組件傳值的問題

這幾天在工作中遇到一個需求，我想要實現(xiàn)從vue3中選擇不同的選項卡，進而改變圖表的展示，一開始不知道怎么將vue3所獲取的值傳入到echarts組件中，來對其進行雙向綁定。

經(jīng)過一番研究，終于解決了這個問題

先看代碼結構

可以看到這里的代碼結構為父組件向子組件傳值

以下為選項卡的結構，其中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>

在上述選項卡中，含有一個change函數(shù)，函數(shù)的作用為，將選項卡中的className屬性傳遞給cur變量，為了改變選項卡選中之后的樣式改變。

進入正題

  <echarts
    :data="echartData"
    :type="cur"
    :xData="xDataArr"
    :category="subclassiFication"
  />

在子組件echarts中需要傳入數(shù)據(jù)，類型，橫坐標（縱坐標的數(shù)據(jù)由series的data提供），以及細分類的屬性

子組件中接收數(shù)據(jù)

const props = defineProps({
  data: {},
  type: "",
  xData: [],
  category: "",
});

注意：傳入的數(shù)據(jù)類型需要和定義的類型一致

因為要實現(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: "項鏈",
      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: [],
    },
  ],
};
 
// 指定圖表的配置項和數(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);
};

總結

以上為vue3與子組件echarts進行通信的流程，僅為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論