58 lines
1.0 KiB
Vue
58 lines
1.0 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: [Object, Array],
|
|
required: true
|
|
},
|
|
type: {
|
|
type: String,
|
|
validator: (value) => ['line', 'bar'].includes(value),
|
|
required: true
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
});
|
|
|
|
let chart = null;
|
|
|
|
const initChart = () => {
|
|
const chartDom = document.getElementById('monitorChart');
|
|
if (!chartDom) return;
|
|
|
|
chart = echarts.init(chartDom);
|
|
const option = {
|
|
title: {
|
|
text: props.title
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
// ... 其他配置
|
|
};
|
|
|
|
chart.setOption(option);
|
|
};
|
|
|
|
onMounted(() => {
|
|
initChart();
|
|
window.addEventListener('resize', handleResize);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize);
|
|
chart?.dispose();
|
|
});
|
|
|
|
const handleResize = () => {
|
|
chart?.resize();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div id="monitorChart" style="width: 100%; height: 400px"></div>
|
|
</template> |