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

vue3封裝echarts組件最佳形式詳解

 更新時間:2022年11月16日 09:20:41   作者:遠山無期  
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

思路

項目中經(jīng)常用到echarts,不做封裝直接拿來使用也行,但不可避免要寫很多重復(fù)的配置代碼,封裝稍不注意又會過度封裝,丟失了擴展性和可讀性。始終沒有找到一個好的實踐,偶然看到一篇文章,給了靈感。找到了一個目前認為用起來很舒服的封裝。

  • 結(jié)合項目需求,針對不同類型的圖表,配置基礎(chǔ)的默認通用配置,例如x/y,label,圖例等的樣式
  • 創(chuàng)建圖表組件實例(不要使用id,容易重復(fù),還需要操作dom,直接用ref獲取當前組件的el來創(chuàng)建圖表),提供type(圖表類型),和options(圖表配置)兩個必要屬性
  • 根據(jù)傳入type,加載默認的圖表配置
  • 深度監(jiān)聽傳入的options,變化時更新覆蓋默認配置,更新圖表

注意要確保所有傳入圖表組件的options數(shù)組都是shallowReactive類型,避免數(shù)組量過大,深度響應(yīng)式導(dǎo)致性能問題

目錄結(jié)構(gòu)

├─v-charts
│  │  index.ts     // 導(dǎo)出類型定義以及圖表組件方便使用
│  │  type.d.ts    // 各種圖表的類型定義
│  │  useCharts.ts // 圖表hooks
│  │  v-charts.vue // echarts圖表組件
│  │
│  └─options // 圖表配置文件
│          bar.ts
│          gauge.ts
│          pie.ts

組件代碼

v-charts.vue

<template>
  <div class="v-charts" ref="chartRef" />
</template>
<script lang="ts" setup>
import { PropType } from "vue";
import * as echarts from "echarts/core";
import { useCharts, ChartType } from "./useCharts";
defineOptions({
  name: "VCharts"
});
const props = defineProps({
  type: {
    type: String as PropType<ChartType>,
    default: "bar"
  },
  options: {
    type: Object as PropType<echarts.EChartsCoreOption>,
    default: () => ({})
  }
});
const { type, options } = toRefs(props);
const chartRef = shallowRef();
const { charts, setOptions, initChart } = useCharts({ type, el: chartRef });
onMounted(async () => {
  await initChart();
  setOptions(options.value);
});
watch( // 出于性能考慮,所有傳入組件options的數(shù)據(jù)都要是shallowReactive類型,避免不必要的響應(yīng)式轉(zhuǎn)換
  options,
  () => {
    setOptions(options.value);
  },
  {
    deep: true
  }
);
defineExpose({
  $charts: charts
});
</script>
<style lang="scss" scoped>
.v-charts {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
</style>

useCharts.ts

import { ChartType } from "./type";
import * as echarts from "echarts/core";
import { ShallowRef, Ref } from "vue";
import {
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from "echarts/components";
import { BarChart, LineChart, PieChart, GaugeChart } from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
// 異步導(dǎo)入options中的所有默認配置項
const optionsModules = import.meta.glob<{ default: echarts.EChartsCoreOption }>("./options/**.ts");
interface ChartHookOption {
  type?: Ref<ChartType>;
  el: ShallowRef<HTMLElement>;
}
/**
 *  視口變化時echart圖表自適應(yīng)調(diào)整
 */
class ChartsResize {
  #charts = new Set<echarts.ECharts>(); // 緩存已經(jīng)創(chuàng)建的圖表實例
  #timeId = null;
  constructor() {
    window.addEventListener("resize", this.handleResize.bind(this)); // 視口變化時調(diào)整圖表
  }
  getCharts() {
    return [...this.#charts];
  }
  handleResize() {
    clearTimeout(this.#timeId);
    this.#timeId = setTimeout(() => {
      this.#charts.forEach(chart => {
        chart.resize();
      });
    }, 500);
  }
  add(chart: echarts.ECharts) {
    this.#charts.add(chart);
  }
  remove(chart: echarts.ECharts) {
    this.#charts.delete(chart);
  }
  removeListener() {
    window.removeEventListener("resize", this.handleResize);
  }
}
export const chartsResize = new ChartsResize();
// 注冊創(chuàng)建echarts實例
export const useCharts = ({ type, el }: ChartHookOption) => {
  echarts.use([
    BarChart,
    LineChart,
    BarChart,
    PieChart,
    GaugeChart,
    TitleComponent,
    LegendComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
  ]);
  const charts = shallowRef<echarts.ECharts>();
  let options!: echarts.EChartsCoreOption;
  //根據(jù)要創(chuàng)建的圖表類型,加載對應(yīng)的默認配置項
  const getOptions = async () => {
    const moduleKey = `./options/${type.value}.ts`;
    const { default: defaultOption } = await optionsModules[moduleKey]();
    return defaultOption;
  };
  //更新圖表
  const setOptions = (opt: echarts.EChartsCoreOption) => {
    charts.value.setOption(opt);
  };
  const initChart = async () => {
    charts.value = echarts.init(el.value);
    options = await getOptions();
    charts.value.setOption(options);
    chartsResize.add(charts.value); // 將圖表實例添加到緩存中
  };
  onBeforeUnmount(() => {
    chartsResize.remove(charts.value); // 移除緩存
  });
  return {
    charts,
    setOptions,
    initChart
  };
};
export const chartsOptions = <T extends echarts.EChartsCoreOption>(option: T) => shallowReactive<T>(option);
export * from "./type.d";

