no message
parent
173c639d5e
commit
36cb845603
|
|
@ -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>
|
||||||
|
|
@ -13,17 +13,20 @@
|
||||||
<a-range-picker :style="{ width: '256px' }" />
|
<a-range-picker :style="{ width: '256px' }" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<a-tab-pane loading="true" tab="销售额" key="1">
|
<a-tab-pane loading="true" tab="近一周出入库趋势" key="1">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
<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>
|
||||||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||||||
<RankList title="门店销售排行榜" :list="rankList" />
|
<RankList title="门店销售排行榜" :list="rankList" />
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane tab="销售趋势" key="2">
|
<!-- <a-tab-pane tab="销售趋势" key="2">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
<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" />
|
<Bar :chartData="barData.reverse()" :option="{ title: { text: '', textStyle: { fontWeight: 'lighter' } } }" height="40vh" :seriesColor="seriesColor" />
|
||||||
|
|
@ -32,16 +35,16 @@
|
||||||
<RankList title="门店销售排行榜" :list="rankList" />
|
<RankList title="门店销售排行榜" :list="rankList" />
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</a-tab-pane>
|
</a-tab-pane>-->
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import Bar from '/@/components/chart/Bar.vue';
|
|
||||||
import RankList from '/@/components/chart/RankList.vue';
|
import RankList from '/@/components/chart/RankList.vue';
|
||||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||||
|
import OutAndInBar from '@/components/chart/OutAndInBar.vue';
|
||||||
|
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
|
|
@ -58,13 +61,20 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const barData = [];
|
const testChartData = [
|
||||||
for (let i = 0; i < 12; i += 1) {
|
{ name: '2026-01-14', type: '入库', value: 336 },
|
||||||
barData.push({
|
{ name: '2026-01-14', type: '出库', value: 198 },
|
||||||
name: `${i + 1}月`,
|
{ name: '2026-01-15', type: '入库', value: 392 },
|
||||||
value: Math.floor(Math.random() * 1000) + 200,
|
{ 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(() => {
|
const seriesColor = computed(() => {
|
||||||
return getThemeColor.value
|
return getThemeColor.value
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,6 @@
|
||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
import ChartGroupCard from '../components/ChartGroupCard.vue';
|
import ChartGroupCard from '../components/ChartGroupCard.vue';
|
||||||
import SaleTabCard from '../components/SaleTabCard.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 { getLoginfo, getVisitInfo } from '../api.ts';
|
||||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue