tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 整合echarts,添加柱状图、饼图、漏斗和雷达图

Browse Source
This commit is contained in:
郝先瑞
2022-01-24 00:38:22 +08:00
parent d02a8e27ce
commit 35ceddc39a
8 changed files with 501 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -9,7 +9,7 @@ export default {
name: 'App'
}
</script>
<style >
<style>
/*表格未对齐*/
.el-table__header col[name="gutter"] {
display: table-cell !important;

2
src/directive/permission/index.ts
View File

@@ -11,7 +11,7 @@ export const hasPerm: Directive = {
if (roles.includes('ROOT')) {
return true
}
// 其他角色按钮权限校验
// 「其他角色」按钮权限校验
const {value} = binding;
if (value) {
const requiredPerms = value; // DOM绑定需要的按钮权限标识

143
src/views/dashboard/components/BarChart.vue Normal file
View File

@@ -0,0 +1,143 @@
<!-- 柱状图 -->
<template>
<div
:id="id"
:class="className"
:style="{height, width}"
/>
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
const props = defineProps({
id: {
type: String,
default: 'barChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '200px',
required: true
},
height: {
type: String,
default: '200px',
required: true
}
})
function initChart() {
const barChart = init(document.getElementById(props.id) as HTMLDivElement)
barChart.setOption({
title: {
show: true,
text: '分公司业绩总览(2021年财报)',
x: 'center',
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color:'#096b92'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
x: 'center',
y: 'bottom',
data: ['收入', '毛利润', '收入增长率', '利润增长率']
},
xAxis: [
{
type: 'category',
data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽', '湖南', '山东','海外'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 10000,
interval: 2000,
axisLabel: {
formatter: '{value} '
}
},
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: '收入',
type: 'bar',
data: [
8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213
],
barWidth : 20
},
{
name: '毛利润',
type: 'bar',
data: [
6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213, 8000,8200, 7000
],
barWidth : 20
},
{
name: '收入增长率',
type: 'line',
yAxisIndex: 1,
data: [42, 41, 53, 65, 67, 65, 52, 45, 43, 54, 42,46]
},
{
name: '利润增长率',
type: 'line',
yAxisIndex: 1,
data: [82, 81, 56, 45, 51, 65, 65, 67, 78, 76, 67, 78]
}
]
})
}
onMounted(() => {
nextTick(() => {
initChart()
})
})
</script>
<style lang="scss" scoped>
</style>

118
src/views/dashboard/components/FunnelChart.vue Normal file
View File

@@ -0,0 +1,118 @@
<!-- 漏斗图 -->
<template>
<div
:id="id"
:class="className"
:style="{height, width}"
/>
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
const props = defineProps({
id: {
type: String,
default: 'funnelChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '200px',
required: true
},
height: {
type: String,
default: '200px',
required: true
}
})
function initChart() {
const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
pieChart.setOption({
title: {
show: true,
text: '订单线索转化漏斗图',
x: 'center',
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color:'#096b92'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
},
legend: {
x: 'center',
y: 'bottom',
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
},
series: [
{
name: 'Funnel',
type: 'funnel',
left: '20%',
top: 60,
bottom: 60,
width: '60%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' },
{ value: 80, name: 'Click' },
{ value: 100, name: 'Show' }
]
}
]
})
}
onMounted(() => {
nextTick(() => {
initChart()
})
})
</script>
<style lang="scss" scoped>
</style>

94
src/views/dashboard/components/PieChart.vue Normal file
View File

@@ -0,0 +1,94 @@
<!-- 饼图 -->
<template>
<div
:id="id"
:class="className"
:style="{height, width}"
/>
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
const props = defineProps({
id: {
type: String,
default: 'pieChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '200px',
required: true
},
height: {
type: String,
default: '200px',
required: true
}
})
function initChart() {
const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
pieChart.setOption({
title: {
show: true,
text: '产品品类分部总览南丁格尔饼图',
x: 'center',
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color:'#096b92'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
},
legend: {
top: 'bottom'
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 180],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 22, name: 'rose 1' },
{ value: 24, 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' }
]
}
]
})
}
onMounted(() => {
nextTick(() => {
initChart()
})
})
</script>
<style lang="scss" scoped>
</style>

