GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 添加插件页面：图表

Browse Source 
ISSUES CLOSED: \
This commit is contained in:
Soybean 2022-05-29 23:44:47 +08:00
parent 39854a492b
commit 0a46ea0844
8 changed files with 450 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
mock/model/route.ts
View File

@ -221,6 +221,47 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
requiresAuth: true,
icon: 'ic:baseline-local-printshop'
}
},
{
name: 'plugin_charts',
path: '/plugin/charts',
component: 'multi',
children: [
{
name: 'plugin_charts_echarts',
path: '/plugin/charts/echarts',
component: 'self',
meta: {
title: 'ECharts',
requiresAuth: true,
icon: 'simple-icons:apacheecharts'
}
},
{
name: 'plugin_charts_d3',
path: '/plugin/charts/d3',
component: 'self',
meta: {
title: 'D3',
requiresAuth: true,
icon: 'simple-icons:d3dotjs'
}
},
{
name: 'plugin_charts_antv',
path: '/plugin/charts/antv',
component: 'self',
meta: {
title: 'AntV',
requiresAuth: true,
icon: 'ant-design:bar-chart-outlined'
}
}
],
meta: {
title: '图表',
icon: 'material-symbols:bar-chart-rounded'
}
}
],
meta: {
@ -592,6 +633,47 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
requiresAuth: true,
icon: 'ic:baseline-local-printshop'
}
},
{
name: 'plugin_charts',
path: '/plugin/charts',
component: 'multi',
children: [
{
name: 'plugin_charts_echarts',
path: '/plugin/charts/echarts',
component: 'self',
meta: {
title: 'ECharts',
requiresAuth: true,
icon: 'simple-icons:apacheecharts'
}
},
{
name: 'plugin_charts_d3',
path: '/plugin/charts/d3',
component: 'self',
meta: {
title: 'D3',
requiresAuth: true,
icon: 'simple-icons:d3dotjs'
}
},
{
name: 'plugin_charts_antv',
path: '/plugin/charts/antv',
component: 'self',
meta: {
title: 'AntV',
requiresAuth: true,
icon: 'ant-design:bar-chart-outlined'
}
}
],
meta: {
title: '图表',
icon: 'material-symbols:bar-chart-rounded'
}
}
],
meta: {

10
src/hooks/business/useEcharts.ts
View File

@ -1,8 +1,8 @@
import { ref, watch, nextTick, onUnmounted, computed } from 'vue';
import type { Ref, ComputedRef } from 'vue';
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts';
import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
import type { BarSeriesOption, LineSeriesOption, PieSeriesOption, ScatterSeriesOption } from 'echarts/charts';
import {
TitleComponent,
LegendComponent,
@ -28,6 +28,7 @@ export type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| PieSeriesOption
| ScatterSeriesOption
| TitleComponentOption
| LegendComponentOption
| TooltipComponentOption
@ -47,6 +48,7 @@ echarts.use([
BarChart,
LineChart,
PieChart,
ScatterChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
@ -55,7 +57,9 @@ echarts.use([
/**
* Echarts hooks函数
* @param options - 图表配置
* @param renderFun - 图表函数(例如：图表监听函数)
* @param darkMode - 暗黑模式
* @param renderFun - 图表渲染函数(例如：图表监听函数)
* @description 按需引入图表组件，没注册的组件需要先引入
*/
export default function useEcharts(
options: Ref<ECOption> | ComputedRef<ECOption>,

43
src/router/modules/charts.ts Normal file
View File

@ -0,0 +1,43 @@
const charts: AuthRoute.Route = {
name: 'plugin_charts',
path: '/plugin/charts',
component: 'multi',
children: [
{
name: 'plugin_charts_echarts',
path: '/plugin/charts/echarts',
component: 'self',
meta: {
title: 'ECharts',
requiresAuth: true,
icon: 'simple-icons:apacheecharts'
}
},
{
name: 'plugin_charts_d3',
path: '/plugin/charts/d3',
component: 'self',
meta: {
title: 'D3',
requiresAuth: true,
icon: 'simple-icons:d3dotjs'
}
},
{
name: 'plugin_charts_antv',
path: '/plugin/charts/antv',
component: 'self',
meta: {
title: 'AntV',
requiresAuth: true,
icon: 'ant-design:bar-chart-outlined'
}
}
],
meta: {
title: '图表',
icon: 'material-symbols:bar-chart-rounded'
}
};
export default charts;

4
src/typings/route.d.ts vendored
View File

@ -36,6 +36,10 @@ declare namespace AuthRoute {
| 'plugin_icon'
| 'plugin_print'
| 'plugin_swiper'
| 'plugin_charts'
| 'plugin_charts_echarts'
| 'plugin_charts_d3'
| 'plugin_charts_antv'
| 'auth-demo'
| 'auth-demo_permission'
| 'auth-demo_super'

278
src/views/dashboard/analysis/components/TopChart/index.vue
View File

@ -39,152 +39,148 @@ const theme = useThemeStore();
const darkMode = computed(() => theme.darkMode);
const { domRef: lineRef } = useEcharts(
ref<ECOption>({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
const lineOptions = ref<ECOption>({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['下载量', '注册数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
color: '#8e9dff',
name: '下载量',
type: 'line',
smooth: true,
stack: 'Total',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.25,
color: '#8e9dff'
},
{
offset: 1,
color: '#fff'
}
]
}
}
},
legend: {
data: ['下载量', '注册数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
color: '#8e9dff',
name: '下载量',
type: 'line',
smooth: true,
stack: 'Total',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.25,
color: '#8e9dff'
},
{
offset: 1,
color: '#fff'
}
]
}
},
emphasis: {
focus: 'series'
},
data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
},
{
color: '#26deca',
name: '注册数',
type: 'line',
smooth: true,
stack: 'Total',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.25,
color: '#26deca'
},
{
offset: 1,
color: '#fff'
}
]
}
},
emphasis: {
focus: 'series'
},
data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
}
]
}),
darkMode
);
emphasis: {
focus: 'series'
},
data: [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
},
{
color: '#26deca',
name: '注册数',
type: 'line',
smooth: true,
stack: 'Total',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.25,
color: '#26deca'
},
{
offset: 1,
color: '#fff'
}
]
}
},
emphasis: {
focus: 'series'
},
data: [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
}
]
});
const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
const { domRef: pieRef } = useEcharts(
ref<ECOption>({
tooltip: {
trigger: 'item'
},
legend: {
bottom: '1%',
left: 'center',
const pieOptions = ref<ECOption>({
tooltip: {
trigger: 'item'
},
legend: {
bottom: '1%',
left: 'center',
itemStyle: {
borderWidth: 0
}
},
series: [
{
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
name: '时间安排',
type: 'pie',
radius: ['45%', '75%'],
avoidLabelOverlap: false,
itemStyle: {
borderWidth: 0
}
},
series: [
{
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
name: '时间安排',
type: 'pie',
radius: ['45%', '75%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 1
},
borderRadius: 10,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '12'
}
},
labelLine: {
show: false
},
data: [
{ value: 20, name: '学习' },
{ value: 10, name: '娱乐' },
{ value: 30, name: '工作' },
{ value: 40, name: '休息' }
]
}
]
}),
darkMode
);
show: true,
fontSize: '12'
}
},
labelLine: {
show: false
},
data: [
{ value: 20, name: '学习' },
{ value: 10, name: '娱乐' },
{ value: 30, name: '工作' },
{ value: 40, name: '休息' }
]
}
]
});
const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
</script>
<style scoped></style>