type.d.ts

/*
 * @Description:
 * @Version: 2.0
 * @Autor: GC
 * @Date: 2022-03-02 10:21:33
 * @LastEditors: GUOCHAO82
 * @LastEditTime: 2022-06-02 17:45:48
 */
// import * as echarts from 'echarts/core';
import * as echarts from 'echarts'
import { XAXisComponentOption, YAXisComponentOption } from 'echarts';
import {
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption,
  AriaComponentOption,
  AxisPointerComponentOption,
  LegendComponentOption,
} from 'echarts/components';// 組件
import {
  // 系列類型的定義后綴都為 SeriesOption
  BarSeriesOption,
  LineSeriesOption,
  PieSeriesOption,
  FunnelSeriesOption,
  GaugeSeriesOption
} from 'echarts/charts';
type Options = LineECOption|BarECOption|PieECOption|FunnelOption
type BaseOptionType = XAXisComponentOption|YAXisComponentOption|TitleComponentOption|TooltipComponentOption|LegendComponentOption|GridComponentOption
type BaseOption = echarts.ComposeOption<BaseOptionType>
type LineECOption = echarts.ComposeOption<LineSeriesOption|BaseOptionType>
type BarECOption = echarts.ComposeOption<BarSeriesOption|BaseOptionType>
type PieECOption = echarts.ComposeOption<PieSeriesOption|BaseOptionType>
type FunnelOption = echarts.ComposeOption<FunnelSeriesOption|BaseOptionType>
type GaugeECOption = echarts.ComposeOption<GaugeSeriesOption|GridComponentOption>
type EChartsOption = echarts.EChartsOption;
type ChartType = 'bar'|'line'|'pie' | 'gauge'
export {
    BaseOption,
    ChartType,
    LineECOption, //
    BarECOption,
    Options,
    PieECOption,
    FunnelOption,
    GaugeECOption,
    EChartsOption
}

options/bar.ts

import { BarECOption } from "../type";
const options: BarECOption = {
  legend: {},
  tooltip: {},
  xAxis: {
    type: "category",
    axisLine: {
      lineStyle: {
        // type: "dashed",
        color: "#C8D0D7"
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: "#7D8292"
    }
  },
  yAxis: {
    type: "value",
    min: "dataMin",
    alignTicks: true,
    splitLine: {
      show: true,
      lineStyle: {
        color: "#C8D0D7",
        type: "dashed"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#7D8292"
      }
    }
  },
  grid: {
    left: 60,
    bottom: "8%",
    top: "20%"
  },
  series: [
    {
      type: "bar",
      barWidth: 20,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          x2: 0,
          y: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#62A5FF" // 0% 處的顏色
            },
            {
              offset: 1,
              color: "#3365FF" // 100% 處的顏色
            }
          ]
        }
      }
      // label: {
      //   show: true,
      //   position: "top"
      // }
    }
  ]
};
export default options;

項目中使用

index.vue

<template>
  <div class="home">
    <section class="bottom">
      <div class="device-statistics chart-box">
        <div class="title">累計設(shè)備接入統(tǒng)計</div>
        <v-charts type="bar" :options="statisDeviceAccess" />
      </div>
      <div class="coordinate-statistics chart-box">
        <div class="title">坐標數(shù)據(jù)接入統(tǒng)計</div>
        <v-charts type="bar" :options="statisCoordAccess" />
      </div>
    </section>
  </div>