101
src/views/dashboard/components/RadarChart.vue Normal file
View File

@@ -0,0 +1,101 @@
<!-- 雷达图 -->
<template>
<div
:id="id"
:class="className"
:style="{height, width}"
/>
</template>
<script setup lang="ts">
import {nextTick, onMounted} from "vue";
import {init, EChartsOption} from 'echarts'
const props = defineProps({
id: {
type: String,
default: 'radarChart'
},
className: {
type: String,
default: ''
},
width: {
type: String,
default: '200px',
required: true
},
height: {
type: String,
default: '200px',
required: true
}
})
function initChart() {
const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
pieChart.setOption({
title: {
show: true,
text: '订单状态总雷达图',
x: 'center',
padding: 15,
textStyle: {
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
color:'#096b92'
}
},
grid: {
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
},
legend: {
x: 'center',
y: 'bottom',
data: ['待支付', '已发货']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '待支付'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '已发货'
}
]
}
]
})
}
onMounted(() => {
nextTick(() => {
initChart()
})
})
</script>
<style lang="scss" scoped>
</style>

382
src/views/dashboard/index.vue
View File

@@ -30,7 +30,7 @@
<div class="card-panel-text">
总访问量
</div>
<div class="card-panel-num">123456 </div>
<div class="card-panel-num">123456</div>
</div>
</div>
</el-col>
@@ -43,7 +43,7 @@
<div class="card-panel-text">
支付金额
</div>
<div class="card-panel-num">123456 </div>
<div class="card-panel-num">123456</div>
</div>
</div>
</el-col>
@@ -56,322 +56,25 @@
<div class="card-panel-text">
订单数
</div>
<div class="card-panel-num">123456 </div>
<div class="card-panel-num">123456</div>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="12" :xs="24">
<el-card class="project-brief-introduction" style="height: 420px;">
<div slot="header" class="clearfix">
<span>有来项目简介</span>
</div>
<div style="font-size: 14px">
<div class="content">
<el-link target="_blank" style="font-weight: bold" type="primary" href="https://gitee.com/youlaitech/youlai-mall">
youlai-mall
</el-link>
是基于Spring Boot 2.5.0、Spring Cloud 2020 &
Alibaba 2021、vue、element-ui、uni-app快速构建的一套全栈开源商城项目。
<el-divider/>
项目采用微服务、前后端分离开发模式。
<br/>
汇集全栈主流的技术栈；
涉及
<el-link target="_blank" type="primary" size="mini" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
、
<el-link target="_blank" type="success" size="mini" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
、
<el-link target="_blank" type="warning" size="mini" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序</el-link>
和
<el-link target="_blank" type="danger" size="mini" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
等多端的开发。
</div>
<el-divider/>
<el-row :gutter="10">
<el-col :span="8">
<el-badge value="免费开源" style="font-weight: bold">
项目源码地址
</el-badge>
</el-col>
<el-col :span="8">
<el-link target="_blank" type="primary" href="https://github.com/hxrui">github</el-link>
</el-col>
<el-col :span="8">
<el-link target="_blank" type="success" href="https://gitee.com/haoxr">码云</el-link>
</el-col>
</el-row>
<el-divider/>
<el-row :gutter="10">
<el-col :span="8" style="font-weight: bold">
接口文档地址
</el-col>
<el-col :span="8">
<el-link target="_blank" type="primary" href="http://www.youlai.tech:9999/doc.html">线上</el-link>
</el-col>
<el-col :span="8">
<el-link target="_blank" type="success" href="http://localhost:9999/doc.html">本地</el-link>
</el-col>
</el-row>
<el-divider/>
<el-row :gutter="10">
<el-col :span="8" style="font-weight: bold">
后端技术栈
</el-col>
<el-col :span="16">
Spring Boot、Spring Cloud、Spring Cloud Alibaba、Spring Security OAuth2、JWT、Mybatis-Plus、Seata、Sentinel、ELK、Redis
</el-col>
</el-row>
<el-divider/>
<el-row :gutter="10">
<el-col :span="8" style="font-weight: bold">
前端技术栈
</el-col>
<el-col :span="16">
vue、element-ui、uni-app、vue-element-admin
</el-col>
</el-row>
</div>
</el-card>
<BarChart id="barChart" height="400px" width="100%" class="bar-chart-container"/>
<el-row :gutter="40" style="margin-top: 20px">
<el-col :xs="24" :span="8">
<PieChart id="pieChart" height="500px" width="100%" class="pie-chart-container"/>
</el-col>
<el-col :span="12" :xs="24">
<el-card class="technology-stack" style="height: 420px;">
<div slot="header" class="clearfix">
<span>联系信息</span>
</div>
<div style="font-size: 14px">
<el-tabs v-model="contactActiveName">
<el-tab-pane label="开发人员" name="1">
<el-row :gutter="5">
<el-col :span="8">
<el-card :body-style="{ padding: '0px' }" align="center">
<el-image
style="width: 60px; height: 60px"
src="https://gitee.com/haoxr/image/raw/master/hxr.jpg"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/hxr.jpg']">
</el-image>
<div style="padding: 6px;">
<span tyle="font-size: 14px">郝先瑞</span>
<div class="bottom clearfix" style="margin-top: 5px">
<el-tag size="mini">后端</el-tag>
<el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
<el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card :body-style="{ padding: '0px' }" align="center">
<el-image
style="width: 60px; height: 60px"
src="https://gitee.com/haoxr/image/raw/master/20210606203219.png"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/20210606203219.png']">
</el-image>
<div style="padding: 6px;">
<span>Mr.</span>
<div class="bottom clearfix" style="margin-top: 5px">
<el-tag size="mini">后端</el-tag>
<el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
<el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card :body-style="{ padding: '0px' }" align="center">
<el-image
style="width: 60px; height: 60px"
src=" https://gitee.com/haoxr/image/raw/master/20210606203659.png"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/20210606203659.png']">
</el-image>
<div style="padding: 6px;">
<span>???</span>
<div class="bottom clearfix" style="margin-top: 5px">
<el-tag type="warning" size="mini">??</el-tag>
</div>
</div>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="微信群" name="2">
<el-image
style="width: 210px; height: 210px"
src="https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png']">
</el-image>
<el-link style="margin-top: 10px" type="danger" :underline="false">群二维码过期，请添加开发人员微信备注“有来”</el-link>
</el-tab-pane>
<el-tab-pane label="微信小程序体验码" name="3">
<el-image
style="width: 210px; height: 210px"
src="https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png"
:preview-src-list="['https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png']">
</el-image>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
<el-col :xs="24" :span="8">
<FunnelChart id="funnelChart" height="500px" width="100%" class="pie-chart-container"/>
</el-col>
</el-row>
<el-row :gutter="40">
<el-col :span="6" :xs="24">
<el-card class="technology-stack">
<div slot="header" class="clearfix">
<span>更新日志</span>
</div>
<div style="font-size: 14px">
<el-collapse v-model="updateLogActiveName" accordion>
<el-collapse-item name="1">
<template slot="title">
v1.0.0 - 2021.06.06
<el-tooltip content="版本重大更新" placement="right">
<i style="margin-left: 5px;color: red" class="header-icon el-icon-star-on"></i>
</el-tooltip>
</template>
<div>1. 权限重构，RESTFul URL权限和按钮权限数据归并</div>
<div>2. 新增角色编码逻辑</div>
<div>3. 网关新增本地公钥的方式</div>
<div>4. 认证中心移除MySQL数据源</div>
<div>5. OAuth2客户端官方表oauth_client_details重命名sys_oauth_client</div>
<div>6. 自定义实现ClientDetailsService接口loadClientByClientId方法</div>
<div>7. JWT的权限属性authorities将角色ID调整为角色编码</div>
<div>8. 网关统一鉴权优化，设置了权限规则的请求进行拦截鉴权</div>
<div>9. 菜单、角色管理界面针对小尺寸屏幕友好优化</div>
<div>10. Spring Boot升级 2.4.4 <i class="el-icon-right"></i> 2.5.0</div>
<div>11. Spring Cloud升级 2020.0.2<i class="el-icon-right"></i>2020.0.3</div>
<div>12. Spring Cloud Alibaba升级 2020.0.RC1<i class="el-icon-right"></i>2021.1</div>
<div>13. Nacos服务升级 2.0.0<i class="el-icon-right"></i>2.0.1</div>
<div>14. 表字段统一调整gmt_create<i class="el-icon-right"></i>create_time，gmt_update<i
class="el-icon-right"></i>update-time
</div>
<div>15. 前端管理控制台优化</div>
<div>16. JWT的密钥对修改，youlai.jks<i class="el-icon-right"></i>jwt.jks</div>
</el-collapse-item>
</el-collapse>
</div>
</el-card>
</el-col>
<el-col :span="6" :xs="24">
<el-card class="technology-stack">
<div slot="header" class="clearfix">
<span>计划事项</span>
</div>
<div style="font-size: 14px">
<todo-list/>
</div>
</el-card>
</el-col>
<el-col :span="12" :xs="24">
<el-card class="technology-stack">
<div slot="header" class="clearfix">
<span>项目文档</span>
</div>
<div style="font-size: 14px">
<el-tabs v-model="documentActiveName">
<el-tab-pane label="后端文档" name="1">
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13581881.html">1. Spring Cloud实战 |
第一篇：Windows搭建Nacos服务
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13584204.html">2. Spring Cloud实战 |
第二篇：Spring Cloud整合Nacos实现注册中心
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13585125.html">3. Spring Cloud实战 |
第三篇：Spring Cloud整合Nacos实现配置中心
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13608650.html">4. Spring Cloud实战 |
第四篇：Spring Cloud整合Gateway实现API网关
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13615592.html">5. Spring Cloud实战 |
第五篇：Spring Cloud整合OpenFeign实现微服务之间的调用
</el-link>
<el-divider/>
<el-badge value="热">
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13719356.html">6. Spring Cloud实战 |
第六篇：Spring Cloud Gateway+Spring Security OAuth2+JWT实现微服务统一认证授权
</el-link>
</el-badge>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13740264.html">7. Spring Cloud实战
|
最七篇：Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14022632.html">8. Spring Cloud实战
|
最八篇：Spring Cloud +Spring Security OAuth2+ Vue前后端分离模式下无感知刷新实现JWT续期
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14028366.html">9. Spring Cloud实战
|
最九篇：Spring Security OAuth2认证服务器统一认证自定义异常处理
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14280184.html">10. Spring Cloud&
Alibaba 实战 | 第十篇 ：Spring Cloud + Nacos整合Seata 1.4.1最新版本实现微服务架构中的分布式事务，进阶之路必须要迈过的槛
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14396990.html">11. Spring Cloud &
Alibaba 实战 | 第十一篇 ：Spring Cloud Gateway网关实现对RESTful接口权限和按钮权限细粒度控制
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14720405.html">12. Spring Cloud &
Alibaba 实战 | 第十二篇： Sentinel+Nacos实现流控、熔断降级，赋能拥有降级功能的Feign新技能熔断，做到熔断降级双剑合璧
</el-link>
</el-tab-pane>
<el-tab-pane label="前端文档" name="2">
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13624548.html">
1. vue-element-admin实战 | 第一篇： 移除mock接入微服务接口，搭建SpringCloud+Vue前后端分离管理平台
</el-link>
<el-divider/>
<el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13676619.html">
2. vue-element-admin实战 | 第二篇： 最小改动接入后台实现根据权限动态加载菜单
</el-link>
</el-tab-pane>
<el-tab-pane label="微信小程序文档" name="3">
<el-badge value="荐" style="margin-top: 10px">
<el-link target="_blank" type="primary"
href="https://www.cnblogs.com/haoxianrui/p/13882310.html">
1. vue+uni-app商城实战 | 第一篇：从0到1快速开发一个商城微信小程序，无缝接入Spring Cloud
OAuth2认证授权登录
</el-link>
</el-badge>
</el-tab-pane>
<el-tab-pane label="应用部署文档" name="4" align="center">
<svg-icon style="width: 200px;height: 200px;" icon-class="await"/>
</el-tab-pane>
<el-tab-pane name="5">
<span slot="label" class="start-doc">
<el-badge value="必读" style="margin-top:8px;">
<div style="margin-top: -10px">项目启动说明</div>
</el-badge>
</span>
<el-link target="_blank" type="primary"
href="https://gitee.com/youlaitech/youlai-mall#1-%E5%90%8E%E5%8F%B0%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%90%AF%E5%8A%A8">1. 后端微服务启动
</el-link>
<el-divider/>
<el-link target="_blank" type="primary"
href="https://gitee.com/youlaitech/youlai-mall#2-%E5%90%8E%E5%8F%B0%E5%89%8D%E7%AB%AF%E5%90%AF%E5%8A%A8">2. 管理前端启动
</el-link>
<el-divider/>
<el-link target="_blank" type="primary"
href="https://gitee.com/youlaitech/youlai-mall#3-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%90%AF%E5%8A%A8">3. 微信小程序启动
</el-link>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
<el-col :xs="24" :span="8">
<RadarChart id="radarChart" height="500px" width="100%" class="pie-chart-container"/>
</el-col>
</el-row>
@@ -382,7 +85,12 @@
import GithubCorner from '@/components/GithubCorner/index.vue'
import TodoList from './components/TodoList/index.vue'
import {computed, reactive, toRefs} from "vue";
import SvgIcon from '@/components/SvgIcon/index.vue'
import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue";
import RadarChart from "./components/RadarChart.vue";
import FunnelChart from "./components/FunnelChart.vue";
import {useUserStoreHook} from "@/store/modules/user"
@@ -390,14 +98,13 @@ const roles = computed(() => useUserStoreHook().roles);
const avatar = computed(() => useUserStoreHook().avatar);
const nickname = computed(() => useUserStoreHook().nickname);
const state =reactive({
const state = reactive({
updateLogActiveName: '1',
contactActiveName: '1',
documentActiveName: '1'
})
const {updateLogActiveName,contactActiveName,documentActiveName} = toRefs(state)
const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(state)
</script>
@@ -409,22 +116,6 @@ const {updateLogActiveName,contactActiveName,documentActiveName} = toRefs(state
background-color: rgb(240, 242, 245);
position: relative;
.project-brief-introduction {
.el-divider--horizontal {
margin: 16px 0;
}
.content {
line-height: 20px;
}
margin-bottom: 24px;
}
.technology-stack {
margin-bottom: 24px;
}
.github-corner {
position: absolute;
top: 0px;
@@ -505,33 +196,37 @@ const {updateLogActiveName,contactActiveName,documentActiveName} = toRefs(state
.icon-people {
color: #40c9c6;
.svg-icon{
width: 3em!important;
height: 3em!important;
.svg-icon {
width: 3em !important;
height: 3em !important;
}
}
.icon-message {
color: #36a3f7;
.svg-icon{
width: 3em!important;
height: 3em!important;
.svg-icon {
width: 3em !important;
height: 3em !important;
}
}
.icon-money {
color: #f4516c;
.svg-icon{
width: 3.2em!important;
height: 3.2em!important;
.svg-icon {
width: 3.2em !important;
height: 3.2em !important;
}
}
.icon-shopping {
color: #34bfa3;
.svg-icon{
width: 3em!important;
height: 3em!important;
.svg-icon {
width: 3em !important;
height: 3em !important;
}
}
@@ -562,6 +257,13 @@ const {updateLogActiveName,contactActiveName,documentActiveName} = toRefs(state
}
}
.bar-chart-container {
background: #ffffff;
}
.pie-chart-container {
background: #ffffff;
}
}
</style>