forked from lxbfYeaaGbeDLMCi/deShanXiao
53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<template>
|
|
<div ref="echartDom" style="width: 100%; height: 100%"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import * as echarts from "echarts";
|
|
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
|
let echartDom = ref(<HTMLElement | null>null);
|
|
let emits = defineEmits(["update"]);
|
|
let props = defineProps({
|
|
option: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
title: {
|
|
text: "ECharts 入门示例",
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
|
|
},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
name: "销量",
|
|
type: "bar",
|
|
data: [5, 20, 36, 10, 10, 20],
|
|
},
|
|
],
|
|
};
|
|
},
|
|
},
|
|
});
|
|
function echartResize() {
|
|
let chartInstance = echarts.getInstanceByDom(echartDom.value as HTMLElement);
|
|
chartInstance?.resize();
|
|
}
|
|
let resizeObserver = new ResizeObserver(() => {
|
|
echartResize();
|
|
});
|
|
onMounted(() => {
|
|
let chartInstance = echarts.init(echartDom.value);
|
|
chartInstance.setOption(props.option);
|
|
|
|
resizeObserver.observe(echartDom.value as HTMLElement);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
resizeObserver.disconnect();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped></style>
|