<template>
    <echartsBase ref="echart" :option="setOption" />
</template>

<script setup>
import * as echarts from 'echarts'
import echartsBase from '~com/echarts/index.vue'
import { nextTick, onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
const appStore = useAppStore()

//渲染完成
onMounted(() => {
    nextTick(() => {
        setOptions()
    })
})

//监听
watch(() => [
    appStore.isEchartSize,
], ([isSize]) => {
    if (isSize) {
        echart.value?.onResize()
    }
})

//图表配置
const colors = '#09c', colora = '#214568'
const echart = ref(null)
const setOption = ref({})
const setOptions = () => {
    let base = +new Date(1968, 9, 3)
    let oneDay = 24 * 3600 * 1000
    let date = []
    let data = [Math.random() * 300]
    for (let i = 1; i < 100; i++) {
        let now = new Date((base += oneDay))
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
    }
    setOption.value = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#356280',
                },
                lineStyle: {
                    type: 'solid',
                    color: '#09c',
                },
            },
            backgroundColor: 'rgba(0,0,0,.5)',
            borderWidth: 0,
            textStyle: {
                color: '#fff',
            },
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none',
                },
                saveAsImage: {},
            },
        },
        legend: {
            data: ['名称'],
            textStyle: {
                color: colors,
            },
        },
        grid: {
            show: true,
            borderWidth: 1,
            bottom: 90,
            borderColor: colora,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date,
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: colora,
                },
            },
            axisLabel: {
                color: colors,
            },
        },
        yAxis: {
            name: '°C',
            type: 'value',
            boundaryGap: [0, '30%'],
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: colora,
                },
            },
            nameTextStyle: {
                color: colors,
            },
            axisLabel: {
                color: colors,
            },
        },
        dataZoom: [
            {
                start: 0,
                end: data.length,
                borderColor: 'transparent',
                backgroundColor: '#223654',
                fillerColor: 'rgba(3, 197, 194, .2)',
                brushSelect: false,
                textStyle: {
                    color: colors,
                },
            },
        ],
        series: [
            {
                name: '名称',
                type: 'line',
                stack: 'Total',
                emphasis: {
                    focus: 'series',
                },
                itemStyle: {
                    color: '#03C5C2',
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(3, 197, 194, 0.5)',
                        },
                        {
                            offset: 1,
                            color: 'transparent',
                        },
                    ]),
                },
                data: data,
            },
        ],
    }
}
</script>
