Vue项目管理系统-仪表盘

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
import service from '@/api'

// 发请求，接受数据
var data = ref([
  { title: '项目总填报数', all: '总', num: '500' },
  { title: '已完成项目', all: '完', num: '300' },
])
var money = ref([
  { title: '项目总投资', all: '投', num: '70,000,000' },
  { title: '项目累计投资', all: '累', num: '30,000,000' },
  { title: '项目下单资金', all: '下', num: '15,000,000' },
  { title: '项目到位资金', all: '到', num: '3,000,000' },
])
var tableData = ref([
  { title: '项目1', text: '公司1', status: '审核' },
  { title: '项目1', text: '公司1', status: '审核' },
  
  
])
var tableData1 = ref([
  { title: '项目1', status: '查看' },
  { title: '项目1', status: '查看' },
  { title: '项目1', status: '查看' },
  
])
var project_ing = ref([
  { project_title: '项目公告', table: tableData1 },
  { project_title: '项目通知', table: tableData1 },

])

// 绘制图表
var time1 = ref([
  { title: '年' },
  { title: '月' },
  { title: '周' },
])
var pic_data = ref(['1', '2', '5', '4'])
var getdata = (index) => {
  console.log(index);
 // 请求数据
  pic_data.value = ['5', '2', '4', '6']
  console.log(pic_data.value);
  
// var res=await service.
}
   
var mychart1, mychart2

onMounted(
() => {
  mychart1 = echarts.init(document.getElementById('picleft_1'))
  mychart2 = echarts.init(document.getElementById('picleft_2'))

  drawCharts()
}
)

function drawCharts() {
  mychart1.setOption({

    xAxis: {
      data: ['0', '5', '10', '15', '20'],
    },
    yAxis: {
      // data:['0','2','4','6','8'],
      splitLine: {
        lineStyle: {
          type: 'dashed'
        },
        show: true
      }
    },
    series: [
      {
        name: '销量',
        type: 'line',
        data: pic_data.value,
        itemStyle: {
          normal: {
            color: '#000',
            shadowColor: '#000',
            shadowBlur: 2,//阴影模糊
            lineStyle: {
              color: 'blue',
              width: 4,
              borderColor: '#ffffff',  //边框颜色
              borderWidth: 3  //边框线宽
            },
          },
          symbol: 'circle', //实心圆点
        symbolSize: 12, //圆点大小
        // data: [23, 89, 34, 27, 13, 23]
        },
      }
    ]

  })

  mychart2.setOption({

    xAxis: {
      data: ['1', '2', '3'],
    },
    yAxis: {
      data: ['1', '2', '3', '4'],
      splitLine: {
        lineStyle: {
          type: 'dashed'
        },
        show: true
      }
    },
    series: [
      {
        name: '销量',
        type: 'line',
        data: [5, 20, 3, 8, 15, 17],
        itemStyle: {
          normal: {
            color: '#000',
            shadowColor: '#000',
            shadowBlur: 2,//阴影模糊
            lineStyle: {
              color: 'blue',
              width: 4,
              borderColor: '#ffffff',  //边框颜色
              borderWidth: 3  //边框线宽
            },
          },
          symbol: 'circle', //实心圆点
        symbolSize: 12, //圆点大小
        data: [48203, 93489, 69034, 204970, 131744, 630230]
        },
      }
    ]
  })
}

onUpdated(
() => {
  drawCharts()
}
)

onUnmounted(() => {
  mychart1.dispose()
  mychart2.dispose()
})

