<template>
    <div>
        <div ref="assetEchart" class="asset_echart"></div>
    </div>
</template>
<script  lang="ts" setup>
import { init } from 'echarts';
import { reactive, toRefs, Ref, ref, onMounted, watchEffect } from 'vue';
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let { data } = defineProps(['data'])
console.log(data, 444);
let options = reactive({
    legend: {
        textStyle: {
            // color: "#fff",
            fontSize: "14"
        }
    },
    tooltip: {
        trigger: "axis",
        formatter: "{b}<br/>{a}：{c}mg/L"
    },
    xAxis: {
        type: "category",
        data: [
            "01月",
            "02月",
            "03月",
            "04月",
            "05月",
            "06月",
            "07月",
            "08月",
            "09月",
            "10月",
            "11月",
            "12月"
        ],
        axisLabel: {
            show: true,
            textStyle: {
                // color: "#fff"
            }
        },
        axisLine: {
            lineStyle: {
                // color: "#fff"
            }
        }
    },
    yAxis: {
        type: "value",
        min: 0,
       max: data.max,
       splitNumber :5,
        name: data.yName,
        axisLabel: {
            show: true,
            textStyle: {
                // color: "#fff"
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed"
            }
        },
        axisLine: {
            lineStyle: {
                // color: "#fff"
            }
        }
    },
    series: [
        {
            data: data.yData,
            type: "line",
            name: data.title
        }
    ],
    color: [data.color]
})
onMounted(() => {
    const chart = init(assetEchart.value as HTMLElement);
    chart.setOption(options);
})


watchEffect(() => {
    if (data.markLine) {
        options.series[0].data = data.yData;
        options.series[0].markLine = {
            data: [
                {
                    type: "average",
                    symbol: "circle",
                    yAxis: data.markLine.yAxis,
                    label: {
                        position: "middle",
                        formatter: `Ⅳ类(${data.markLine.yAxis}mg/L)`
                    }
                }
            ]
        };
    }
});
</script>
<style lang="scss" scoped>
.asset_echart {
    width: 530px;
    height: 384px;
    margin: 10px 14px 0 16px;
    padding: 24px;
    &_echart {
        width: 100%;
        height: 230px;
    }
}
</style>