</template>
<script lang="ts" setup>
import {
  useStatisDeviceByUserObject,
} from "./hooks";
// 設(shè)備分類統(tǒng)計
const { options: statisDeviceByUserObjectOpts } = useStatisDeviceByUserObject();
</script>

/hooks/useStatisDeviceByUserObject.ts

export const useStatisDeviceByUserObject = () => {
  // 使用chartsOptions確保所有傳入v-charts組件的options數(shù)據(jù)都是## shallowReactive淺層作用形式,避免大量數(shù)據(jù)導(dǎo)致性能問題
  const options = chartsOptions<BarECOption>({
    yAxis: {},
    xAxis: {},
    series: []
  });
  const init = async () => {
    const xData = [];
    const sData = [];
    const dicts = useHashMapDics<["dev_user_object"]>(["dev_user_object"]);
    const data = await statisDeviceByUserObject();
    dicts.dictionaryMap.dev_user_object.forEach(({ label, value }) => {
      if (value === "6") return; // 排除其他
      xData.push(label);
      const temp = data.find(({ name }) => name === value);
      sData.push(temp?.qty || 0);
      // 給options賦值時要注意options是淺層響應(yīng)式
      options.xAxis = { data: xData }; 
      options.series = [{ ...options.series[0], data: sData }];
    });
  };
  onMounted(() => {
    init();
  });
  return {
    options
  };
};

以上就是vue3封裝echarts組件最佳形式詳解的詳細內(nèi)容,更多關(guān)于vue3封裝echarts組件的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 使用vue指令實現(xiàn)吸頂效果

    使用vue指令實現(xiàn)吸頂效果

    要想實現(xiàn)一個吸頂效果不是很難,網(wǎng)絡(luò)上有很多教程,其中有一種就是通過fiexd加top來實現(xiàn),今天突然就想做一個吸頂效果,因為最近都在用vue,所以想用vue來做一個吸頂效果的案例,感興趣的朋友可以參考下
    2023-11-11
  • vue執(zhí)行配置選項npm?run?serve的本質(zhì)圖文詳解

    vue執(zhí)行配置選項npm?run?serve的本質(zhì)圖文詳解

    本地開發(fā)一般通過執(zhí)行npm run serve命令來啟動項目,那這行命令到底存在什么魔法?下面這篇文章主要給大家介紹了關(guān)于vue執(zhí)行配置選項npm?run?serve的本質(zhì)的相關(guān)資料,需要的朋友可以參考下
    2023-05-05
  • vue3+vite+axios?配置連接后端調(diào)用接口的實現(xiàn)方法

    vue3+vite+axios?配置連接后端調(diào)用接口的實現(xiàn)方法

    這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實現(xiàn)方法,在vite.config.ts文件中添加配置,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • Vuejs 實現(xiàn)簡易 todoList 功能 與 組件實例代碼

    Vuejs 實現(xiàn)簡易 todoList 功能 與 組件實例代碼

    本文通過實例代碼給大家介紹了Vuejs 實現(xiàn)簡易 todoList 功能 與 組件,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • Vue3中setup方法的用法詳解

    Vue3中setup方法的用法詳解

    在vue3版本中,引入了一個新的函數(shù),叫做setup。這篇文章將為大家詳細介紹一下Vue3中setup方法的用法,感興趣小伙伴的可以了解一下
    2022-07-07
  • Vue函數(shù)式組件專篇深入分析

    Vue函數(shù)式組件專篇深入分析

    Vue提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級組件之函數(shù)式組件的使用場景與源碼分析的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue實現(xiàn)商品列表的添加刪除實例講解

    vue實現(xiàn)商品列表的添加刪除實例講解

    在本篇內(nèi)容里小編給大家分享的是關(guān)于vue實現(xiàn)商品列表的添加刪除實例講解,有興趣的朋友們可以參考下。
    2020-05-05
  • 詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包

    詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包

    這篇文章主要介紹了詳解vue-cli快速構(gòu)建vue應(yīng)用并實現(xiàn)webpack打包,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • Vue?elementui如何實現(xiàn)表格selection的默認勾選

    Vue?elementui如何實現(xiàn)表格selection的默認勾選

    這篇文章主要介紹了Vue?elementui如何實現(xiàn)表格selection的默認勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • 使用Vue實現(xiàn)簡易的車牌輸入鍵盤

    使用Vue實現(xiàn)簡易的車牌輸入鍵盤

    這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)簡易的車牌輸入鍵盤效果,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解下
    2023-11-11

最新評論