cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
140 lines (139 loc) • 4.1 kB
JavaScript
import { defineComponent, ref, toRef, watch, onMounted, onUnmounted, toRefs, h, markRaw } from "vue";
import "../../node_modules/echarts/index.mjs";
import "../../node_modules/echarts-gl/lib/echarts-gl.mjs";
import "../../node_modules/echarts-gl/lib/component/grid3D.mjs";
import "../../node_modules/echarts-gl/lib/component/geo3D.mjs";
import "../../node_modules/echarts-gl/lib/component/globe.mjs";
import "../../node_modules/echarts-gl/lib/component/mapbox3D.mjs";
import "../../node_modules/echarts-gl/lib/component/maptalks3D.mjs";
import "../../node_modules/echarts-gl/lib/chart/bar3D.mjs";
import "../../node_modules/echarts-gl/lib/chart/line3D.mjs";
import "../../node_modules/echarts-gl/lib/chart/scatter3D.mjs";
import "../../node_modules/echarts-gl/lib/chart/lines3D.mjs";
import "../../node_modules/echarts-gl/lib/chart/polygons3D.mjs";
import "../../node_modules/echarts-gl/lib/chart/surface.mjs";
import "../../node_modules/echarts-gl/lib/chart/map3D.mjs";
import "../../node_modules/echarts-gl/lib/chart/scatterGL.mjs";
import "../../node_modules/echarts-gl/lib/chart/graphGL.mjs";
import "../../node_modules/echarts-gl/lib/chart/flowGL.mjs";
import "../../node_modules/echarts-gl/lib/chart/linesGL.mjs";
import "../../node_modules/echarts-liquidfill/src/liquidFillSeries.mjs";
import "../../node_modules/echarts-liquidfill/src/liquidFillView.mjs";
import { init } from "../../node_modules/echarts/lib/core/echarts.mjs";
const _sfc_main = defineComponent({
name: "CoEchartsCollection",
props: {
options: {
type: Object,
required: true
},
interval: {
type: [Number, String]
},
width: {
type: String
},
height: {
type: String
}
},
setup(props) {
const dom = ref();
const options = toRef(props, "options");
const interval = toRef(props, "interval");
const newOptions = ref({});
const timer = ref();
const chart = ref();
watch(
() => interval.value,
() => {
timer.value && clearInterval(timer.value);
setTimer();
}
);
watch(
() => options.value,
() => {
updateOptions(options.value);
},
{
deep: true
}
);
const updateData = async () => {
if (chart.value) {
try {
chart.value.clear();
chart.value.setOption(newOptions.value);
} catch (e) {
chart.value.dispose();
chart.value = markRaw(init(dom.value));
}
}
};
const updateOptions = (options2) => {
if (options2 && Object.prototype.toString.call(options2) === "[object Object]") {
newOptions.value = options2;
updateData();
}
};
const getEChartInstance = () => {
return chart.value;
};
const setTimer = () => {
if (interval.value && +interval.value !== 0) {
timer.value = setInterval(
() => {
updateData();
},
Number(interval.value) < 1e3 ? 1e3 : Number(interval.value)
);
}
};
const init$1 = () => {
try {
chart.value = markRaw(init(dom.value));
updateOptions(options.value);
} catch (e) {
chart.value.dispose();
chart.value = markRaw(init(dom.value));
}
};
const RESET_VIEW = () => {
var _a;
(_a = chart.value) == null ? void 0 : _a.resize(newOptions.value);
};
const resize = () => {
var _a;
(_a = chart.value) == null ? void 0 : _a.resize(newOptions.value);
};
onMounted(() => {
init$1();
setTimer();
});
onUnmounted(() => {
var _a;
clearInterval(timer.value);
(_a = chart.value) == null ? void 0 : _a.dispose();
});
return {
dom,
updateOptions,
getEChartInstance,
...toRefs(props),
RESET_VIEW,
resize
};
},
render() {
return h("div", {
ref: "dom",
class: "co-echarts-collection",
style: {
width: this.width || "100%",
height: this.height || "100%"
}
});
}
});
export { _sfc_main as default };