9
src/views/plugin/charts/antv/index.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<h3>antv</h3>
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

9
src/views/plugin/charts/d3/index.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<h3>d3</h3>
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

159
src/views/plugin/charts/echarts/index.vue Normal file
View File

@ -0,0 +1,159 @@
<template>
<n-space :vertical="true" :size="16">
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div ref="pieRef" class="h-400px"></div>
</n-card>
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div ref="lineRef" class="h-400px"></div>
</n-card>
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div ref="barRef" class="h-400px"></div>
</n-card>
<n-card :bordered="false" class="rounded-16px shadow-sm">
<div ref="scatterRef" class="h-400px"></div>
</n-card>
</n-space>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useThemeStore } from '@/store';
import { useEcharts, type ECOption } from '@/hooks';
const theme = useThemeStore();
const darkMode = computed(() => theme.darkMode);
const pieOptions = ref<ECOption>({
legend: {},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 150],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
});
const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
const lineOptions = ref<ECOption>({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
});
const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
const barOptions = ref<ECOption>({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
});
const { domRef: barRef } = useEcharts(barOptions, darkMode);
const scatterOptions = ref<ECOption>({
tooltip: {},
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}
]
});
const { domRef: scatterRef } = useEcharts(scatterOptions, darkMode);
</script>
<style scoped></style>