@zhsz/cool-design-dv
Version:
153 lines (152 loc) • 4.05 kB
JavaScript
import { debounce, uid } from "../../../utils/util.mjs";
import { tip, log } from "../../../utils/log.mjs";
import { ref, computed, watch, nextTick, markRaw } from "vue";
import * as echarts from "echarts";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import { addResizeListener, removeResizeListener } from "../../../utils/resize-event.mjs";
import setExtend from "../utils/extend.mjs";
import { arrayToMap } from "../../../utils/dictionary.mjs";
function useMyChart(props, instance, $listeners, $emit, adapter) {
const coordinates = ref(/* @__PURE__ */ Object.create(null));
const proxyResize = ref(debounce(resize, 50));
const proxySetOption = ref(debounce(setOption, 50));
const chart = ref();
const _uid = uid();
const classes = computed(() => {
return {
[`my-chart-${_uid}`]: true,
"my-chart": true
};
});
const styles = computed(() => {
return {
width: props.fit ? "100%" : props.width,
height: props.fit ? "100%" : props.height
};
});
function init() {
chart.value = markRaw(echarts.init(instance.$el, props.theme));
Object.entries($listeners).forEach(([name, handler]) => {
chart.value.on(name, handler);
});
props.loading && chart.value.showLoading();
proxySetOption.value();
addResizeListener(instance.$el, proxyResize.value);
}
function nativeSetOption(option) {
if (props.debug) {
tip("chart", _uid);
log(option);
log("----------");
}
chart.value.setOption(option);
}
function setOption() {
if (!chart.value)
return;
if (props.options) {
nativeSetOption(props.options);
return;
}
const options = adapter ? adapter(props) : {};
if (props.extend) {
setExtend(
options,
typeof props.extend === "function" ? props.extend(options) : props.extend
);
}
nativeSetOption(options || {});
}
function dispose() {
if (!chart.value)
return;
Object.entries($listeners).forEach(([name, handler]) => {
chart.value.off(name, handler);
});
chart.value.dispose();
chart.value = null;
removeResizeListener(instance.$el, proxyResize.value);
}
function resize() {
if (!chart.value)
return;
chart.value.resize();
}
function recordCoords(geo) {
if (!geo || !geo.features)
return;
geo.features.forEach((feat) => {
const properties = feat.properties;
if (properties.cp) {
coordinates.value[properties.name] = properties.cp;
}
});
}
function registerMap() {
const { register, map } = props;
if (!register || !map)
return Promise.resolve();
const registerGeo = echarts.getMap(map);
if (registerGeo) {
recordCoords(registerGeo.geoJson);
return Promise.resolve();
}
if (typeof register === "function") {
return props.register().then((geo) => {
echarts.registerMap(map, geo);
recordCoords(geo);
props.onRegister && props.onRegister(map, geo);
$emit("register", map, geo);
return geo;
});
} else {
echarts.registerMap(map, register);
recordCoords(register);
props.onRegister && props.onRegister(map, register);
return Promise.resolve();
}
}
watch(
[
() => props.options,
() => props.extend,
() => props.settings,
() => props.data
],
() => {
nextTick(proxySetOption.value);
}
);
watch(
() => props.loading,
(val) => {
if (!chart.value) {
return;
}
if (val) {
chart.value.showLoading();
} else {
chart.value.hideLoading();
}
}
);
watch(
() => props.coords,
(val) => {
const coords = Array.isArray(val) ? arrayToMap(val) : val;
coordinates.value = Object.assign(coordinates.value, coords);
}
);
return {
classes,
styles,
registerMap,
init,
dispose
};
}
export {
useMyChart as default
};