mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-02 16:45:24 +08:00
前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题
This commit is contained in:
JEECG
49
jeecgboot-vue3/src/views/report/chartdemo/chartdemo.data.ts
Normal file
49
jeecgboot-vue3/src/views/report/chartdemo/chartdemo.data.ts
Normal file
@ -0,0 +1,49 @@
|
||||
export const getData = (() => {
|
||||
let dottedBase = +new Date();
|
||||
const barDataSource: any[] = [];
|
||||
const barMultiData: any[] = [];
|
||||
const barLineData: any[] = [];
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
let obj = { name: '', value: 0 };
|
||||
const date = new Date((dottedBase += 1000 * 3600 * 24));
|
||||
obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
|
||||
obj.value = Math.random() * 200;
|
||||
barDataSource.push(obj);
|
||||
}
|
||||
|
||||
for (let j = 0; j < 2; j++) {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
let obj = { name: '', value: 0, type: 2010 + j + '' };
|
||||
const date = new Date(dottedBase + 1000 * 3600 * 24 * i);
|
||||
obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
|
||||
obj.value = Math.random() * 200;
|
||||
barMultiData.push(obj);
|
||||
}
|
||||
}
|
||||
const pieData = [
|
||||
{ value: 335, name: '客服电话' },
|
||||
{ value: 310, name: '奥迪官网' },
|
||||
{ value: 234, name: '媒体曝光' },
|
||||
{ value: 135, name: '质检总局' },
|
||||
{ value: 105, name: '其他' },
|
||||
];
|
||||
const radarData = [
|
||||
{ value: 75, name: '政治', type: '文综', max: 100 },
|
||||
{ value: 65, name: '历史', type: '文综', max: 100 },
|
||||
{ value: 55, name: '地理', type: '文综', max: 100 },
|
||||
{ value: 74, name: '化学', type: '文综', max: 100 },
|
||||
{ value: 38, name: '物理', type: '文综', max: 100 },
|
||||
{ value: 88, name: '生物', type: '文综', max: 100 },
|
||||
];
|
||||
for (let j = 0; j < 2; j++) {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
let obj = { name: '', value: 0, type: 2010 + j + '', seriesType: j >= 1 ? 'line' : 'bar' };
|
||||
const date = new Date(dottedBase + 1000 * 3600 * 24 * i);
|
||||
obj.name = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-');
|
||||
obj.value = Math.random() * 200;
|
||||
barLineData.push(obj);
|
||||
}
|
||||
}
|
||||
return { barDataSource, barMultiData, pieData, barLineData, radarData };
|
||||
})();
|
||||
93
jeecgboot-vue3/src/views/report/chartdemo/index.vue
Normal file
93
jeecgboot-vue3/src/views/report/chartdemo/index.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<a-card :bordered="false" style="height: 100%">
|
||||
<a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
|
||||
<a-tab-pane key="1" tab="柱状图">
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<Bar :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }"></Bar>
|
||||
</a-col>
|
||||
<!-- <a-col :span="7" style="margin-left:50px" >
|
||||
配置项：
|
||||
<textarea rows="18" style="width: 500px">{{ barDataSource }}</textarea>
|
||||
</a-col>-->
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="多列柱状图" force-render>
|
||||
<BarMulti :chartData="barMultiData" :option="multiBarOption" height="50vh"></BarMulti>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="迷你柱状图" style="display: flex; justify-content: center">
|
||||
<Bar :chartData="barDataSource" width="30%" height="50vh"></Bar>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" tab="面积图">
|
||||
<SingleLine :chartData="barDataSource" height="50vh" :option="{ title: { text: '销售额排行', left: 'center' } }"></SingleLine>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5" tab="迷你面积图" style="display: flex; justify-content: center">
|
||||
<SingleLine :chartData="barDataSource" width="30%" height="50vh"></SingleLine>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="6" tab="多行折线图">
|
||||
<LineMulti :chartData="barMultiData" height="50vh" :option="multiBarOption" type="line"></LineMulti>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="7" tab="饼图">
|
||||
<pie :chartData="pieData" height="40vh" :option="{ title: { text: '基础饼状图', left: 'center' } }" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="8" tab="雷达图">
|
||||
<Radar :chartData="radarData" height="50vh"></Radar>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="9" tab="仪表盘">
|
||||
<Gauge :chartData="{ name: '出勤率', value: 70 }" height="50vh"></Gauge>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="10" tab="折柱图">
|
||||
<BarAndLine :chartData="barLineData" height="50vh"></BarAndLine>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="11" tab="排名列表">
|
||||
<RankList title="门店销售排行榜" :list="rankList" style="width: 600px; margin: 0 auto"></RankList>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="13" tab="趋势">
|
||||
<trend title="Trend" term="Trend：" :percentage="30" />
|
||||
</a-tab-pane>
|
||||
<!--暂无-->
|
||||
<!-- <a-tab-pane key="14" tab="进度条">
|
||||
<Bar :option="{xAxis:{show:false},yAxis:{show:false}}" :chartData="chartData" width="100px" height="50px"></Bar>
|
||||
</a-tab-pane>-->
|
||||
<!--<a-tab-pane key="15" tab="水波图"></a-tab-pane>-->
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { getData } from './chartdemo.data.ts';
|
||||
import Bar from '/@/components/chart/Bar.vue';
|
||||
import BarMulti from '/@/components/chart/BarMulti.vue';
|
||||
import SingleLine from '/@/components/chart/SingleLine.vue';
|
||||
import LineMulti from '/@/components/chart/LineMulti.vue';
|
||||
import Pie from '/@/components/chart/Pie.vue';
|
||||
import Radar from '/@/components/chart/Radar.vue';
|
||||
import Gauge from '/@/components/chart/Gauge.vue';
|
||||
import RankList from '/@/components/chart/RankList.vue';
|
||||
import Trend from '/@/components/chart/Trend.vue';
|
||||
import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
||||
|
||||
const activeKey = ref('1');
|
||||
const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData;
|
||||
const multiBarOption = {
|
||||
title: { text: '多列柱状图', left: 'center' },
|
||||
};
|
||||
const rankList = loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店');
|
||||
//tab切换
|
||||
function tabChange(key) {
|
||||
console.log('切换的key:', key);
|
||||
}
|
||||
function loadData(x, y, max, min, before = '', after = '月') {
|
||||
let data = [];
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
data.push({
|
||||
[x]: `${before}${i + 1}${after}`,
|
||||
[y]: Math.floor(Math.random() * max) + min,
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
</script>
|
||||
135
jeecgboot-vue3/src/views/report/statisticst/index.vue
Normal file
135
jeecgboot-vue3/src/views/report/statisticst/index.vue
Normal file
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<a-card :bordered="false" style="height: 100%">
|
||||
<a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
|
||||
<a-tab-pane key="bar" tab="柱状图">
|
||||
<a-row>
|
||||
<a-col :span="10">
|
||||
<a-radio-group v-model:value="barType" @change="statisticst">
|
||||
<a-radio-button value="year">按年统计</a-radio-button>
|
||||
<a-radio-button value="month">按月统计</a-radio-button>
|
||||
<a-radio-button value="category">按类别统计</a-radio-button>
|
||||
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<Bar :chartData="dataSource" height="50vh"></Bar>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="pie" tab="饼状图" force-render>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="10">
|
||||
<a-radio-group v-model:value="pieType" @change="statisticst">
|
||||
<a-radio-button value="year">按年统计</a-radio-button>
|
||||
<a-radio-button value="month">按月统计</a-radio-button>
|
||||
<a-radio-button value="category">按类别统计</a-radio-button>
|
||||
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-col>
|
||||
<Pie :chartData="dataSource" height="40vh"></Pie>
|
||||
</a-row>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { ref, unref, reactive } from 'vue';
|
||||
import Bar from '/@/components/chart/Bar.vue';
|
||||
import Pie from '/@/components/chart/Pie.vue';
|
||||
|
||||
const activeKey = ref('bar');
|
||||
const barType = ref('year');
|
||||
const pieType = ref('year');
|
||||
const dataSource = ref([]);
|
||||
const url = reactive({
|
||||
getYearCountInfo: '/mock/api/report/getYearCountInfo',
|
||||
getMonthCountInfo: '/mock/api/report/getMonthCountInfo',
|
||||
getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
|
||||
getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo',
|
||||
});
|
||||
|
||||
async function loadDate(url, type, params) {
|
||||
const res = await defHttp.get({ url, params }, { isTransformResponse: false, errorMessageMode: 'none' });
|
||||
if (res.success) {
|
||||
dataSource.value = [];
|
||||
switch (type) {
|
||||
case 'year':
|
||||
getYearCountSource(res.result);
|
||||
break;
|
||||
case 'month':
|
||||
getMonthCountSource(res.result);
|
||||
break;
|
||||
case 'category':
|
||||
getCategoryCountSource(res.result);
|
||||
break;
|
||||
case 'cabinet':
|
||||
getCabinetCountSource(res.result);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
function getYearCountSource(data) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
dataSource.value.push({
|
||||
name: `${data[i].year}年`,
|
||||
value: data[i].yearcount,
|
||||
});
|
||||
}
|
||||
}
|
||||
function getMonthCountSource(data) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
dataSource.value.push({
|
||||
name: `${data[i].month}`,
|
||||
value: data[i].monthcount,
|
||||
});
|
||||
}
|
||||
}
|
||||
function getCategoryCountSource(data) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
dataSource.value.push({
|
||||
name: `${data[i].classifyname}`,
|
||||
value: data[i].cntrnocount,
|
||||
});
|
||||
}
|
||||
}
|
||||
function getCabinetCountSource(data) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
dataSource.value.push({
|
||||
name: `${data[i].cabinetname}`,
|
||||
value: data[i].cabinetcocunt,
|
||||
});
|
||||
}
|
||||
}
|
||||
// 选择统计类别
|
||||
function statisticst(e) {
|
||||
if (unref(activeKey) === 'pie') {
|
||||
loadDate(getUrl(unref(pieType)), unref(pieType), {});
|
||||
} else {
|
||||
loadDate(getUrl(unref(barType)), unref(barType), {});
|
||||
}
|
||||
}
|
||||
|
||||
function getUrl(type) {
|
||||
if (type === 'year') {
|
||||
return url.getYearCountInfo;
|
||||
}
|
||||
if (type === 'month') {
|
||||
return url.getMonthCountInfo;
|
||||
}
|
||||
if (type === 'category') {
|
||||
return url.getCntrNoCountInfo;
|
||||
}
|
||||
if (type === 'cabinet') {
|
||||
return url.getCabinetCountInfo;
|
||||
}
|
||||
}
|
||||
//tab切换
|
||||
function tabChange(key) {
|
||||
console.log('切换的key:', key);
|
||||
}
|
||||
loadDate(url.getYearCountInfo, 'year', {});
|
||||
</script>
|
||||
Reference in New Issue
Block a user