@ued_fpi/data-visual
Version:
<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />
87 lines (84 loc) • 2.44 kB
JavaScript
import { defineComponent, ref, onMounted, onBeforeUnmount, watch, openBlock, createElementBlock, normalizeClass, normalizeStyle } from 'vue';
import echarts from '../../../../wgms/utils/echarts/index.mjs';
import { useThemeHook, replaceVarStrings } from '../../../../utils.mjs';
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
className: {
type: String,
default: ""
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "300px"
},
loading: {
type: Boolean,
default: true
},
fullOptions: {
type: Object,
default: () => ({}),
required: true
}
},
setup(__props) {
const props = __props;
let myChart;
const echartsDomRef = ref(null);
const { isDark } = useThemeHook();
const resizeHandler = () => {
myChart.resize();
};
const debounce = (fun, delay) => {
let timer;
return function() {
if (timer)
clearTimeout(timer);
timer = setTimeout(() => {
fun();
}, delay);
};
};
const cancalDebounce = debounce(resizeHandler, 50);
onMounted(() => {
myChart = echarts.init(echartsDomRef.value, { renderer: "svg" });
myChart.showLoading({
text: "",
color: "#409eff",
textColor: "#000",
maskColor: "rgba(255, 255, 255, .95)",
zlevel: 0,
lineWidth: 2
});
if (!props.loading) {
myChart.hideLoading();
props.fullOptions.options && myChart.setOption(replaceVarStrings(props.fullOptions.options), true);
}
window.addEventListener("resize", cancalDebounce);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", cancalDebounce);
myChart.dispose();
});
watch(() => [props.fullOptions.options, props.loading, isDark.value], () => {
if (!props.loading) {
myChart.hideLoading();
myChart.setOption(replaceVarStrings(props.fullOptions.options), false);
}
}, { deep: true });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "echartsDomRef",
ref: echartsDomRef,
class: normalizeClass(__props.className),
style: normalizeStyle({ height: __props.height, width: __props.width })
}, null, 6);
};
}
});
export { _sfc_main as default };