Vue3和Vue2项目封装echarts

​前期回顾    

css自定义属性_0.活在风浪里的博客-CSDN博客css自定义属性https://blog.csdn.net/m0_57904695/article/details/126351923?spm=1001.2014.3001.5501

目录

Vue2封装

 子组件

页面使用

 Vue3封装 

 全局子组件：

第一种拆数据统一在父页面使用 

分模块的ts文件数据：

父组件使用：

第二种局部子组件调用全局子组件在父页面使用

局部子组件

 在父页面调用局部子组件即可

---

Vue2封装

 

 子组件

页面使用

 Vue3封装 

 全局子组件：

封装的 防抖函数 src\utils\debounce\index.ts 

/**
 * 防抖函数，用于限制某个函数在一段时间内只能被调用一次
 * @param  A 函数的参数
 * @param  R 函数的返回值
 * @param { function } fn 要执行的函数
 * @param { number } delay 延迟的时间，以毫秒为单位
 * @example
 * 1: 测试防抖
 * 2: import { debounce } from "@/utils/debounce";
 * 3：const onDbo = debounce( (num: number) {
 *     console.log("‍❤️‍==>：", "测试防抖", num);
 *    }, 250);
 * @returns {(...args: A) => void} 返回一个新的函数，该函数具有防抖效果 !!!
 */
export function debounce(
  fn: (...args: A) => R,
  delay = 250
) {
  let timer: NodeJS.Timeout | null = null;

  /**
   * 新的函数，具有防抖效果
   * @param args 函数的参数
   * Q: 为什么要使用箭头函数？
   * A: 箭头函数没有自己的this，所以箭头函数中的this就是外层代码块的this
   */
  return function (...args: A) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn.apply(fn, args), delay);
  };
}

第一种拆数据统一在父页面使用 

分模块的ts文件数据：

/*授权书签署人数趋势
 ---------------------------------------------------------*/
export const chartLineData = {
	tooltip: {
		trigger: 'axis',
		formatter: function (params: any) {
			var relVal = params[0].name;
			for (var i = 0; i < params.length; i++) {
				relVal += '
' + params[i].marker + '签署人数' + ' : ' + params[i].value + '人';
			}
			return relVal;
		},
	},
	grid: {
		left: '3%',
		right: '2%',
		bottom: '9%',
		containLabel: true,
	},
	xAxis: {
		type: 'category',
		data: [],
		axisLabel: {
			interval: 0,
		},
	},
	yAxis: {
		type: 'value',
		minInterval: 1,
		axisLabel: {
			formatter: '{value} 人',
		},
	},
	series: [
		{
			data: [],
			type: 'line',
			smooth: true,
		},
	],
};

/*eCharts数据
 ---------------------------------------------------------*/
export const chartLineData2 = {
	title: {
		text: 'ECharts 入门示例',
	},
	tooltip: {},
	legend: {
		data: ['销量'],
	},
	xAxis: {
		data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
	},
	yAxis: {},
	series: [
		{
			name: '销量',
			type: 'bar',
			data: [5, 20, 36, 10, 10, 20],
		},
	],
};

父组件使用：

第二种局部子组件调用全局子组件在父页面使用

局部子组件

 在父页面调用局部子组件即可

本文完