peterlu14
107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<va-card class="h-full">
|
|
<va-card-content class="h-full w-full">
|
|
<EChart ref="chart_ref" :option="chart" :autoresize="true" :loading="loading" />
|
|
</va-card-content>
|
|
</va-card>
|
|
<AxisSettingSlider></AxisSettingSlider>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ECharts, EChartsCoreOption } from 'echarts'
|
|
import { ref, onMounted } from 'vue'
|
|
import { useChartStore } from '@/stores/data-analysis/chart'
|
|
import { useCanvasStore } from '@/stores/data-analysis/canvas'
|
|
import AxisSettingSlider from './AxisSettingSlider.vue'
|
|
import Chart from '@/utils/chart/chart'
|
|
|
|
const chartStore = useChartStore()
|
|
const canvasStore = useCanvasStore()
|
|
const chartIndex = 0
|
|
|
|
interface Props {
|
|
chart: Chart
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const chart_ref = ref<ECharts | null>(null)
|
|
|
|
const setOption = function (option: EChartsCoreOption, notMerge = false) {
|
|
chart_ref.value?.setOption(option, notMerge)
|
|
}
|
|
|
|
const appendData = function (seriesIndex: number, data: Array<number | string>) {
|
|
if (data.length <= 5e4) {
|
|
chartStore.chartManager.children[chartIndex].series[seriesIndex].data.push(...data)
|
|
} else {
|
|
for (const _data of data) {
|
|
chartStore.chartManager.children[chartIndex].series[seriesIndex].data.push(_data)
|
|
}
|
|
}
|
|
// chart_ref.value?.appendData({
|
|
// seriesIndex: seriesIndex,
|
|
// data: data,
|
|
// })
|
|
// chart_ref.value?.resize()
|
|
setTimeout(() => {
|
|
const chartXRange = chart_ref.value.chart.getModel().getComponent('xAxis').axis.scale._extent
|
|
const chartYRange = chart_ref.value.chart.getModel().getComponent('yAxis').axis.scale._extent
|
|
canvasStore.canvas.x.range = chartXRange.map((val: number) => String(val))
|
|
canvasStore.canvas.y.range = chartYRange.map((val: number) => String(val))
|
|
})
|
|
}
|
|
|
|
const markLine = function (value: number | Array<number> | string, seriesIndex = 0) {
|
|
chartStore.chartManager.children[chartIndex].series[seriesIndex].markLine.data = value
|
|
// chart_ref.value?.setOption({
|
|
// series: [
|
|
// {
|
|
// markLine: {
|
|
// data: [{ name: header, yAxis: value }],
|
|
// },
|
|
// },
|
|
// ],
|
|
// })
|
|
}
|
|
|
|
/* refresh */
|
|
const reset = function () {
|
|
setOption({}, true)
|
|
}
|
|
|
|
/* Loading */
|
|
const loading = ref(false)
|
|
const startLoading = function () {
|
|
loading.value = true
|
|
}
|
|
const stopLoading = function () {
|
|
loading.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
const newTool = {
|
|
show: true,
|
|
title: 'custom icon1',
|
|
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
|
onclick: function () {
|
|
chartStore.xAxisSlider = !chartStore.xAxisSlider
|
|
},
|
|
}
|
|
for (const chart of chartStore.chartManager.children) {
|
|
chart.toolbox.feature['myTool1'] = newTool
|
|
}
|
|
})
|
|
|
|
defineExpose({
|
|
startLoading,
|
|
stopLoading,
|
|
setOption,
|
|
appendData,
|
|
markLine,
|
|
reset,
|
|
})
|
|
</script>
|
|
<style lang=""></style>
|