Browse Source

add new

master
panda 8 months ago
parent
commit
343b3d9299
  1. 4
      src/hooks/intex.ts
  2. 432
      src/views/blog/AmountChartView.vue

4
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);
};

432
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>
</style>
Loading…
Cancel
Save