no message

main
HUOJIN\92525 2026-01-20 19:08:53 +08:00
parent 173c639d5e
commit 36cb845603
3 changed files with 59 additions and 16 deletions

View File

@ -0,0 +1,35 @@
<template>
<div id="main" ref="chartRef" style="width: 600px; height: 400px"></div>
</template>
<script setup lang="ts">
import { useECharts } from '/@/hooks/web/useECharts';
import { Ref, ref, reactive } from 'vue';
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
var app: any = {};
type EChartsOption = echarts.EChartsOption;
var chartDom = document.getElementById('main')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
legend: {},
tooltip: {},
dataset: {
dimensions: ['product', '2015', '2016', '2017'],
source: [
{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 },
],
},
xAxis: { type: 'category' },
yAxis: {},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
};
option && myChart.setOption(option);
</script>
<style scoped lang="less"></style>

View File

@ -13,17 +13,20 @@
<a-range-picker :style="{ width: '256px' }" />
</div>
</template>
<a-tab-pane loading="true" tab="销售额" key="1">
<a-tab-pane loading="true" tab="近一周出入库趋势" key="1">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<Bar :chartData="barData" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" />
<OutAndInBar />
<!--
<BarMulti :chartData="barData" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" />
-->
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<RankList title="门店销售排行榜" :list="rankList" />
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane tab="销售趋势" key="2">
<!-- <a-tab-pane tab="销售趋势" key="2">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<Bar :chartData="barData.reverse()" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" />
@ -32,16 +35,16 @@
<RankList title="门店销售排行榜" :list="rankList" />
</a-col>
</a-row>
</a-tab-pane>
</a-tab-pane>-->
</a-tabs>
</div>
</a-card>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import Bar from '/@/components/chart/Bar.vue';
import { computed } from 'vue';
import RankList from '/@/components/chart/RankList.vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import OutAndInBar from '@/components/chart/OutAndInBar.vue';
defineProps({
@ -58,13 +61,20 @@
});
}
const barData = [];
for (let i = 0; i < 12; i += 1) {
barData.push({
name: `${i + 1}`,
value: Math.floor(Math.random() * 1000) + 200,
});
}
const testChartData = [
{ name: '2026-01-14', type: '入库', value: 336 },
{ name: '2026-01-14', type: '出库', value: 198 },
{ name: '2026-01-15', type: '入库', value: 392 },
{ name: '2026-01-15', type: '出库', value: 100 },
{ name: '2026-01-16', type: '入库', value: 80 },
{ name: '2026-01-16', type: '出库', value: 90 },
{ name: '2026-01-17', type: '入库', value: 60 },
{ name: '2026-01-17', type: '出库', value: 70 },
{ name: '2026-01-18', type: '入库', value: 50 },
{ name: '2026-01-18', type: '出库', value: 40 },
];
const seriesColor = computed(() => {
return getThemeColor.value
})

View File

@ -20,8 +20,6 @@
import { ref, watch } from 'vue';
import ChartGroupCard from '../components/ChartGroupCard.vue';
import SaleTabCard from '../components/SaleTabCard.vue';
import LineMulti from '/@/components/chart/LineMulti.vue';
import HeadInfo from '/@/components/chart/HeadInfo.vue';
import { getLoginfo, getVisitInfo } from '../api.ts';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';