tradeScreen/src/components/index/bottomCenter.vue

<template>
    <img src="/static/index/CJYHTJ.png" style="position: absolute;width: 100%;height: 100%; " alt="">

    <div style="height:5vh;"></div>
    <div class="towns">
        <div class="town-li act">{{ area.area_name }} </div>
        <div class="town-li" v-for="(item, index) in streetList">{{ item.street_name }}</div>
        <div id="transactionUsers" style="width: 100%;height: 30vh;"></div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, defineProps } from "vue"
import * as echarts from 'echarts';
import { getUserTradeCountApi } from "@/api.js"
import { notEndWith } from "postcss-pxtorem/lib/filter-prop-list";

const props = defineProps({
    areaCodes: Object,
})

const streetList = reactive([])
const area = reactive({
    "area_code": "",
    "area_name": ""
})

getUserTradeCountApi(props.areaCodes).then(res => {
    res.data.streetList.forEach(item => {
        streetList.push(item)
    })
    area.area_name = res.data.area.area_name
    res.data.userTradeCountList.forEach(item => {

        option.xAxis[0].data.push(item.date.slice(5, item.date.length))
        option.series[0].data.push(item.visitUser)

        option.series[1].data.push(item.orderUser)
        option.series[2].data.push(item.payOrderUser)

    })

    initCharts('transactionUsers', option)

})

const initCharts = (tag, option) => {
    var chartDom = document.getElementById(tag);
    var myChart = echarts.init(chartDom);
    myChart.setOption(option);
}



let option = {
    color: ['#015989', '#583936', '#416979'],
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: "#1F3948",
        borderColor: "#1F3948",
        textStyle: {
            color: '#fff',
            fontSize: 14,
        },
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            },
        }
    },
    legend: {
        data: ['访客人数', '下单人数', '支付人数',],
        textStyle: {
            color: "white"
        }
        //   data: ['访客人数','下单人数','支付人数']

    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                fontSize: 12,
                color: '#d1f9fb',
                rotate: 40, // 文本旋转角度
            },


            data: []
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',//背景色为虚线,
                    color: '#256980'
                }
            }
        }
    ],
    series: [
        {
            name: '访客人数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#18394A'
                    },
                    {
                        offset: 1,
                        color: '#2885A4'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '下单人数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#2752A6'
                    },
                    {
                        offset: 1,
                        color: '#005886'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '支付人数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#005685'
                    },
                    {
                        offset: 1,
                        color: '#355969'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },


    ]
}



</script>
<style lang="scss">
.towns {
    width: 50vw;
    display: flex;
    box-sizing: border-box;
    padding: 1vh 1vw;
    flex-wrap: wrap;

    .town-li {
        margin-top: 10px;
        color: #A0C7D5;
        padding: 5px 10px;
        border-radius: 7px 10px;
        font-size: 12px;
        border: 1px solid #3A91A5;
        // margin-left: 2vw;
        justify-content: fl;
        margin-left: 2vw;
    }

    .act {
        background-color: #072C3E;

    }
}
</style>