engineering_admin/src/views/bid_margin_statistics/index.vue

<template>
    <el-card class="!border-none mb-4" shadow="never">
        <el-form class="mb-[-16px]" inline>
            <el-form-item label="图表类型">
                <el-select v-model="chartType" placeholder="请选择图表类型" class="flex-1" @change="changeChartType">
                    <el-option v-for="item in chartTypeList" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="图标宽度" prop="num">
                <el-input v-model="chartWitdth" clearable type="number" @blur="chartResize" />
            </el-form-item>
            <el-form-item label="图标高度" prop="project">
                <el-input v-model="chartHeight" clearable type="number" @blur="chartResize" />
            </el-form-item>
        </el-form>
    </el-card>
    <el-card style="min-height: 75vh;">
        <div class="tit">保证金统计表</div>

        <div id="main" style="margin: 0 auto;" :style="{ width: chartWitdth + 'px', height: chartHeight + 'px' }"></div>
    </el-card>
</template>

<script lang="ts" setup name="">
import * as echarts from 'echarts';
import { ref, reactive, onMounted } from "vue";
import { useRoute } from 'vue-router';
import { apibid_margin_list } from '@/api/financial_bid_statistics'

const route = useRoute()
var chartDom: any;
var option: any;
var myChart: any

const chartWitdth = ref(500)
const chartHeight = ref(500)
const chartType = ref(1)
const chartTypeList = reactive([
    {
        name: '柱状图',
        value: 1
    },
    {
        name: '折线图',
        value: 2
    },
    {
        name: '饼状图',
        value: 3
    },
    {
        name: '漏斗图',
        value: 4
    },

])

// 柱状图
let option1 = {
    tooltip: {
        trigger: 'item',
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['总金额', '中标金额', '未中标金额']
    },
    xAxis: {
        type: 'category',
        data: ['房屋建筑工程', '化工石油工程', '矿山工程', '市政公用工程', '通信与光电工程', '其他工程', 'Sun']
    },
    series: [
        // 总金额
        {
            name: '总金额',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
        },
        // 中标金额
        {
            name: '中标金额',
            data: [10, 20, 50, 10, 32, 46, 55],
            type: 'bar',
        },
        // 未中标金额
        {
            name: '未中标金额',
            data: [33, 47, 21, 80, 95, 35, 120],
            type: 'bar',
        }
    ],

};



// 折线图
let option2 = {
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
        }
    ]
};

// 饼图
let option3 = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
        }
    ]
};

// 漏斗图
let option4 = {
    tooltip: {
        trigger: 'item',
    },
    legend: {
        data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
    },
    series: [
        {
            name: 'Funnel',
            type: 'funnel',

            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                { value: 60, name: 'Visit' },
                { value: 40, name: 'Inquiry' },
                { value: 20, name: 'Order' },
                { value: 80, name: 'Click' },
                { value: 100, name: 'Show' }
            ],
        }
    ]
};
let chartData: object;

const getData = async (fetchFun: Function) => {
    let res = await fetchFun()
    chartData = res
    // option1.xAxis.data = chartData.data.map(item => item.name)
    // option1.series[0].data = chartData.data.map(item => item.value)
    console.log(chartData, '保证金统计表')
    option = option1
    initChart()
}


const initChart = () => {
    myChart = echarts.init(chartDom);
    myChart.setOption(option, true);
}


const changeChartType = (e: any) => {
    switch (e) {
        case 1:
            option1.xAxis.data = chartData.data.map(item => item.name)
            option1.series[0].data = chartData.data.map(item => item.value)
            option = option1
            break;
        case 2:
            option2.xAxis.data = chartData.data.map(item => item.name)
            option2.series[0].data = chartData.data.map(item => item.value)
            option = option2
            break;
        case 3:
            option3.series[0].data = res.data
            option = option3
            break;
        case 4:
            option4.legend.data = chartData.data.map(item => item.name)
            option4.series[0].data = chartData.data
            option = option4
            break;
    }
    initChart()
}


const chartResize = () => {
    myChart.resize()
}


onMounted(() => {
    chartDom = document.getElementById('main');
    getData(apibid_margin_list);

})



</script>

<style>
.tit {
    margin: 10px 0;
    text-align: center;
    font-size: 20px;
}
</style>