gitea
/
blog_front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add new

master
panda 8 months ago
parent
89f2d98f33
commit
343b3d9299
2 changed files with 418 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/hooks/intex.ts
  2. 430
      src/views/blog/AmountChartView.vue

4
src/hooks/intex.ts
View File

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

430
src/views/blog/AmountChartView.vue
View File

@ -1,19 +1,225 @@
<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: '近年支出折线图',
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'
},
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]
}
]
},
lastyear: {
title: {
text: 'Stacked Line'
text: '近年消费统计折线图',
},
tooltip: {
trigger: 'axis'
@ -72,14 +278,212 @@ onMounted(() => {
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
createEcharts(staticLine, staticLineData)
}
})
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>
Write Preview
Loading…
Cancel
Save