Add 添加echarts通用调用组件

UI/VAP_V3.VUE/src/core/plugins/echarts.ts

@@ -0,0 +1,109 @@
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from "echarts/core"
+// 类型，组件后缀都为 charts
+import {
+	LineChart, // 折线图
+	BarChart, // 柱状图
+	PieChart, // 饼图
+	ScatterChart, // 散点图
+	GaugeChart, // 仪表盘
+	HeatmapChart // 热力图
+} from "echarts/charts"
+
+// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+	GridComponent, // 网格布局
+	TooltipComponent, // 提示框
+	TitleComponent, // 标题
+	LegendComponent, // 图例
+	DataZoomComponent, // 数据缩放
+	VisualMapComponent, // 视觉映射
+	MarkLineComponent, // 标记线
+	MarkPointComponent, // 标记点
+	GraphicComponent, // 图形元素
+	DatasetComponent, // 数据集
+	TransformComponent, // 数据转换
+	PolarComponent // 极坐标
+} from "echarts/components"
+
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from "echarts/features"
+
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from "echarts/renderers"
+
+// 注册必须的组件
+echarts.use([
+	// 渲染器
+	CanvasRenderer,
+	LineChart,
+	BarChart,
+	PieChart,
+	ScatterChart,
+	GaugeChart,
+	HeatmapChart,
+	GridComponent,
+	TooltipComponent,
+	TitleComponent,
+	LegendComponent,
+	DataZoomComponent,
+	VisualMapComponent,
+	MarkLineComponent,
+	MarkPointComponent,
+	GraphicComponent,
+	DatasetComponent,
+	TransformComponent,
+	PolarComponent
+])
+
+const buildEchartsOptions = (options: any, themeColors?: string[], color?: string) => {
+	if (!themeColors) themeColors = []
+	if (!color) color = "#666666"
+	const _options: any = {
+		color: themeColors,
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "3%",
+			top: "20%",
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: ["20%", "20%"],
+			nameTextStyle: {
+				color: color
+			},
+
+			axisTick: {
+				lineStyle: {
+					color: color
+				}
+			},
+			data: []
+		},
+		yAxis: {
+			type: "value",
+			nameTextStyle: {
+				color: color
+			},
+			splitNumber: 3,
+			splitLine: {
+				show: true,
+				lineStyle: {
+					type: [5, 10],
+					color: color
+				}
+			},
+			axisTick: {
+				lineStyle: {
+					color: color
+				}
+			}
+		},
+		series: []
+	}
+	return { ..._options, ...options }
+}
+
+export { echarts, buildEchartsOptions }

UI/VAP_V3.VUE/src/core/use/use-echarts.ts

