
<template>
    <div id="linechart" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import * as echarts from "echarts";
import {
    ref,
    defineProps,
    reactive,
    onMounted,
    watch,
    defineExpose,
    nextTick
} from "vue";
import { chartAdaptation } from "@/utils/tools";
const props = defineProps({
    barNum: {
        type: Array,
        default: []
    },
    barTitle: {
        type: Array,
        default: []
    },
    lineKey: String

});
watch(
    () => props.lineKey,
    (val) => {
        getBin(props.barTitle, props.barNum);
        // getBin(val, props.barNum);
    }
)
onMounted(() => {

});
const getBin = (barTitle, barNum) => {
    const chartDom = document.getElementById("linechart");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        grid: {
            top: '10%',
            left: '3%',
            bottom: '5%',
            height: '69%'

        },
        // title: {
        //     left: 'center',
        //     text: 'Large Area Chart'
        // },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                // restore: {},
                // saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: barTitle
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        // dataZoom: [
        //     {
        //         type: 'inside',
        //         start: 0,
        //         end: 10
        //     },
        //     {
        //         start: 0,
        //         end: 10
        //     }
        // ],
        series: [
            {
                name: '使用率',
                type: 'line',
                symbol: 'none',
                sampling: 'lttb',
                itemStyle: {
                    color: 'rgb(13, 162, 238);'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(13, 162, 238)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(138, 208, 243)'
                        }
                    ])
                },
                data: barNum
            }
        ]
    };

    option && myChart.setOption(option);
    //自适应
    chartAdaptation(myChart);
};
    // defineExpose({ getBin });
</script>
<style scoped></style>

