Skip to content

Commit 6f0c05d

Browse files
jinmao88jinmao88
authored
dashboard (#6)
* feat(dashboard): 增加dashboard示例 * feat(chart-ui): 增加图表UI组件库 * feat(dashboard): 完善dashboard示例
1 parent 303a200 commit 6f0c05d

File tree

16 files changed

+690
-1
lines changed

16 files changed

+690
-1
lines changed

‎apps/web-antd/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@vben/styles": "workspace:*",
3838
"@vben/types": "workspace:*",
3939
"@vben/universal-ui": "workspace:*",
40+
"@vben/chart-ui": "workspace:*",
4041
"@vben/utils": "workspace:*",
4142
"@vueuse/core": "^10.11.0",
4243
"ant-design-vue": "^4.2.3",

‎apps/web-antd/src/views/dashboard/index.vue

Lines changed: 243 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,249 @@
11
<script lang="ts" setup>
2+
import { ref } from 'vue';
3+
24
defineOptions({ name: 'WelCome' });
5+
import { Dashboard } from '@vben/universal-ui';
6+
import { echartsInstance as echarts } from '@vben/chart-ui';
7+
const cardList = ref([
8+
{
9+
title: '访问数',
10+
extra: '月',
11+
leftContent: '2000',
12+
rightContent: 'flat-color-icons:conference-call',
13+
leftFooter: '总访问数',
14+
color: 'green',
15+
rightFooter: '5000',
16+
},
17+
{
18+
title: '销售额',
19+
extra: '日',
20+
leftContent: '$1350',
21+
rightContent: 'flat-color-icons:sales-performance',
22+
leftFooter: '总销售额',
23+
color: 'red',
24+
rightFooter: '$550000',
25+
},
26+
]);
27+
const chartTabs = ref([
28+
{
29+
name: '1',
30+
title: '流量趋势',
31+
option: {
32+
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
33+
34+
tooltip: {
35+
trigger: 'axis',
36+
axisPointer: {
37+
type: 'cross',
38+
// label: {
39+
// backgroundColor: '#6a7985',
40+
// },
41+
},
42+
},
43+
legend: {
44+
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
45+
},
46+
toolbox: {
47+
feature: {
48+
saveAsImage: {},
49+
},
50+
},
51+
grid: {
52+
left: '3%',
53+
right: '4%',
54+
bottom: '3%',
55+
containLabel: true,
56+
},
57+
xAxis: [
58+
{
59+
type: 'category',
60+
boundaryGap: false,
61+
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
62+
},
63+
],
64+
yAxis: [
65+
{
66+
type: 'value',
67+
},
68+
],
69+
series: [
70+
{
71+
name: 'Line 1',
72+
type: 'line',
73+
stack: 'Total',
74+
smooth: true,
75+
lineStyle: {
76+
width: 0,
77+
},
78+
showSymbol: false,
79+
areaStyle: {
80+
opacity: 0.8,
81+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
82+
{
83+
offset: 0,
84+
color: 'rgb(128, 255, 165)',
85+
},
86+
{
87+
offset: 1,
88+
color: 'rgb(1, 191, 236)',
89+
},
90+
]),
91+
},
92+
emphasis: {
93+
focus: 'series',
94+
},
95+
data: [140, 232, 101, 264, 90, 340, 250],
96+
},
97+
{
98+
name: 'Line 2',
99+
type: 'line',
100+
stack: 'Total',
101+
smooth: true,
102+
lineStyle: {
103+
width: 0,
104+
},
105+
showSymbol: false,
106+
areaStyle: {
107+
opacity: 0.8,
108+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
109+
{
110+
offset: 0,
111+
color: 'rgb(0, 221, 255)',
112+
},
113+
{
114+
offset: 1,
115+
color: 'rgb(77, 119, 255)',
116+
},
117+
]),
118+
},
119+
emphasis: {
120+
focus: 'series',
121+
},
122+
data: [120, 282, 111, 234, 220, 340, 310],
123+
},
124+
{
125+
name: 'Line 3',
126+
type: 'line',
127+
stack: 'Total',
128+
smooth: true,
129+
lineStyle: {
130+
width: 0,
131+
},
132+
showSymbol: false,
133+
areaStyle: {
134+
opacity: 0.8,
135+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
136+
{
137+
offset: 0,
138+
color: 'rgb(55, 162, 255)',
139+
},
140+
{
141+
offset: 1,
142+
color: 'rgb(116, 21, 219)',
143+
},
144+
]),
145+
},
146+
emphasis: {
147+
focus: 'series',
148+
},
149+
data: [320, 132, 201, 334, 190, 130, 220],
150+
},
151+
{
152+
name: 'Line 4',
153+
type: 'line',
154+
stack: 'Total',
155+
smooth: true,
156+
lineStyle: {
157+
width: 0,
158+
},
159+
showSymbol: false,
160+
areaStyle: {
161+
opacity: 0.8,
162+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
163+
{
164+
offset: 0,
165+
color: 'rgb(255, 0, 135)',
166+
},
167+
{
168+
offset: 1,
169+
color: 'rgb(135, 0, 157)',
170+
},
171+
]),
172+
},
173+
emphasis: {
174+
focus: 'series',
175+
},
176+
data: [220, 402, 231, 134, 190, 230, 120],
177+
},
178+
{
179+
name: 'Line 5',
180+
type: 'line',
181+
stack: 'Total',
182+
smooth: true,
183+
lineStyle: {
184+
width: 0,
185+
},
186+
showSymbol: false,
187+
label: {
188+
show: true,
189+
position: 'top',
190+
},
191+
areaStyle: {
192+
opacity: 0.8,
193+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
194+
{
195+
offset: 0,
196+
color: 'rgb(255, 191, 0)',
197+
},
198+
{
199+
offset: 1,
200+
color: 'rgb(224, 62, 76)',
201+
},
202+
]),
203+
},
204+
emphasis: {
205+
focus: 'series',
206+
},
207+
data: [220, 302, 181, 234, 210, 290, 150],
208+
},
209+
],
210+
},
211+
},
212+
{
213+
name: '2',
214+
title: '访问量',
215+
option: {
216+
xAxis: {
217+
type: 'category',
218+
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
219+
},
220+
yAxis: {
221+
type: 'value',
222+
},
223+
series: [
224+
{
225+
data: [
226+
120,
227+
{
228+
value: 200,
229+
itemStyle: {
230+
color: '#a90000',
231+
},
232+
},
233+
150,
234+
80,
235+
70,
236+
110,
237+
130,
238+
],
239+
type: 'bar',
240+
},
241+
],
242+
},
243+
},
244+
]);
3245
</script>
4246

