foster-pc-vue/src/components/charts/oneLineChart.vue

<template>
    <div ref="chartDom" class="charts"></div>
</template>

<script setup>
import { onMounted, ref,watch } from "vue";
import * as echarts from "echarts";
import { oneLine } from "./options/oneLineOption";
import { deepClone } from "@/common/commonFun";

const props = defineProps({
    styleName: {
        type: String,
        default: "styleName1",
    },
    xData: {
        type: Array,
        default: () => [],
    },
    yData: {
        type: Array,
        default: () => [],
    },
    minData: {
        type: Array,
        default: () => [],
    },
});

const chartDom = ref(null);
const myChart = ref(null);
const options = ref(null);

const initData = () =>{
    oneLine.series[0].data = props.yData
    oneLine.series[0].markPoint.data[0].value = props.yData[0] + '°'
    oneLine.series[0].markPoint.data[0].yAxis = props.yData[0]
    oneLine.series[0].markPoint.data[1].yAxis = props.yData[0]

    oneLine.series[1].data = props.minData
    oneLine.series[1].markPoint.data[0].value = props.minData[0] + '°'
    oneLine.series[1].markPoint.data[0].yAxis = props.minData[0]
    oneLine.series[1].markPoint.data[1].yAxis = props.minData[0]

    options.value = deepClone(oneLine);

    myChart.value.setOption(options.value);
}

onMounted(() => {
    myChart.value = echarts.init(chartDom.value);
});

watch(()=>props.yData,(newValue,oldValue) =>{
    if(newValue){
        initData();
    }
})
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>