Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
mall-admin
提交
79027839
M
mall-admin
项目概览
有来技术
/
mall-admin
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
mall-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
79027839
编写于
3月 05, 2022
作者:
郝
郝先瑞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor(chart): 图标颜色优化
上级
e0a85760
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
59 addition
and
18 deletion
+59
-18
src/views/dashboard/components/Chart/BarChart.vue
src/views/dashboard/components/Chart/BarChart.vue
+29
-9
src/views/dashboard/components/Chart/FunnelChart.vue
src/views/dashboard/components/Chart/FunnelChart.vue
+1
-2
src/views/dashboard/components/Chart/PieChart.vue
src/views/dashboard/components/Chart/PieChart.vue
+16
-6
src/views/dashboard/components/Chart/RadarChart.vue
src/views/dashboard/components/Chart/RadarChart.vue
+13
-1
未找到文件。
src/views/dashboard/components/Chart/BarChart.vue
浏览文件 @
79027839
<!--
柱状
图 -->
<!--
线 + 柱混合
图 -->
<
template
>
<div
:id=
"id"
...
...
@@ -10,6 +10,7 @@
<
script
setup
lang=
"ts"
>
import
{
nextTick
,
onActivated
,
onBeforeUnmount
,
onDeactivated
,
onMounted
}
from
"
vue
"
;
import
{
init
,
EChartsOption
}
from
'
echarts
'
import
*
as
echarts
from
'
echarts
'
;
import
resize
from
'
@/utils/resize
'
const
props
=
defineProps
({
...
...
@@ -47,14 +48,14 @@ function initChart() {
barChart
.
setOption
({
title
:
{
show
:
true
,
text
:
'
分公司
业绩总览(2021年)
'
,
text
:
'
业绩总览(2021年)
'
,
x
:
'
center
'
,
padding
:
15
,
textStyle
:
{
fontSize
:
18
,
fontStyle
:
'
normal
'
,
fontWeight
:
'
bold
'
,
color
:
'
#
096b92
'
color
:
'
#
337ecc
'
}
},
grid
:
{
...
...
@@ -113,28 +114,47 @@ function initChart() {
data
:
[
8000
,
8200
,
7000
,
6200
,
6500
,
5500
,
4500
,
4200
,
3800
,
],
barWidth
:
20
barWidth
:
20
,
itemStyle
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
'
#83bff6
'
},
{
offset
:
0.5
,
color
:
'
#188df0
'
},
{
offset
:
1
,
color
:
'
#188df0
'
}
])
}
},
{
name
:
'
毛利润
'
,
type
:
'
bar
'
,
data
:
[
6
200
,
6500
,
5500
,
4500
,
4200
,
3800
,
4200
,
6700
,
5213
,
6
700
,
6800
,
6300
,
5213
,
4500
,
4200
,
4200
,
3800
],
barWidth
:
20
barWidth
:
20
,
itemStyle
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
'
#25d73c
'
},
{
offset
:
0.5
,
color
:
'
#1bc23d
'
},
{
offset
:
1
,
color
:
'
#179e61
'
}
])
}
},
{
name
:
'
收入增长率
'
,
type
:
'
line
'
,
yAxisIndex
:
1
,
data
:
[
42
,
41
,
53
,
65
,
67
,
65
,
52
,
45
,
43
]
data
:
[
65
,
67
,
65
,
53
,
47
,
45
,
43
,
42
,
41
],
itemStyle
:
{
color
:
'
#67C23A
'
}
},
{
name
:
'
利润增长率
'
,
type
:
'
line
'
,
yAxisIndex
:
1
,
data
:
[
82
,
81
,
56
,
45
,
51
,
65
,
65
,
67
,
78
]
data
:
[
80
,
81
,
78
,
67
,
65
,
60
,
56
,
51
,
45
],
itemStyle
:
{
color
:
'
#409EFF
'
}
}
]
}
as
EChartsOption
)
...
...
src/views/dashboard/components/Chart/FunnelChart.vue
浏览文件 @
79027839
...
...
@@ -11,7 +11,6 @@
import
{
nextTick
,
onActivated
,
onBeforeUnmount
,
onDeactivated
,
onMounted
}
from
"
vue
"
;
import
{
init
,
EChartsOption
}
from
'
echarts
'
import
resize
from
'
@/utils/resize
'
import
{
FunnelChart
}
from
"
echarts/charts
"
;
const
props
=
defineProps
({
id
:
{
...
...
@@ -55,7 +54,7 @@ function initChart() {
fontSize
:
18
,
fontStyle
:
'
normal
'
,
fontWeight
:
'
bold
'
,
color
:
'
#
096b92
'
color
:
'
#
337ecc
'
}
},
grid
:
{
...
...
src/views/dashboard/components/Chart/PieChart.vue
浏览文件 @
79027839
...
...
@@ -11,6 +11,7 @@
import
{
nextTick
,
onActivated
,
onBeforeUnmount
,
onDeactivated
,
onMounted
}
from
"
vue
"
;
import
{
init
,
EChartsOption
}
from
'
echarts
'
import
resize
from
"
@/utils/resize
"
;
import
*
as
echarts
from
"
echarts
"
;
const
props
=
defineProps
({
id
:
{
...
...
@@ -54,7 +55,7 @@ function initChart() {
fontSize
:
18
,
fontStyle
:
'
normal
'
,
fontWeight
:
'
bold
'
,
color
:
'
#096b92
'
color
:
'
#337ecc
'
}
},
grid
:
{
...
...
@@ -74,13 +75,22 @@ function initChart() {
center
:
[
'
50%
'
,
'
50%
'
],
roseType
:
'
area
'
,
itemStyle
:
{
borderRadius
:
8
borderRadius
:
6
,
normal
:
{
color
:
function
(
params
:
any
)
{
//自定义颜色
const
colorList
=
[
'
#409EFF
'
,
'
#67C23A
'
,
'
#E6A23C
'
,
'
#F56C6C
'
];
return
colorList
[
params
.
dataIndex
]
}
}
},
data
:
[
{
value
:
26
,
name
:
'
家用电器
'
},
{
value
:
27
,
name
:
'
户外运动
'
},
{
value
:
24
,
name
:
'
汽车用品
'
},
{
value
:
23
,
name
:
'
手机数码
'
}
{
value
:
26
,
name
:
'
家用电器
'
},
{
value
:
27
,
name
:
'
户外运动
'
},
{
value
:
24
,
name
:
'
汽车用品
'
},
{
value
:
23
,
name
:
'
手机数码
'
}
]
}
]
...
...
src/views/dashboard/components/Chart/RadarChart.vue
浏览文件 @
79027839
...
...
@@ -54,7 +54,7 @@ function initChart() {
fontSize
:
18
,
fontStyle
:
'
normal
'
,
fontWeight
:
'
bold
'
,
color
:
'
#
096b92
'
color
:
'
#
337ecc
'
}
},
grid
:
{
...
...
@@ -84,6 +84,18 @@ function initChart() {
{
name
:
'
Budget vs spending
'
,
type
:
'
radar
'
,
itemStyle
:
{
borderRadius
:
6
,
normal
:
{
color
:
function
(
params
:
any
)
{
//自定义颜色
const
colorList
=
[
'
#409EFF
'
,
'
#67C23A
'
,
'
#E6A23C
'
,
'
#F56C6C
'
];
return
colorList
[
params
.
dataIndex
]
}
}
},
data
:
[
{
value
:
[
4200
,
10000
,
20000
,
35000
,
50000
,
18000
],
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录