@fecp/mobile
Version:
75 lines (74 loc) • 1.74 kB
JavaScript
import { ref, onMounted, onBeforeUnmount, watch, onUpdated, createElementBlock, openBlock, normalizeStyle } from "vue";
import "../../utils/echartsUtil.mjs";
import * as core from "../../../../../node_modules/.pnpm/echarts@5.6.0/node_modules/echarts/core.mjs";
const _sfc_main = {
__name: "BaseChart",
props: {
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "100%"
},
options: {
type: Object,
default: {}
}
},
setup(__props) {
const props = __props;
let myCharts = null;
const chartRef = ref();
onMounted(() => {
initChart();
});
onBeforeUnmount(() => {
if (myCharts) {
myCharts.dispose();
}
});
function initChart() {
if (!myCharts) {
myCharts = core.init(chartRef.value);
myCharts.setOption(props.options);
myCharts.on("click", function(params) {
console.log("click", params);
});
myCharts.on("dblClick", function(params) {
console.log("dblClick", params);
});
} else {
updateChart();
}
}
watch(
() => props.options,
() => {
updateChart();
},
{ deep: true }
);
function updateChart() {
if (myCharts) {
myCharts.setOption(props.options);
}
}
onUpdated(() => {
if (myCharts) {
myCharts.resize();
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "chartRef",
ref: chartRef,
style: normalizeStyle({ width: __props.width, height: __props.height })
}, null, 4);
};
}
};
export {
_sfc_main as default
};