Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
D
dataease
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
zhu
dataease
Commits
6a856867
提交
6a856867
authored
3月 22, 2021
作者:
junjie
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(视图): 1.增加 雷达图、面积堆叠图;2.iconfont样式调整;3.echarts组件配置调整
上级
d6e07577
隐藏空白字符变更
内嵌
并排
正在显示
12 个修改的文件
包含
111 行增加
和
92 行删除
+111
-92
bar-horizontal.svg
frontend/src/icons/svg/bar-horizontal.svg
+1
-1
line-stack.svg
frontend/src/icons/svg/line-stack.svg
+1
-0
pie.svg
frontend/src/icons/svg/pie.svg
+1
-1
radar.svg
frontend/src/icons/svg/radar.svg
+1
-0
zh.js
frontend/src/lang/zh.js
+5
-1
chart.js
frontend/src/views/chart/chart/chart.js
+31
-1
line.js
frontend/src/views/chart/chart/line/line.js
+12
-0
radar.js
frontend/src/views/chart/chart/radar/radar.js
+38
-0
ChartComponent.vue
frontend/src/views/chart/components/ChartComponent.vue
+7
-2
ChartComponentView.vue
frontend/src/views/chart/components/ChartComponentView.vue
+0
-86
SizeSelector.vue
...nd/src/views/chart/components/shape_attr/SizeSelector.vue
+12
-0
ChartEdit.vue
frontend/src/views/chart/view/ChartEdit.vue
+2
-0
没有找到文件。
frontend/src/icons/svg/bar-horizontal.svg
浏览文件 @
6a856867
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t=
"1616054957891"
class=
"icon"
viewBox=
"0 0 1072 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"1374"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"209.375"
height=
"200"
><defs><style
type=
"text/css"
></style></defs><path
d=
"M150.528 77.482667v207.286857H623.177143l2.998857-207.286857zM1023.853714 380.830476H150.528v207.286857h867.791238zM820.711619 684.178286H150.528v207.286857h665.916952z"
p-id=
"1375"
></path><path
d=
"M115.151238 943.079619V0.146286h-41.203809v994.377143h996.10819v-51.44381H115.151238z"
fill=
"#8a8a8a"
p-id=
"1376"
></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t=
"1616054957891"
class=
"icon"
viewBox=
"0 0 1072 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"1374"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"209.375"
height=
"200"
><defs><style
type=
"text/css"
></style></defs><path
d=
"M150.528 77.482667v207.286857H623.177143l2.998857-207.286857zM1023.853714 380.830476H150.528v207.286857h867.791238zM820.711619 684.178286H150.528v207.286857h665.916952z"
p-id=
"1375"
></path><path
d=
"M115.151238 943.079619V0.146286h-41.203809v994.377143h996.10819v-51.44381H115.151238z"
p-id=
"1376"
></path></svg>
frontend/src/icons/svg/line-stack.svg
0 → 100644
浏览文件 @
6a856867
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t=
"1616398663420"
class=
"icon"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"787"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"200"
height=
"200"
><defs><style
type=
"text/css"
></style></defs><path
d=
"M637.6 381.7L495.8 493.1c-4.1 3.1-9.8 3.6-13.9 1l-154.7-84.6c-4.6-2.6-10.8-2.1-14.4 1.5L162.2 547.2v153.1l150-133.5c3.6-3.6 9.8-4.1 14.4-1.5l177.9 96.4c4.1 2.1 9.3 2.1 12.9-0.5l144.4-91.3c1-0.5 2.6-1.5 3.6-1.5l294.4-72.7V301.8l-317.6 77.3c-1.5 0.5-3.1 1.6-4.6 2.6z"
p-id=
"788"
></path><path
d=
"M662.3 622.2l-142.8 91.3c-3.6 2.6-8.8 2.6-12.9 0.5l-179.9-96.4c-4.6-2.6-10.8-2.1-14.4 1.5 0 0-150.5 133.5-150.5 136.6v111.4h797.6V545.9l-293.9 74.8-3.2 1.5z"
p-id=
"789"
></path><path
d=
"M64 144.2c0-1.3 0.5-2.6 1.5-3.6s2.3-1.5 3.6-1.5H101c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6v778.9H955c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6v31.9c0 1.3-0.5 2.6-1.5 3.6s-2.3 1.5-3.6 1.5H64v-821z"
p-id=
"790"
></path></svg>
frontend/src/icons/svg/pie.svg
浏览文件 @
6a856867
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t=
"1616054982578"
class=
"icon"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"1729"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"200"
height=
"200"
><defs><style
type=
"text/css"
></style></defs><path
d=
"M549.254095 0.219429v469.430857h469.430857C1018.684952 214.211048 804.693333 0.219429 549.254095 0.219429z"
p-id=
"1730"
></path><path
d=
"M494.031238 517.973333V48.542476c-262.339048 0-469.430857 214.016-469.430857 469.430857 0 255.439238 213.991619 469.430857 469.430857 469.430857 262.339048 0 469.430857-213.991619 469.430857-469.430857H494.031238z"
fill=
"#8a8a8a"
p-id=
"1731"
></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t=
"1616054982578"
class=
"icon"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"1729"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"200"
height=
"200"
><defs><style
type=
"text/css"
></style></defs><path
d=
"M549.254095 0.219429v469.430857h469.430857C1018.684952 214.211048 804.693333 0.219429 549.254095 0.219429z"
p-id=
"1730"
></path><path
d=
"M494.031238 517.973333V48.542476c-262.339048 0-469.430857 214.016-469.430857 469.430857 0 255.439238 213.991619 469.430857 469.430857 469.430857 262.339048 0 469.430857-213.991619 469.430857-469.430857H494.031238z"
p-id=
"1731"
></path></svg>
frontend/src/icons/svg/radar.svg
0 → 100644
浏览文件 @
6a856867
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t=
"1616397690155"
class=
"icon"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"859"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"200"
height=
"200"
><defs><style
type=
"text/css"
></style></defs><path
d=
"M499.809524 24.380952L0 405.74781 190.927238 1024h617.764572L999.619048 405.74781 499.809524 24.380952z m396.361143 378.343619l-63.975619 15.018667-302.908953-194.438095v-100.449524l366.884572 279.893333z m-443.830857 144.944762l-139.946667 226.913524L269.897143 504.685714l182.418286 43.008z m-159.939048-100.449523l177.93219-150.430477v192.414477l-177.956571-41.984zM499.809524 584.167619l64.487619 103.960381-185.953524 92.476952L499.809524 584.167619z m47.494095-36.498286l195.413333-46.470095-131.462095 149.455238-63.951238-102.985143z m-18.505143-57.977904v-201.411048l229.424762 146.944-229.424762 54.491429zM470.820571 122.831238v103.960381L226.913524 432.249905l-123.465143-28.988953 367.37219-280.380952zM77.970286 459.702857l136.435809 32.012191 55.491048 351.841523-48.981333 78.994286-142.945524-462.823619z m187.928381 502.808381l57.977904-93.45219 269.409524-133.461334 140.434286 227.425524H265.898667v-0.487619z m512.804571-39.984762l-138.435048-223.914666 192.902096-217.916953 88.478476-20.967619-142.945524 462.823619z"
p-id=
"860"
></path></svg>
frontend/src/lang/zh.js
浏览文件 @
6a856867
...
...
@@ -635,6 +635,7 @@ export default {
line_symbol_pin
:
'钉子'
,
line_symbol_arrow
:
'箭头'
,
line_symbol_none
:
'无'
,
line_area
:
'面积'
,
pie_inner_radius
:
'内径'
,
pie_outer_radius
:
'外径'
,
funnel_width
:
'宽度'
,
...
...
@@ -654,7 +655,10 @@ export default {
orient
:
'方向'
,
horizontal
:
'水平'
,
vertical
:
'垂直'
,
legend
:
'图例'
legend
:
'图例'
,
shape
:
'形状'
,
polygon
:
'多边形'
,
circle
:
'圆形'
},
dataset
:
{
datalist
:
'数据集'
,
...
...
frontend/src/views/chart/chart/chart.js
浏览文件 @
6a856867
...
...
@@ -12,9 +12,11 @@ export const DEFAULT_SIZE = {
lineSymbol
:
'emptyCircle'
,
lineSymbolSize
:
4
,
lineSmooth
:
false
,
lineArea
:
false
,
pieInnerRadius
:
0
,
pieOuterRadius
:
60
,
funnelWidth
:
80
funnelWidth
:
80
,
radarShape
:
'polygon'
}
export
const
DEFAULT_TITLE_STYLE
=
{
show
:
true
,
...
...
@@ -88,6 +90,7 @@ export const BASE_LINE = {
data
:
[]
},
xAxis
:
{
boundaryGap
:
false
,
data
:
[]
},
yAxis
:
{
...
...
@@ -180,3 +183,30 @@ export const BASE_FUNNEL = {
}
]
}
export
const
BASE_RADAR
=
{
title
:
{
text
:
''
},
tooltip
:
{},
legend
:
{
data
:
[]
},
radar
:
{
shape
:
'polygon'
,
name
:
{
textStyle
:
{
color
:
'#000000'
// backgroundColor: '#999',
// borderRadius: 3,
// padding: [3, 5]
}
},
indicator
:
[]
},
series
:
[{
type
:
'radar'
,
// areaStyle: {normal: {}},
data
:
[]
}]
}
frontend/src/views/chart/chart/line/line.js
浏览文件 @
6a856867
...
...
@@ -29,6 +29,7 @@ export function baseLineOption(chart_option, chart) {
type
:
customAttr
.
size
.
lineType
}
y
.
smooth
=
customAttr
.
size
.
lineSmooth
customAttr
.
size
.
lineArea
?
y
.
areaStyle
=
{
opacity
:
0.6
}
:
{
opacity
:
0
}
}
y
.
type
=
'line'
chart_option
.
legend
.
data
.
push
(
y
.
name
)
...
...
@@ -40,3 +41,14 @@ export function baseLineOption(chart_option, chart) {
return
chart_option
}
export
function
stackLineOption
(
chart_option
,
chart
)
{
baseLineOption
(
chart_option
,
chart
)
// ext
chart_option
.
tooltip
.
trigger
=
'axis'
chart_option
.
series
.
forEach
(
function
(
s
)
{
s
.
stack
=
'stack'
})
return
chart_option
}
frontend/src/views/chart/chart/radar/radar.js
0 → 100644
浏览文件 @
6a856867
import
{
hexColorToRGBA
}
from
'@/views/chart/chart/util'
import
{
componentStyle
}
from
'../common/common'
export
function
baseRadarOption
(
chart_option
,
chart
)
{
// 处理shape attr
let
customAttr
=
{}
if
(
chart
.
customAttr
)
{
customAttr
=
JSON
.
parse
(
chart
.
customAttr
)
if
(
customAttr
.
color
)
{
chart_option
.
color
=
customAttr
.
color
.
colors
}
// size
if
(
customAttr
.
size
)
{
chart_option
.
radar
.
shape
=
customAttr
.
size
.
radarShape
}
}
// 处理data
if
(
chart
.
data
)
{
chart_option
.
title
.
text
=
chart
.
title
chart
.
data
.
x
.
forEach
(
function
(
ele
)
{
chart_option
.
radar
.
indicator
.
push
({
name
:
ele
})
})
for
(
let
i
=
0
;
i
<
chart
.
data
.
series
.
length
;
i
++
)
{
const
y
=
chart
.
data
.
series
[
i
]
// color
y
.
itemStyle
=
{
color
:
hexColorToRGBA
(
customAttr
.
color
.
colors
[
i
%
9
],
customAttr
.
color
.
alpha
)
}
chart_option
.
legend
.
data
.
push
(
y
.
name
)
y
.
value
=
JSON
.
parse
(
JSON
.
stringify
(
y
.
data
))
chart_option
.
series
[
0
].
data
.
push
(
y
)
}
}
// console.log(chart_option);
componentStyle
(
chart_option
,
chart
)
return
chart_option
}
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @
6a856867
...
...
@@ -5,11 +5,12 @@
</
template
>
<
script
>
import
{
BASE_BAR
,
BASE_LINE
,
HORIZONTAL_BAR
,
BASE_PIE
,
BASE_FUNNEL
}
from
'../chart/chart'
import
{
BASE_BAR
,
BASE_LINE
,
HORIZONTAL_BAR
,
BASE_PIE
,
BASE_FUNNEL
,
BASE_RADAR
}
from
'../chart/chart'
import
{
baseBarOption
,
stackBarOption
,
horizontalBarOption
,
horizontalStackBarOption
}
from
'../chart/bar/bar'
import
{
baseLineOption
}
from
'../chart/line/line'
import
{
baseLineOption
,
stackLineOption
}
from
'../chart/line/line'
import
{
basePieOption
}
from
'../chart/pie/pie'
import
{
baseFunnelOption
}
from
'../chart/funnel/funnel'
import
{
baseRadarOption
}
from
'../chart/radar/radar'
export
default
{
name
:
'ChartComponent'
,
...
...
@@ -56,10 +57,14 @@ export default {
chart_option
=
horizontalStackBarOption
(
JSON
.
parse
(
JSON
.
stringify
(
HORIZONTAL_BAR
)),
chart
)
}
else
if
(
chart
.
type
===
'line'
)
{
chart_option
=
baseLineOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_LINE
)),
chart
)
}
else
if
(
chart
.
type
===
'line-stack'
)
{
chart_option
=
stackLineOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_LINE
)),
chart
)
}
else
if
(
chart
.
type
===
'pie'
)
{
chart_option
=
basePieOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_PIE
)),
chart
)
}
else
if
(
chart
.
type
===
'funnel'
)
{
chart_option
=
baseFunnelOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_FUNNEL
)),
chart
)
}
else
if
(
chart
.
type
===
'radar'
)
{
chart_option
=
baseRadarOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_RADAR
)),
chart
)
}
console
.
log
(
chart_option
)
this
.
myEcharts
(
chart_option
)
...
...
frontend/src/views/chart/components/ChartComponentView.vue
deleted
100644 → 0
浏览文件 @
d6e07577
<
template
>
<div
class=
"Echarts"
style=
"height: 100%;display: flex;margin-top: 10px;"
>
<div
:id=
"chartId"
style=
"width: 100%;height: 100%;"
/>
</div>
</
template
>
<
script
>
import
{
BASE_BAR
,
BASE_LINE
,
HORIZONTAL_BAR
,
BASE_PIE
,
BASE_FUNNEL
}
from
'../chart/chart'
import
{
baseBarOption
,
stackBarOption
,
horizontalBarOption
,
horizontalStackBarOption
}
from
'../chart/bar/bar'
import
{
baseLineOption
}
from
'../chart/line/line'
import
{
basePieOption
}
from
'../chart/pie/pie'
import
{
baseFunnelOption
}
from
'../chart/funnel/funnel'
export
default
{
name
:
'ChartComponentView'
,
props
:
{
chart
:
{
type
:
Object
,
required
:
true
},
chartId
:
{
type
:
String
,
required
:
false
}
},
data
()
{
return
{
myChart
:
{}
}
},
watch
:
{
chart
()
{
this
.
drawEcharts
()
},
resize
()
{
this
.
drawEcharts
()
}
},
mounted
()
{
// 基于准备好的dom,初始化echarts实例
this
.
myChart
=
this
.
$echarts
.
init
(
document
.
getElementById
(
this
.
chartId
))
this
.
drawEcharts
()
},
methods
:
{
drawEcharts
()
{
const
chart
=
this
.
chart
let
chart_option
=
{}
// todo type
if
(
chart
.
type
===
'bar'
)
{
chart_option
=
baseBarOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_BAR
)),
chart
)
}
else
if
(
chart
.
type
===
'bar-stack'
)
{
chart_option
=
stackBarOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_BAR
)),
chart
)
}
else
if
(
chart
.
type
===
'bar-horizontal'
)
{
chart_option
=
horizontalBarOption
(
JSON
.
parse
(
JSON
.
stringify
(
HORIZONTAL_BAR
)),
chart
)
}
else
if
(
chart
.
type
===
'bar-horizontal-stack'
)
{
chart_option
=
horizontalStackBarOption
(
JSON
.
parse
(
JSON
.
stringify
(
HORIZONTAL_BAR
)),
chart
)
}
else
if
(
chart
.
type
===
'line'
)
{
chart_option
=
baseLineOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_LINE
)),
chart
)
}
else
if
(
chart
.
type
===
'pie'
)
{
chart_option
=
basePieOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_PIE
)),
chart
)
}
else
if
(
chart
.
type
===
'funnel'
)
{
chart_option
=
baseFunnelOption
(
JSON
.
parse
(
JSON
.
stringify
(
BASE_FUNNEL
)),
chart
)
}
console
.
log
(
chart_option
)
this
.
myEcharts
(
chart_option
)
},
myEcharts
(
option
)
{
// 指定图表的配置项和数据
const
chart
=
this
.
myChart
setTimeout
(
chart
.
setOption
(
option
,
true
),
500
)
window
.
onresize
=
function
()
{
chart
.
resize
()
}
},
chartResize
()
{
// 指定图表的配置项和数据
const
chart
=
this
.
myChart
chart
.
resize
()
}
}
}
</
script
>
<
style
scoped
>
</
style
>
frontend/src/views/chart/components/shape_attr/SizeSelector.vue
浏览文件 @
6a856867
...
...
@@ -45,6 +45,9 @@
<el-form-item
:label=
"$t('chart.line_smooth')"
class=
"form-item"
>
<el-checkbox
v-model=
"sizeForm.lineSmooth"
@
change=
"changeBarSizeCase"
>
{{
$t
(
'chart.line_smooth'
)
}}
</el-checkbox>
</el-form-item>
<el-form-item
:label=
"$t('chart.line_area')"
class=
"form-item"
>
<el-checkbox
v-model=
"sizeForm.lineArea"
@
change=
"changeBarSizeCase"
>
{{
$t
(
'chart.show'
)
}}
</el-checkbox>
</el-form-item>
</el-form>
<el-form
v-if=
"chart.type && chart.type.includes('pie')"
ref=
"sizeFormPie"
:model=
"sizeForm"
label-width=
"80px"
size=
"mini"
>
...
...
@@ -61,6 +64,15 @@
<el-slider
v-model=
"sizeForm.funnelWidth"
show-input
:show-input-controls=
"false"
input-size=
"mini"
:min=
"0"
:max=
"100"
@
change=
"changeBarSizeCase"
/>
</el-form-item>
</el-form>
<el-form
v-if=
"chart.type && chart.type.includes('radar')"
ref=
"sizeFormPie"
:model=
"sizeForm"
label-width=
"80px"
size=
"mini"
>
<el-form-item
:label=
"$t('chart.shape')"
class=
"form-item"
>
<el-radio-group
v-model=
"sizeForm.radarShape"
size=
"mini"
@
change=
"changeBarSizeCase"
>
<el-radio-button
label=
"polygon"
>
{{
$t
(
'chart.polygon'
)
}}
</el-radio-button>
<el-radio-button
label=
"circle"
>
{{
$t
(
'chart.circle'
)
}}
</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</el-col>
<el-button
slot=
"reference"
size=
"mini"
class=
"shape-item"
>
{{
$t
(
'chart.size'
)
}}
<i
class=
"el-icon-setting el-icon--right"
/></el-button>
...
...
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @
6a856867
...
...
@@ -85,8 +85,10 @@
<el-radio
value=
"bar-horizontal"
label=
"bar-horizontal"
><svg-icon
icon-class=
"bar-horizontal"
class=
"chart-icon"
/></el-radio>
<el-radio
value=
"bar-horizontal-stack"
label=
"bar-horizontal-stack"
><svg-icon
icon-class=
"bar-stack-horizontal"
class=
"chart-icon"
/></el-radio>
<el-radio
value=
"line"
label=
"line"
><svg-icon
icon-class=
"line"
class=
"chart-icon"
/></el-radio>
<el-radio
value=
"line-stack"
label=
"line-stack"
><svg-icon
icon-class=
"line-stack"
class=
"chart-icon"
/></el-radio>
<el-radio
value=
"pie"
label=
"pie"
><svg-icon
icon-class=
"pie"
class=
"chart-icon"
/></el-radio>
<el-radio
value=
"funnel"
label=
"funnel"
><svg-icon
icon-class=
"funnel"
class=
"chart-icon"
/></el-radio>
<el-radio
value=
"radar"
label=
"radar"
><svg-icon
icon-class=
"radar"
class=
"chart-icon"
/></el-radio>
</el-radio-group>
</div>
</el-row>
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论