diff --git a/src/hooks/intex.ts b/src/hooks/intex.ts
index 1fc478a..09bb0d2 100644
--- a/src/hooks/intex.ts
+++ b/src/hooks/intex.ts
@@ -45,10 +45,6 @@ export const verifySelect = (message: selectMessage) => {
  * echarts配置
  */
 export const createEcharts = (chartRef: any, option: any) => {
-  console.log(option,1111111111);
-  setTimeout(() => {
-    console.log(option.series[0].data,22222222);
-  }, 1000);
   const myChart = echarts.init(chartRef.value);
   myChart.setOption(option);
 };
diff --git a/src/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue
index 1b8ffa2..793ed40 100644
--- a/src/views/blog/AmountChartView.vue
+++ b/src/views/blog/AmountChartView.vue
@@ -1,19 +1,163 @@
 <template>
-    <div class="amount-chart">
-        <div ref="staticLine" style="height: 300px;width: 1100px;"></div>
+    <div class="charts">
+        <div class="line-chart">
+            <a-select v-model:value="selectedLinePeriod" @change="updateLineChart">
+                <a-select-option value="nighweek">近一周</a-select-option>
+                <a-select-option value="nighmonth">近一月</a-select-option>
+                <a-select-option value="nighyear">近一年</a-select-option>
+            </a-select>
+            <div ref="linechart" class="echart"></div>
+        </div>
+        <div class="pie-chart">
+            <a-select v-model:value="selectedPiePeriod" @change="updatePieChart">
+                <a-select-option value="nighweek">近一周</a-select-option>
+                <a-select-option value="nighmonth">近一月</a-select-option>
+                <a-select-option value="nighyear">近一年</a-select-option>
+            </a-select>
+            <div ref="piechart" class="echart"></div>
+        </div>
+        <div class="lines-chart">
+            <a-select v-model:value="selectedLinesPeriod" @change="updateLinesChart">
+                <a-select-option value="thisyear">今年</a-select-option>
+                <a-select-option value="lastyear">去年</a-select-option>
+            </a-select>
+            <div ref="lineschart" class="echart"></div>
+        </div>
+        <div class="bar-chart">
+            <div ref="barchart" class="echart"></div>
+        </div>
     </div>
-
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { createEcharts } from '@/hooks/intex'
-import { onMounted, ref } from 'vue';
-const staticLine = ref(null)
+import { get } from '@/tools/request';
+import { onMounted, reactive, ref } from 'vue';
+import type { Ref } from 'vue';
+const linechart = ref(null);
+const lineschart = ref(null);
+const piechart = ref(null);
+const barchart = ref(null);
+const selectedLinePeriod: Ref<Period> = ref('nighweek');
+const selectedLinesPeriod: Ref<Periods> = ref('thisyear');
+const selectedPiePeriod: Ref<Period> = ref('nighweek');
+type Period = 'nighweek' | 'nighmonth' | 'nighyear';
+type Periods = 'thisyear' | 'lastyear';
 
-onMounted(() => {
-    const staticLineData = {
+const lineweek = reactive({
+    lineweekdate: [],
+    lineweekdata: []
+})
+const linemonth = reactive({
+    linemonthdate: [],
+    linemonthdata: []
+})
+const lineyear = reactive({
+    lineyeardate: [],
+    lineyeardata: []
+})
+const thisyear = reactive({
+    disbursetype: [],
+    thisyeardate: [],
+    lineweekdata: []
+})
+const lastyear = reactive({
+    linemonthdate: [],
+    linemonthdata: []
+})
+const piedata = ref([])
+const lineChartOptions = reactive<Record<Period, any>>({
+    nighweek: {
+        title: {
+            text: '近周支出折线图',
+            left: "center"
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        xAxis: {
+            type: 'category',
+            // 需要一周的日期，（数组）
+            data: lineweek.lineweekdate
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                // 需要一周的数据（数组）
+                data: lineweek.lineweekdate,
+                type: 'line',
+                smooth: true
+            }
+        ]
+    },
+    nighmonth: {
+        title: {
+            text: '近月支出折线图',
+            left: "center"
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: linemonth.linemonthdate
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: linemonth.linemonthdata,
+                type: 'line',
+                smooth: true
+            }
+        ]
+    },
+    nighyear: {
         title: {
-            text: 'Stacked Line'
+            text: '近年支出折线图',
+            left: "center"
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: lineyear.lineyeardate
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: lineyear.lineyeardata,
+                type: 'line',
+                smooth: true
+            }
+        ]
+    }
+});
+const linesChartOptions = reactive<Record<Periods, any>>({
+    thisyear: {
+        title: {
+            text: '近年消费统计折线图',
         },
         tooltip: {
             trigger: 'axis'
@@ -72,14 +216,274 @@ onMounted(() => {
                 data: [820, 932, 901, 934, 1290, 1330, 1320]
             }
         ]
-    };
-    createEcharts(staticLine, staticLineData)
+    },
+    lastyear: {
+        title: {
+            text: '近年消费统计折线图',
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                name: 'Email',
+                type: 'line',
+                stack: 'Total',
+                data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+                name: 'Union Ads',
+                type: 'line',
+                stack: 'Total',
+                data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+                name: 'Video Ads',
+                type: 'line',
+                stack: 'Total',
+                data: [150, 232, 201, 154, 190, 330, 410]
+            },
+            {
+                name: 'Direct',
+                type: 'line',
+                stack: 'Total',
+                data: [320, 332, 301, 334, 390, 330, 320]
+            },
+            {
+                name: 'Search Engine',
+                type: 'line',
+                stack: 'Total',
+                data: [820, 932, 901, 934, 1290, 1330, 1320]
+            }
+        ]
+    }
 })
+const barChartOptions = {
+    title: {
+        text: '历年消费柱状图',
+    },
+    legend: {},
+    tooltip: {},
+    toolbox: {
+        feature: {
+            saveAsImage: {}
+        }
+    },
+    dataset: {
+        source: [
+            ['product', '2015', '2016', '2017'],
+            ['Matcha Latte', 43.3, 85.8, 93.7],
+            ['Milk Tea', 83.1, 73.4, 55.1],
+            ['Cheese Cocoa', 86.4, 65.2, 82.5],
+            ['Walnut Brownie', 72.4, 53.9, 39.1]
+        ]
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+};
+const pieChartOptions = reactive<Record<Period, any>>({
+    nighweek: {
+        title: {
+            text: '近周分类总额饼图',
+            left: 'center'
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        toolbox: {
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left'
+        },
+        series: [
+            {
+                name: '总额',
+                type: 'pie',
+                radius: '50%',
+                data: piedata.value,
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    },
+    nighmonth: {
+        title: {
+            text: '近月分类总额饼图',
+            left: 'center'
+        },
+        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)'
+                    }
+                }
+            }
+        ]
+    },
+    nighyear: {
+        title: {
+            text: '近年分类总额饼图',
+            left: 'center'
+        },
+        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)'
+                    }
+                }
+            }
+        ]
+    }
+})
+const updateLineChart = () => {
+    if (linechart.value) {
+        createEcharts(linechart, lineChartOptions[selectedLinePeriod.value]);
+    }
+};
+const updateLinesChart = () => {
+    if (linechart.value) {
+        createEcharts(linechart, linesChartOptions[selectedLinesPeriod.value]);
+    }
+};
+const updatePieChart = () => {
+    if (piechart.value) {
+        createEcharts(piechart, pieChartOptions[selectedPiePeriod.value]);
+    }
+};
+
+const updateLineChartData = (lineDates: any, lineData: any, chartOptions: any) => {
+    chartOptions.xAxis.data = lineDates;
+    chartOptions.series[0].data = lineData;
+}
+const updatePieChartData = (pieData: any, chartOptions: any) => {
+    chartOptions.series[0].data = pieData;
+}
+const fetchLineAndUpdateChart = async (days: number, chartOptions: any) => {
+    const response = await get("/disburses/list/specificdate", { days });
+    const data = response.data.data;
+    const createDates = data.map((item: any) => item.create_date);
+    const totalDisbursePrices = data.map((item: any) => item.total_disburseprice);
+    updateLineChartData(createDates, totalDisbursePrices, chartOptions);
+    createEcharts(linechart, chartOptions);
+}
+
+const fetchPieAndUpdateChart = async (days: number, chartOptions: any) => {
+    const response = await get("/disburses/list/classifieddata", { days });
+    const data = response.data.data;
+    console.log(`output->data`, data)
+    updatePieChartData(data, chartOptions);
+    createEcharts(piechart, chartOptions);
+}
+
+const getLineWeekList = () => fetchLineAndUpdateChart(7, lineChartOptions.nighweek);
+const getLineMonthList = () => fetchLineAndUpdateChart(30, lineChartOptions.nighmonth);
+const getLineYearList = () => fetchLineAndUpdateChart(365, lineChartOptions.nighyear);
+const getPieWeekList = () => fetchPieAndUpdateChart(7, pieChartOptions.nighweek);
+const getPieMonthList = () => fetchPieAndUpdateChart(30, pieChartOptions.nighmonth);
+const getPieYearList = () => fetchPieAndUpdateChart(365, pieChartOptions.nighyear);
+onMounted(() => {
+    getLineWeekList()
+    getLineMonthList()
+    getLineYearList()
+    getPieWeekList()
+    getPieMonthList()
+    getPieYearList()
+    createEcharts(linechart, lineChartOptions.nighweek);
+    createEcharts(piechart, pieChartOptions.nighweek);
+    createEcharts(lineschart, linesChartOptions);
+    createEcharts(barchart, barChartOptions);
+});
+
 </script>
 
 <style>
-.amount-chart {
+.charts {
+    display: flex;
+    flex-direction: column;
+}
+
+.echart {
+    width: calc(45vw);
+    height: calc(45vw*2/5);
+    margin: 24px 0 48px 0;
+}
+
+.charts {
     width: 45%;
-    margin: 0 24px;
+    margin: 24px;
 }
-</style>
\ No newline at end of file
+</style>