|
|
@@ -0,0 +1,164 @@
|
|
|
+<template>
|
|
|
+ <div class="chart-main" ref="ref_main">
|
|
|
+ <div class="chart-ref" ref="ref_chart"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
|
|
|
+import {useShipMapStore} from "@/stores";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import dayjs from "dayjs";
|
|
|
+
|
|
|
+const emit = defineEmits(['toPosition'])
|
|
|
+const ShipMapStore = useShipMapStore()
|
|
|
+const {proxy} = getCurrentInstance()
|
|
|
+const props = defineProps({
|
|
|
+ data: {
|
|
|
+ required: true,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ tab: {
|
|
|
+ default: 'speed'
|
|
|
+ },
|
|
|
+})
|
|
|
+const state: any = reactive({
|
|
|
+ resizeObserver: <any>null,
|
|
|
+ chart: <any>null
|
|
|
+})
|
|
|
+const ref_chart = ref();
|
|
|
+const ref_main = ref();
|
|
|
+const initChart = () => {
|
|
|
+ echarts.dispose(ref_chart.value)
|
|
|
+ const chart = echarts.init(ref_chart.value);
|
|
|
+ if (props.data?.length > 0) {
|
|
|
+ let name
|
|
|
+ let key = ''
|
|
|
+ if (props.tab === 'speed') {
|
|
|
+ name = '航速'
|
|
|
+ key = ShipMapStore.trackKeys.speed
|
|
|
+ } else {
|
|
|
+ name = '航向'
|
|
|
+ key = ShipMapStore.trackKeys.course
|
|
|
+ }
|
|
|
+ const d = JSON.parse(JSON.stringify(props.data))
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid:{
|
|
|
+ top: 16,
|
|
|
+ right: '3%',
|
|
|
+ bottom: 48,
|
|
|
+ left: 20,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ backgroundColor: '#1b40d6',
|
|
|
+ height: 20,
|
|
|
+ left: 16,
|
|
|
+ right: 16,
|
|
|
+ bottom: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ xAxis: {
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255,255,.2)'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick:{show: false},
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255,255,.2)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ccc'
|
|
|
+ },
|
|
|
+ data: d.map(v => {
|
|
|
+ return dayjs(v[ShipMapStore.trackKeys.mergeTime]).format("MM/DD HH:mm:ss")
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255,255,.2)'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255, 255,255,.2)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#ccc'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: name,
|
|
|
+ type: "line",
|
|
|
+ data: d.map(v => ({...v, value: Number(v[key]).toFixed(2)})),
|
|
|
+ lineStyle: {
|
|
|
+ width: 3,
|
|
|
+ color: '#7feffc'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#65d0a9'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ chart.setOption(option);
|
|
|
+ chart.on('click', (params) => {
|
|
|
+ emit('toPosition', [params.data[ShipMapStore.trackKeys.lon], params.data[ShipMapStore.trackKeys.lat]])
|
|
|
+ })
|
|
|
+ state.resizeObserver = new ResizeObserver((entries) => {
|
|
|
+ for (const entry of entries) {
|
|
|
+ chart && chart?.resize()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.resizeObserver.observe(ref_main.value);
|
|
|
+ }
|
|
|
+ return chart
|
|
|
+}
|
|
|
+watch(() => [props.data, props.tab], () => {
|
|
|
+ state.chart = initChart()
|
|
|
+})
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ state.chart = initChart()
|
|
|
+ })
|
|
|
+ return () => {
|
|
|
+ state.resizeObserver?.unobserve(ref_main?.value)
|
|
|
+ state.resizeObserver?.disconnect()
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.chart-main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .chart-ref {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
CzRger