@@ -0,0 +1,174 @@
+import { echarts } from "@@/plugins/echarts"
+import { useDebounceFn, useResizeObserver } from "@vueuse/core"
+import type { EChartsCoreOption, EChartsInitOpts, SetOptionOpts } from "echarts"
+
+type NullType<T> = T | null
+
+interface ConfigProps {
+	/**
+	 * init函数基本配置
+	 * @see https://echarts.apache.org/zh/api.html#echarts.init
+	 */
+	echartsInitOpts?: EChartsInitOpts
+	/**
+	 * 是否显示loading
+	 * @default false
+	 */
+	loading?: boolean
+	/**
+	 * Loading配置项
+	 * @see https://echarts.apache.org/zh/api.html#echartsInstance.showLoading
+	 */
+	loadingOption?: object
+	/**
+	 * 是否开启过渡动画
+	 * @default true
+	 */
+	animation?: boolean
+	/**
+	 * 过渡动画持续时间(ms)
+	 * @default 300
+	 */
+	animationDuration?: number
+	/**
+	 * 是否自动调整大小
+	 * @default true
+	 */
+	autoResize?: boolean
+	/**
+	 * 防抖时间(ms)
+	 * @default 300
+	 */
+	resizeDebounceWait?: number
+	/**
+	 * 最大防抖时间(ms)
+	 * @default 500
+	 */
+	maxResizeDebounceWait?: number
+}
+
+const DEFAULT_CONFIG: ConfigProps = {
+	loading: true,
+	loadingOption: {
+		text: "加载中...",
+		color: "#c23531",
+		textColor: "#000",
+		maskColor: "rgba(255, 255, 255, 0.8)",
+		zlevel: 0,
+		// 字体大小。从 `v4.8.0` 开始支持。
+		fontSize: 12,
+		// 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
+		showSpinner: true,
+		// 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
+		spinnerRadius: 10,
+		// 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
+		lineWidth: 3,
+		// 字体粗细。从 `v5.0.1` 开始支持。
+		fontWeight: "normal",
+		// 字体风格。从 `v5.0.1` 开始支持。
+		fontStyle: "normal",
+		// 字体系列。从 `v5.0.1` 开始支持。
+		fontFamily: "sans-serif"
+	},
+	animation: true,
+	animationDuration: 300,
+	autoResize: true,
+	resizeDebounceWait: 300,
+	maxResizeDebounceWait: 500
+}
+
+export const useEcharts = (
+	dom: Ref<HTMLDivElement | HTMLCanvasElement | null>,
+	config?: ConfigProps
+) => {
+	const {
+		echartsInitOpts,
+		loading,
+		animation,
+		animationDuration,
+		autoResize,
+		resizeDebounceWait,
+		maxResizeDebounceWait
+	} = Object.assign({}, DEFAULT_CONFIG, config)
+	const loadingOption = Object.assign({}, DEFAULT_CONFIG.loadingOption, config?.loadingOption)
+	/** 图表实例 */
+	let chartInstance: NullType<echarts.ECharts> = null
+
+	/** Loading 状态控制 */
+	const toggleLoading = (show: boolean) => {
+		if (!chartInstance) return
+		if (!loading) return
+		show ? chartInstance.showLoading("default", loadingOption) : chartInstance.hideLoading()
+	}
+	/** 图表初始化 */
+	const initChart = () => {
+		if (!dom.value || echarts.getInstanceByDom(dom.value)) return
+		chartInstance = echarts.init(dom.value, null, echartsInitOpts)
+		toggleLoading(true)
+	}
+
+	/** 获取图表实例 */
+	const getChartInstance = () => chartInstance
+
+	// SetOptionOpts:
+	// (option: Object, opts?: {
+	//     notMerge?: boolean;// 是否不跟之前设置的 `option` 进行合并
+	//     replaceMerge?: string | string[];// 用户可以在这里指定一个或多个组件
+	//     lazyUpdate?: boolean;// 在设置完 `option` 后是否不立即更新图表
+	// })
+	/**
+	 * 图表渲染
+	 * @param options 图表数据集
+	 * @param opts 图表配置项
+	 */
+	const renderChart = (options: EChartsCoreOption, opts: SetOptionOpts = { notMerge: true }) => {
+		if (!chartInstance) {
+			initChart()
+		}
+		const finalOptions = { ...options, backgroundColor: "transparent" }
+		// console.log("renderChart", finalOptions)
+		chartInstance.setOption(finalOptions, opts)
+		toggleLoading(false)
+	}
+
+	/** 图表销毁 */
+	const destroyChart = () => {
+		if (!chartInstance) return
+		chartInstance.dispose()
+		chartInstance = null
+	}
+
+	/** 调整图表尺寸 */
+	const resize = () => {
+		if (!chartInstance) return
+		chartInstance.resize({
+			animation: {
+				duration: animation ? animationDuration : 0
+			}
+		})
+	}
+	/** 防抖处理的resize */
+	const resizeDebounce = useDebounceFn(resize, resizeDebounceWait, {
+		maxWait: maxResizeDebounceWait
+	})
+
+	onMounted(() => {
+		initChart()
+		if (autoResize) {
+			useResizeObserver(dom, resizeDebounce)
+		}
+	})
+
+	// 组件实例被卸载之后
+	onUnmounted(() => {
+		destroyChart()
+	})
+
+	return {
+		echarts,
+		chartInstance,
+		getChartInstance,
+		renderChart,
+		toggleLoading
+	}
+}