<script>
/**
 * vs-line-ghost 2022-10-18
 *
 * width 图表宽度 330
 * height 图表高度 280
 * lineWidth 折线宽度 7
 * data 数据 []
 * lineColor 折线颜色  ["#A9F387", "#48D8BF"]
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 *  setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-line-ghost",
};
</script>
<script setup>
import {
    ref,
    reactive,
    inject,
    onMounted
} from "vue";
const echarts = inject("$echarts");

const props = defineProps({
    width: {
        type: Number,
        default: 330,
    },
    height: {
        type: Number,
        default: 280,
    },
    lineWidth: {
        type: Number,
        default: 7,
    },
    data: {
        type: Array,
        default: () => [
            { name: "事项一", value: 2233 },
            { name: "事项二", value: 6325 },
            { name: "事项三", value: 4096 },
            { name: "事项四", value: 5066 },
        ]
    },
    lineColor: {
        type: Array,
        default: () => ["#A9F387", "#48D8BF"]
    }
});


const style = reactive({
    width: props.width + 'px',
    height: props.height + 'px',
})

const emit = defineEmits(["chartClick"]);
const echartRef = ref(null)

let _echarts = null;
const init = function () {

    if (_echarts !== null) {
        _echarts.dispose();
        _echarts = null
    }
    _echarts = echarts.init(echartRef.value);

    let xAxisData = [];
    let seriesData = [];
    props.data.map((item) => {
        xAxisData.push(item.name);
        seriesData.push(item.value);
    });

    let option = {
        grid: {
            top: "10%",
            left: "5%",
            right: "8%",
            bottom: "5%",
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
        },
        xAxis: [
            {
                type: "category",
                data: xAxisData,
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.3)",
                    },
                },
                axisLabel:{
                    color: "#FFFFFF",
                },
                axisTick: {
                    show: false
                }
            },
        ],
        yAxis: [
            {
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.3)",
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#FFFFFF",
                    },
                },
                nameTextStyle: {
                    color: "#FFFFFF",
                },
                splitArea: {
                    show: false,
                },
            },
        ],
        series: [
            {
                type: "line",
                data: seriesData,
                lineStyle: {
                    normal: {
                        width: props.lineWidth,
                        color: {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: props.lineColor[0], // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: props.lineColor[1], // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                        shadowColor: props.lineColor[0] + '50',
                        shadowBlur: 10,
                        shadowOffsetY: 20,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#fff",
                        borderWidth: 10,
                    },
                },
                smooth: true,
            },
        ],
    };

    _echarts.setOption(option);

    _echarts.on('click', (params) => {
        emit("chartClick", params);
    })
}

onMounted(() => {
    init()
})

//图表刷新
const setEchartsRefresh = function () {
    init()
};

defineExpose({
    setEchartsRefresh
});
</script>

<template>
    <div :style="style" class="vsLineGhost" ref="echartRef"></div>
</template>

<style  lang="scss" scope>
$main: var(--main);
$auxiliary: var(--auxiliary);
$light: var(--light);

.vsLineGhost {}
</style>
