79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
|
<!-- <template>
|
||
|
|
<div ref="chartRef" :style="{ height, width }"></div>
|
||
|
|
</template> -->
|
||
|
|
<template>
|
||
|
|
<div ref="chartRef" style="width: 100%; height: 260px"></div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { ref, reactive, watch, watchEffect } from 'vue';
|
||
|
|
import { cloneDeep } from 'lodash';
|
||
|
|
import { useEcharts } from '@/hooks/useEcharts';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'CustomEchartLineLine',
|
||
|
|
props: {
|
||
|
|
chartData: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {},
|
||
|
|
},
|
||
|
|
option: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({}),
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: '100%',
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: String,
|
||
|
|
default: 'calc(100vh - 78px)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emits: ['click'],
|
||
|
|
setup(props, { emit }) {
|
||
|
|
const chartRef = ref(null);
|
||
|
|
const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
|
||
|
|
const optionVal = reactive({});
|
||
|
|
|
||
|
|
watchEffect(() => {
|
||
|
|
props.option && initCharts();
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.size,
|
||
|
|
() => {
|
||
|
|
resize();
|
||
|
|
},
|
||
|
|
{
|
||
|
|
immediate: true,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
function initCharts() {
|
||
|
|
if (props.option) {
|
||
|
|
Object.assign(optionVal, cloneDeep(props.option));
|
||
|
|
}
|
||
|
|
setOptions(props.option);
|
||
|
|
startAutoPlay({
|
||
|
|
interval: 2000,
|
||
|
|
seriesIndex: 0,
|
||
|
|
showTooltip: true,
|
||
|
|
});
|
||
|
|
resize();
|
||
|
|
getInstance()?.off('click', onClick);
|
||
|
|
getInstance()?.on('click', onClick);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onClick(params) {
|
||
|
|
emit('click', params);
|
||
|
|
}
|
||
|
|
|
||
|
|
return { chartRef };
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|