5247
<template>
6-
<div>dashboard</div>
248+
<Dashboard :cardList="cardList" :chartTabs="chartTabs"></Dashboard>
7249
</template>

‎packages/business/chart-ui/package.json

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "@vben/chart-ui",
3+
"version": "5.0.0",
4+
"homepage": "https://github.com/vbenjs/vue-vben-admin",
5+
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/vbenjs/vue-vben-admin.git",
9+
"directory": "packages/business/chart-ui"
10+
},
11+
"license": "MIT",
12+
"type": "module",
13+
"scripts": {
14+
"build": "pnpm vite build",
15+
"prepublishOnly": "npm run build"
16+
},
17+
"files": [
18+
"dist"
19+
],
20+
"sideEffects": [
21+
"**/*.css"
22+
],
23+
"main": "./dist/index.mjs",
24+
"module": "./dist/index.mjs",
25+
"exports": {
26+
".": {
27+
"types": "./src/index.ts",
28+
"development": "./src/index.ts",
29+
"default": "./dist/index.mjs"
30+
}
31+
},
32+
"publishConfig": {
33+
"exports": {
34+
".": {
35+
"default": "./dist/index.mjs"
36+
}
37+
}
38+
},
39+
"peerDependencies": {
40+
"@vben-core/design": "workspace:*"
41+
},
42+
"dependencies": {
43+
"@vben-core/preferences": "workspace:*",
44+
"echarts": "^5.5.0",
45+
"vue": "^3.4.29"
46+
},
47+
"devDependencies": {
48+
"@vben/types": "workspace:*"
49+
}
50+
}

‎packages/business/chart-ui/src/chart.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
import { echartsInstance, ECOption } from './index';
3+
import { onMounted, ref, unref, warn } from 'vue';
4+
import { usePreferences } from '@vben-core/preferences';
5+
const { isDark } = usePreferences();
6+
interface Props {
7+
height?: string;
8+
width?: string;
9+
}
10+
withDefaults(defineProps<Props>(), {
11+
height: '500px',
12+
width: '100%',
13+
});
14+
15+
const instance = ref();
16+
const instanceRef = ref(HTMLElement);
17+
onMounted(() => {
18+
instance.value = echartsInstance.init(
19+
instanceRef.value,
20+
isDark.value ? 'dark' : '',
21+
);
22+
});
23+
const setChart = (option: ECOption, clear: boolean = true) => {
24+
const c = unref(instance);
25+
if (!c) {
26+
warn('instance is null');
27+
return;
28+
}
29+
if (clear) c.clear();
30+
c.setOption(option);
31+
};
32+
defineExpose({ setChart });
33+
</script>
34+
35+
<template>
36+
<div ref="instanceRef" :style="{ height, width }"></div>
37+
</template>

0 commit comments

Comments
 (0)