tdesign-vue-next-starter/src/hooks/index.ts
PY d8c89bff0c
feat/t7 (#12)
* feat: add t7 and code update

* chore(husky): add prepare commit msg

* fix: dashboard getScatterDataSet fix

* ci(pull request): add pull request cache

* fix: dashboard chart render error
2021-12-22 12:07:29 +08:00

63 lines
1.4 KiB
TypeScript

import { ref, Ref, onUnmounted, onMounted } from 'vue';
import * as echarts from 'echarts/core';
/**
* eChart hook
* @param domId
* @param chart
*/
export const useChart = (domId: string): Ref<echarts.ECharts> => {
let chartContainer: HTMLCanvasElement;
const selfChart = ref<echarts.ECharts | any>();
const updateContainer = () => {
// TODO resize 报错,响应式的问题,待处理
selfChart.value.resize({
width: chartContainer.clientWidth,
height: chartContainer.clientHeight,
});
};
onMounted(() => {
if (!chartContainer) {
chartContainer = document.getElementById(domId) as HTMLCanvasElement;
}
selfChart.value = echarts.init(chartContainer);
});
window.addEventListener('resize', updateContainer, false);
onUnmounted(() => {
window.removeEventListener('resize', updateContainer);
});
return selfChart;
};
/**
* counter utils
* @param duration
* @returns
*/
export const useCounter = (duration = 60): [Ref<number>, () => void] => {
let intervalTimer;
onUnmounted(() => {
clearInterval(intervalTimer);
});
const countDown = ref(0);
return [
countDown,
() => {
countDown.value = duration;
intervalTimer = setInterval(() => {
if (countDown.value > 0) {
countDown.value -= 1;
} else {
clearInterval(intervalTimer);
countDown.value = 0;
}
}, 1000);
},
];
};