</script>
<template>
    <div class="home">
        <!-- 1 -->
        <span class="title">早上好，尊敬的超级管理员</span>
        <!-- 2 -->
        <el-row class="project_all">
            <div class="all_item" v-for="(item, index) in data" :key="index">
                <span class="icon"><el-icon>
                        <List />
                    </el-icon></span>
                <el-col :span="6" class="icon_right">
                    <div class="icon_r_top">
                        <span class="icon_r_left">{{ item.title }}</span>
                        <span class="icon_r_right">{{ item.all }}</span>
                    </div>
                    <div class="num">{{ item.num }}</div>
                </el-col>
            </div>
            <div class="allmoney_item" v-for="(item, index) in money" :key="index">
                <span class="icon"><el-icon>
                        <List />
                    </el-icon></span>
                <el-col :span="6" class="icon_right">
                    <div class="icon_r_top">
                        <span class="icon_r_left">{{ item.title }}</span>
                        <span class="icon_r_right">{{ item.all }}</span>
                    </div>
                    <div class="num">{{ item.num }}</div>
                </el-col>
            </div>
        </el-row>
        <!-- 3 -->
        <div class="project3">
            <table class="project">
                <tr class="table_title">
                    <td colspan="3">待处理项目</td>
                </tr>
                <tr v-for="(item, index) in tableData" :key="index" class="table_item">
                    <td>{{ item.title }}</td>
                    <td>{{ item.text }}</td>
                    <td style="color: rgb(246, 171, 81)">{{ item.status }}</td>
                </tr>
            </table>
            <table class="project" v-for="(item, index) in project_ing" :key="index">
                <tr class="table_title">
                    <td colspan="3">{{ item.project_title }}</td>
                </tr>
                <tr v-for="(item1, index1) in item.table" :key="index" class="table_item">
                    <td>{{ item1.title }}</td>
                    <td style="color: blue">{{ item1.status }}</td>
                </tr>
            </table>
        </div>
        <!-- 4 -->
        <div class="part4">
        <div class="left">
            <span class="title">
                项目上报统计
            </span>
            <div class="time">
                <div class="year" v-for="(item,index) in time1" :key="index" @click="getdata(index)">{{ item.title }}</div>
            </div>
            <div id="picleft_1" style="width:100%;height:400px;"></div>
        </div>
        <div class="right">
            <span class="title">
                项目总投资
            </span>
            <div class="time">
                <div class="year" v-for="(item,index) in time1" :key="index" @click="getdata(index)">{{ item.title }}</div>
            </div>
            <div id="picleft_2" style="width:100%;height:400px;"></div>
        </div>
<pre><code>&lt;/div&gt;
</code></pre>
</div>
</template>
<style lang="scss" scoped>
.title {
    color: blue;
    font-size: 20px;
    margin: 20px;
}

.project_all {
    display: flex;
    justify-content: space-around;
}

:deep .el-table th.el-table__cell {
    background-color: rgb(174, 239, 239);
    color: #000;
}

.all_item,
.allmoney_item {
    height: 130px;
    /* width: 200px; */
    display: flex;
    align-items: center;
    margin: 0 30px;
}

.icon {
    height: 100%;
    display: flex;
    line-height: 140px;
    background-color: rgb(99, 235, 217);
    font-size: 40px;
    width: 60px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    display: block;
}

.icon_right {
    height: 100%;
    border: 1px solid #ccc;
    flex: 1;
    padding: 20px 20px 10px;

}

.icon_r_top {
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;

}

.icon_r_right {
    background-color: rgb(99, 235, 217);
    padding: 2px 5px;
    color: #fff;
    font-size: 18px;
    border-radius: 3px;
}

.num {
    color: rgb(99, 235, 217);
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
}

.el-col-6 {
    max-width: 100%;
}

.allmoney_item .icon,
.allmoney_item .icon_r_right {
    background-color: rgb(246, 171, 81);

}

.allmoney_item .num {
    color: rgb(246, 171, 81);
}

/* 3 */
.project3 {
    display: flex;
    justify-content: space-around;
}

.table_title {
    background-color: aqua;
    width: 100%;
    height: 40px;
}

.table_item {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 40px;
}

.project {
    width: 30%;
}

/* 4 */
.year {
    border: 1px solid;
    width: 50px;
    text-align: center;
}
.part4 {
    display: flex;
    justify-content: space-between;
   .right, .left{
    width: 50%;
    .title {
        width: 100%;
        background-color: aqua;
        display: block;
    }
    .time {
        display: flex;
        justify-content: space-evenly;
    }


} 
}

</style>
<p>为什么数据改变没有重新绘图请详细说明内容：在Vue中，当数据发生改变时，组件会自动重新渲染，但是在该组件中，图表的绘制是在生命周期函数<code>onMounted</code>中进行的，而不是在每次数据更新时重新绘制。因此，在数据发生改变后，需要手动调用重新绘制图表的函数，例如在<code>onUpdated</code>生命周期函数中重新绘制图表。另外，为了避免内存泄漏，应该在组件销毁前手动销毁图表实例，例如在<code>onUnmounted</code>生命周期函数中调用<code>dispose</code>方法。</p>