YouKeChuanMei_VUE/src/views/mediaLibrary/historyData.vue

<template>
    <!-- 历史数据对话框 -->
    <el-dialog title="历史数据" v-model="historyDataOpen" width="1250px" class="my_dialog" align-center
        :destroy-on-close="true" :close-on-click-modal="false">
        <el-form :inline="true" class="myInsertForm">
            <el-form-item label="开始时间">
                <el-date-picker v-model="queryParams.startTime" type="date" placeholder="开始时间" />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="queryParams.endTime" type="date" placeholder="结束时间" />
            </el-form-item>
            <el-form-item>
                <el-radio-group v-model="queryParams.radio1">
                    <el-radio value="1">折线图</el-radio>
                    <el-radio value="2">柱状图</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
                <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div id="historyChar" ref="historyCharRef"></div>
        <el-table v-loading="loading" :data="historyList" height="368px">
            <el-table-column label="媒体名称" align="left" prop="mediaName">
                <template #default="scope">
                    <span class="mediaNameLabel">{{ scope.row.mediaName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="供应商名称" prop="realName" :show-overflow-tooltip="true" />
            <el-table-column label="折扣" prop="email" :show-overflow-tooltip="true" />
            <el-table-column label="媒体净价(元)" prop="phonenumber" :show-overflow-tooltip="true" />
            <el-table-column label="实际报价(元)" prop="phonenumber" :show-overflow-tooltip="true" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
        </el-table>

        <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
            @pagination="getList" />
    </el-dialog>
</template>
<script setup>
import { onMounted, defineEmits, ref } from 'vue'
import * as echarts from 'echarts'
 
const historyCharRef = ref(null)
const historyDataOpen = ref(false)
const loading = ref(false)
const total = ref(0)
const historyList = ref([]) 
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
})
const getList = () => {

}
const _historyChar = ref(null)
// 折线图
const initHistoryCharLine = () => {
    if (_historyChar.value) _historyChar.value.dispose();
    _historyChar.value = echarts.init(historyCharRef.value)
    _historyChar.value.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} 元/年"   //鼠标放上去 展示内容 
        },
        grid: {
            left: '2%',
            right: '2%',  // 右侧留更多空间显示长数值
            top: '14%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['滴滴', '五粮液项目', '北京易优行广告传媒有限公司', '滴滴', '五粮液项目', '北京易优行广告传媒有限公司', '滴滴'],
            axisLabel: {
                interval: 0,  // 强制显示所有标签
                rotate: 15,   // 标签旋转45度防止重叠
                fontSize: 16,  // 缩小字体
                color: '#808080'
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#eee',
                },
                show: false
            },
        },
        yAxis: {
            name: '实际报价（元/年）',
            nameTextStyle: {
                color: '#3B3B3B',
                fontSize: 16,
                fontWeight: '400',
                fontFamily: 'Microsoft YaHei',
                align: 'center',
            },
            type: 'value',
            axisLabel: {
                fontSize: 16,
                color: '#808080'
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#F1F1F1',
                },
                show: true
            },
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                // symbol: 'circle',
                  symbolSize: 12,
                itemStyle: {
                    color: '#FFC63D'
                },
                lineStyle: {
                    width: 2,
                    color: '#FFC63D'
                },
            }
        ]
    })
}

// 暴露方法\属性给父组件
defineExpose({
    historyDataOpen,
    initHistoryCharLine
});
</script>
<style lang='scss'>
.mediaNameLabel {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #1A75E6;
    cursor: pointer;
}

.mediaNameLabel:hover {
    text-decoration: underline solid #1A75E6 1px;
    text-underline-offset: 4px;
}

#historyChar {
    width: 100%;
    height: 350px;
}
</style>