Echarts est souvent utilisé dans le projet, et il peut être utilisé directement sans encapsulation, mais il est inévitable d'écrire beaucoup de codes de configuration répétitifs, et si l'encapsulation n'est pas prudente, elle sera sur-encapsulée, perdant en évolutivité et en lisibilité. Je n'ai pas encore trouvé de bonne pratique, mais j'ai vu un article par hasard, qui m'a inspiré. J'ai trouvé un package que je me sens à l'aise d'utiliser jusqu'à présent.

train de pensée

1. En combinaison avec les exigences du projet, configurez la configuration générale par défaut de base pour différents types de graphiques, tels que x/y, étiquette, légende, etc.
2. Créez des instances de composant de graphique (ne pas utiliser id, facile à répéter et doit être exploité dom, utilisez directement refGet Le composant actuel est elutilisé pour créer un graphique), fournissant type(type de graphique) et options(configuration du graphique) deux attributs nécessaires
3. Selon l'incoming type, chargez la configuration de graphique par défaut
4. Surveillance approfondie de options, mettre à jour lorsqu'il change Remplacer la configuration par défaut, mettre à jour Figure
5. Fournit la prise en charge des événements et prend en charge echartla liaison à la demande et l'interaction des événements

Faites attention à vous assurer que tous les tableaux d'options passés dans le composant graphique sont de shallowReactivetype, pour éviter la grande quantité de tableaux, et la réponse en profondeur causera des problèmes de performances

Structure du répertoire

├─v-charts
││index.ts // 导出类型定义以及图表组件方便使用
││type.d.ts// 各种图表的类型定义
││useCharts.ts // 图表hooks
││v-charts.vue // echarts图表组件
││
│└─options // 图表配置文件
│bar.ts
│gauge.ts
│pie.ts

code composant

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, ChartsEvents } from "./useCharts";

/**
 * echarts事件类型
 * 截至目前，vue3类型声明参数必须是以下内容之一，暂不支持外部引入类型参数
 * 1. 类型字面量
 * 2. 在同一文件中的接口或类型字面量的引用
 * // 文档中有说明：https://cn.vuejs.org/api/sfc-script-setup.html#typescript-only-features
 */
interface EventEmitsType {<T extends ChartsEvents.EventType>(e: `${T}`, event: ChartsEvents.Events[Uncapitalize<T>]): void;
}

defineOptions({name: "VCharts"
});

const props = defineProps({type: {type: String as PropType<ChartType>,default: "bar"},options: {type: Object as PropType<echarts.EChartsCoreOption>,default: () => ({})}
});

// 定义事件，提供ts支持，在组件使用时可获得友好提示
defineEmits<EventEmitsType>();

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,() => {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";

const optionsModules = import.meta.glob<{ default: echarts.EChartsCoreOption }>("./options/**.ts");

interface ChartHookOption {type?: Ref<ChartType>;el: ShallowRef<HTMLElement>;
}

/**
 *视口变化时echart图表自适应调整
 */
class ChartsResize {#charts = new Set<echarts.ECharts>(); // 缓存已经创建的图表实例#timeId = null;constructor() {window.addEventListener("resize", this.handleResize.bind(this)); // 视口变化时调整图表}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();

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;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); // 将图表实例添加到缓存中initEvent(); // 添加事件支持};/** * 初始化事件,按需绑定事件 */const attrs = useAttrs();const initEvent = () => {Object.keys(attrs).forEach(attrKey => {if (/^on/.test(attrKey)) {const cb = attrs[attrKey];attrKey = attrKey.replace(/^on(Chart)?/, "");attrKey = `${attrKey[0]}${attrKey.substring(1)}`;typeof cb === "function" && charts.value?.on(attrKey, cb as () => void);}});};onBeforeUnmount(() => {chartsResize.remove(charts.value); // 移除缓存});return {charts,setOptions,initChart,initEvent};
};

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: GC
 * @LastEditTime: 2022-06-02 17:45:48
 */
// import * as echarts from 'echarts/core';
import * as echarts from 'echarts'
import { XAXisComponentOption, YAXisComponentOption } from 'echarts';

import { ECElementEvent, SelectChangedPayload, HighlightPayload,} from 'echarts/types/src/util/types'

import {TitleComponentOption,TooltipComponentOption,GridComponentOption,DatasetComponentOption,AriaComponentOption,AxisPointerComponentOption,LegendComponentOption,
} from 'echarts/components';// 组件
import {// 系列类型的定义后缀都为 SeriesOptionBarSeriesOption,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'

// echarts事件
namespace ChartsEvents {// 鼠标事件类型type MouseEventType = 'click' | 'dblclick' | 'mousedown' | 'mousemove' | 'mouseup' | 'mouseover' | 'mouseout' | 'globalout' | 'contextmenu' // 鼠标事件类型type MouseEvents = {[key in Exclude<MouseEventType,'globalout'|'contextmenu'> as `chart${Capitalize<key>}`] :ECElementEvent}// 其他的事件类型极参数interface Events extends MouseEvents {globalout:ECElementEvent,contextmenu:ECElementEvent,selectchanged: SelectChangedPayload;highlight: HighlightPayload;legendselected: { // 图例选中后的事件type: 'legendselected',// 选中的图例名称name: string// 所有图例的选中状态表selected: {[name: string]: boolean}};// ... 其他类型的事件在这里定义}// echarts所有的事件类型type EventType = keyof Events
}

export {BaseOption,ChartType,LineECOption,BarECOption,Options,PieECOption,FunnelOption,GaugeECOption,EChartsOption,ChartsEvents
}

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",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;

utilisé dans le projet

index.vue

<template><div class="home"><section class="bottom"><div class="device-statistics chart-box"><div class="title">累计设备接入统计</div><v-chartstype="bar":options="statisDeviceByUserObjectOpts"@selectchanged="selectchanged"@chart-click="handleChartClick"/></div><div class="coordinate-statistics chart-box"><div class="title">坐标数据接入统计</div><v-charts type="bar" :options="statisCoordAccess" /></div></section></div>
</template>
<script lang="ts" setup> import {useStatisDeviceByUserObject,
} from "./hooks";
// 设备分类统计
const { options: statisDeviceByUserObjectOpts,selectchanged,handleChartClick } = useStatisDeviceByUserObject(); </script>

/hooks/useStatisDeviceByUserObject.ts

export const useStatisDeviceByUserObject = () => {// 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题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是浅层响应式options.xAxis = { data: xData }; options.series = [{ ...options.series[0], data: sData }];});};// 事件const selectchanged = (params: ChartsEvents.Events["selectchanged"]) => {console.log(params, "选中图例了");};const handleChartClick = (params: ChartsEvents.Events["chartClick"]) => {console.log(params, "点击了图表");};onMounted(() => {init();});return {options，selectchanged,handleChartClick};
};

Entrez @ lors de l'utilisation pour voir tous les événements pris en charge par le composant :

Enfin

Récemment, j'ai également trié une note JavaScript et ES, un total de 25 points de connaissance importants, et expliqué et analysé chaque point de connaissance. Il peut vous aider à maîtriser rapidement les connaissances pertinentes de JavaScript et ES et à améliorer l'efficacité du travail.

Amis dans le besoin, vous pouvez cliquer sur la carte ci-dessous pour recevoir et partager gratuitement

La meilleure forme d'encapsulation du composant echarts dans vue3