<template>
    <div class="line-chart-container">
        <MOSTY.Assort style="margin-left: 10px;" title="甘肃省烟草行业预警得分"></MOSTY.Assort>
        <div id="lineChart" class="line-chart"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import * as MOSTY from "@/components/MyComponents/index";

const setLineChart = (dataList, timeList) => {
    const chart = echarts.init(document.getElementById('lineChart'));
    let option2 = {
        // title: {
        //     text: '贵州烟草专卖（公司）总得分趋势情况',
        //     left: 'center'
        // },
        xAxis: {
            type: 'category',
            data: timeList
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: dataList,
            type: 'line',
            areaStyle: {
                color: '#24CCB8',
                opacity: 0.4
            },
            lineStyle: {
                color: '#24CCB8'
            },
            itemStyle: {
                normal: {
                    color: '#24CCB8', // 连接点的颜色
                }
            },
        }]
    }
    chart.setOption(option2);
}
onMounted(() => {
    setLineChart([100, 90, 80, 70, 60, 50, 40, 30, 20, 10], ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10']);
})
</script>

<style lang="scss" scoped>
.line-chart-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.line-chart {
    width: 100%;
    height: calc(100% - 40px);
}
</style>