| | |
| | | import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue' |
| | | import * as echarts from 'echarts' |
| | | |
| | | const emit = defineEmits(['finished']) |
| | | const emit = defineEmits(['finished', 'click']) |
| | | |
| | | // Props |
| | | const props = defineProps({ |
| | |
| | | }, |
| | | dataset: { |
| | | type: Object, |
| | | default: () => {} |
| | | default: () => { } |
| | | }, |
| | | xAxis: { |
| | | type: Array, |
| | |
| | | type: Object, |
| | | default: () => ({}) |
| | | }, |
| | | option: { |
| | | type: Object, |
| | | default: () => ({}) |
| | | }, |
| | | option: { |
| | | type: Object, |
| | | default: () => ({}) |
| | | }, |
| | | }) |
| | | |
| | | import { watch } from 'vue' |
| | |
| | | chartInstance = echarts.init(chartRef.value) |
| | | finishedHandler = () => emit('finished') |
| | | chartInstance.on('finished', finishedHandler) |
| | | chartInstance.on('click', (params) => { |
| | | emit('click', params) |
| | | }) |
| | | renderChart() |
| | | // setOption 后补一次 resize,确保首屏尺寸正确 |
| | | nextTick(() => { |
| | |
| | | |
| | | // Methods |
| | | function generateChart(option) { |
| | | const copiedOption = option |
| | | |
| | | const copiedOption = option |
| | | |
| | | if (copiedOption.series && copiedOption.series.length > 0) { |
| | | copiedOption.series.forEach((s, index) => { |
| | | if (s.type === 'line' && props.lineColors.length) { |
| | |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | chartInstance.setOption(copiedOption) |
| | | } |
| | | |
| | |
| | | tooltip: props.tooltip, |
| | | visualMap: Object.keys(props.visualMap).length ? props.visualMap : undefined, |
| | | } |
| | | |
| | | |
| | | chartInstance.clear() |
| | | generateChart(option) |
| | | } |
| | |
| | | |
| | | // Watch all reactive props that affect the chart |
| | | watch( |
| | | () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap], |
| | | () => { |
| | | // 如果首屏还没初始化成功,等待容器 ready 后再渲染 |
| | | if (!chartInstance) { |
| | | initChartWhenReady() |
| | | return |
| | | } |
| | | renderChart() |
| | | // 数据变化后补一次 resize,避免布局变化导致的偏移 |
| | | nextTick(() => { |
| | | if (chartInstance) chartInstance.resize() |
| | | }) |
| | | }, |
| | | { deep: true, immediate: true } |
| | | () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap], |
| | | () => { |
| | | // 如果首屏还没初始化成功,等待容器 ready 后再渲染 |
| | | if (!chartInstance) { |
| | | initChartWhenReady() |
| | | return |
| | | } |
| | | renderChart() |
| | | // 数据变化后补一次 resize,避免布局变化导致的偏移 |
| | | nextTick(() => { |
| | | if (chartInstance) chartInstance.resize() |
| | | }) |
| | | }, |
| | | { deep: true, immediate: true } |
| | | ) |
| | | </script> |