Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ldz_miantiao
Go View
提交
318a90f7
Go View
项目概览
ldz_miantiao
/
Go View
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Go View
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
318a90f7
编写于
10月 09, 2022
作者:
jiangcheng.
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 折线图和柱状图配置label
上级
5326405a
变更
14
隐藏空白更改
内联
并排
Showing
14 changed file
with
369 addition
and
124 deletion
+369
-124
src/packages/components/Charts/Bars/BarCommon/config.ts
src/packages/components/Charts/Bars/BarCommon/config.ts
+8
-4
src/packages/components/Charts/Bars/BarCommon/config.vue
src/packages/components/Charts/Bars/BarCommon/config.vue
+44
-13
src/packages/components/Charts/Bars/BarCrossrange/config.ts
src/packages/components/Charts/Bars/BarCrossrange/config.ts
+7
-3
src/packages/components/Charts/Bars/BarCrossrange/config.vue
src/packages/components/Charts/Bars/BarCrossrange/config.vue
+33
-0
src/packages/components/Charts/Lines/LineCommon/config.ts
src/packages/components/Charts/Lines/LineCommon/config.ts
+12
-5
src/packages/components/Charts/Lines/LineCommon/config.vue
src/packages/components/Charts/Lines/LineCommon/config.vue
+42
-17
src/packages/components/Charts/Lines/LineGradientSingle/config.ts
...ages/components/Charts/Lines/LineGradientSingle/config.ts
+10
-2
src/packages/components/Charts/Lines/LineGradientSingle/config.vue
...ges/components/Charts/Lines/LineGradientSingle/config.vue
+53
-9
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
...ages/components/Charts/Lines/LineGradientSingle/index.vue
+38
-35
src/packages/components/Charts/Lines/LineGradients/config.ts
src/packages/components/Charts/Lines/LineGradients/config.ts
+13
-0
src/packages/components/Charts/Lines/LineGradients/config.vue
...packages/components/Charts/Lines/LineGradients/config.vue
+44
-0
src/packages/components/Charts/Lines/LineGradients/index.vue
src/packages/components/Charts/Lines/LineGradients/index.vue
+53
-36
src/packages/components/Charts/Lines/LineLinearSingle/config.ts
...ckages/components/Charts/Lines/LineLinearSingle/config.ts
+1
-0
src/packages/components/Charts/Lines/LineLinearSingle/config.vue
...kages/components/Charts/Lines/LineLinearSingle/config.vue
+11
-0
未找到文件。
src/packages/components/Charts/Bars/BarCommon/config.ts
浏览文件 @
318a90f7
...
@@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep'
...
@@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep'
import
dataJson
from
'
./data.json
'
import
dataJson
from
'
./data.json
'
export
const
includes
=
[
'
legend
'
,
'
xAxis
'
,
'
yAxis
'
]
export
const
includes
=
[
'
legend
'
,
'
xAxis
'
,
'
yAxis
'
]
export
const
seriesItem
=
{
export
const
seriesItem
=
{
type
:
'
bar
'
,
type
:
'
bar
'
,
barWidth
:
null
,
barWidth
:
15
,
label
:{
show
:
true
,
position
:
'
top
'
,
color
:
"
#fff
"
,
fontSize
:
12
,
},
itemStyle
:
{
itemStyle
:
{
color
:
null
,
color
:
null
,
borderRadius
:
0
borderRadius
:
2
}
}
}
}
export
const
option
=
{
export
const
option
=
{
tooltip
:
{
tooltip
:
{
show
:
true
,
show
:
true
,
...
...
src/packages/components/Charts/Bars/BarCommon/config.vue
浏览文件 @
318a90f7
<
template
>
<
template
>
<!-- Echarts 全局设置 -->
<!-- Echarts 全局设置 -->
<global-setting
:optionData=
"optionData"
></global-setting>
<global-setting
:optionData=
"optionData"
></global-setting>
<CollapseItem
<CollapseItem
v-for=
"(item, index) in seriesList"
v-for=
"(item, index) in seriesList"
...
@@ -16,9 +16,7 @@
...
@@ -16,9 +16,7 @@
></n-color-picker>
></n-color-picker>
</SettingItem>
</SettingItem>
<SettingItem>
<SettingItem>
<n-button
size=
"small"
@
click=
"item.itemStyle.color = null"
>
<n-button
size=
"small"
@
click=
"item.itemStyle.color = null"
>
恢复默认
</n-button>
恢复默认
</n-button>
</SettingItem>
</SettingItem>
<SettingItem
name=
"宽度"
>
<SettingItem
name=
"宽度"
>
<n-input-number
<n-input-number
...
@@ -37,27 +35,60 @@
...
@@ -37,27 +35,60 @@
></n-input-number>
></n-input-number>
</SettingItem>
</SettingItem>
</SettingItemBox>
</SettingItemBox>
<setting-item-box
name=
"标签"
>
<setting-item>
<n-space>
<n-switch
v-model:value=
"item.label.show"
size=
"small"
/>
<n-text>
展示标签
</n-text>
</n-space>
</setting-item>
<setting-item
name=
"大小"
>
<n-input-number
v-model:value=
"item.label.fontSize"
size=
"small"
:min=
"1"
></n-input-number>
</setting-item>
<setting-item
name=
"颜色"
>
<n-color-picker
size=
"small"
:modes=
"['hex']"
v-model:value=
"item.label.color"
></n-color-picker>
</setting-item>
<setting-item
name=
"位置"
>
<n-select
v-model:value=
"item.label.position"
:options=
"[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
</CollapseItem>
</
template
>
</
template
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
PropType
,
computed
}
from
'
vue
'
import
{
PropType
,
computed
}
from
"
vue
"
;
import
{
import
{
GlobalSetting
,
GlobalSetting
,
CollapseItem
,
CollapseItem
,
SettingItemBox
,
SettingItemBox
,
SettingItem
SettingItem
,
}
from
'
@/components/Pages/ChartItemSetting
'
}
from
"
@/components/Pages/ChartItemSetting
"
;
import
{
GlobalThemeJsonType
}
from
'
@/settings/chartThemes/index
'
import
{
GlobalThemeJsonType
}
from
"
@/settings/chartThemes/index
"
;
const
props
=
defineProps
({
const
props
=
defineProps
({
optionData
:
{
optionData
:
{
type
:
Object
as
PropType
<
GlobalThemeJsonType
>
,
type
:
Object
as
PropType
<
GlobalThemeJsonType
>
,
required
:
true
required
:
true
,
}
}
,
})
})
;
const
seriesList
=
computed
(()
=>
{
const
seriesList
=
computed
(()
=>
{
return
props
.
optionData
.
series
return
props
.
optionData
.
series
;
})
})
;
</
script
>
</
script
>
src/packages/components/Charts/Bars/BarCrossrange/config.ts
浏览文件 @
318a90f7
...
@@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep'
...
@@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep'
import
dataJson
from
'
./data.json
'
import
dataJson
from
'
./data.json
'
export
const
includes
=
[
'
legend
'
,
'
xAxis
'
,
'
yAxis
'
]
export
const
includes
=
[
'
legend
'
,
'
xAxis
'
,
'
yAxis
'
]
export
const
seriesItem
=
{
export
const
seriesItem
=
{
type
:
'
bar
'
,
type
:
'
bar
'
,
barWidth
:
null
,
barWidth
:
null
,
label
:
{
show
:
true
,
position
:
'
right
'
,
color
:
'
#fff
'
,
fontSize
:
12
},
itemStyle
:
{
itemStyle
:
{
color
:
null
,
color
:
null
,
borderRadius
:
0
borderRadius
:
0
}
}
}
}
export
const
option
=
{
export
const
option
=
{
tooltip
:
{
tooltip
:
{
show
:
true
,
show
:
true
,
...
@@ -29,7 +33,7 @@ export const option = {
...
@@ -29,7 +33,7 @@ export const option = {
},
},
xAxis
:
{
xAxis
:
{
show
:
true
,
show
:
true
,
type
:
'
value
'
,
type
:
'
value
'
},
},
yAxis
:
{
yAxis
:
{
show
:
true
,
show
:
true
,
...
...
src/packages/components/Charts/Bars/BarCrossrange/config.vue
浏览文件 @
318a90f7
...
@@ -26,6 +26,39 @@
...
@@ -26,6 +26,39 @@
></n-input-number>
></n-input-number>
</SettingItem>
</SettingItem>
</SettingItemBox>
</SettingItemBox>
<setting-item-box
name=
"标签"
>
<setting-item>
<n-space>
<n-switch
v-model:value=
"item.label.show"
size=
"small"
/>
<n-text>
展示标签
</n-text>
</n-space>
</setting-item>
<setting-item
name=
"大小"
>
<n-input-number
v-model:value=
"item.label.fontSize"
size=
"small"
:min=
"1"
></n-input-number>
</setting-item>
<setting-item
name=
"颜色"
>
<n-color-picker
size=
"small"
:modes=
"['hex']"
v-model:value=
"item.label.color"
></n-color-picker>
</setting-item>
<setting-item
name=
"位置"
>
<n-select
v-model:value=
"item.label.position"
:options=
"[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
</CollapseItem>
</
template
>
</
template
>
...
...
src/packages/components/Charts/Lines/LineCommon/config.ts
浏览文件 @
318a90f7
...
@@ -5,16 +5,23 @@ import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
...
@@ -5,16 +5,23 @@ import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import
dataJson
from
'
./data.json
'
import
dataJson
from
'
./data.json
'
export
const
includes
=
[
'
legend
'
,
'
xAxis
'
,
'
yAxis
'
]
export
const
includes
=
[
'
legend
'
,
'
xAxis
'
,
'
yAxis
'
]
export
const
seriesItem
=
{
export
const
seriesItem
=
{
type
:
'
line
'
,
type
:
'
line
'
,
label
:
{
show
:
true
,
position
:
'
top
'
,
color
:
'
#fff
'
,
fontSize
:
12
},
symbolSize
:
5
,
//设定实心点的大小
itemStyle
:
{
color
:
null
,
borderRadius
:
0
},
lineStyle
:
{
lineStyle
:
{
type
:
'
solid
'
,
type
:
'
solid
'
,
width
:
3
,
width
:
3
,
itemStyle
:
{
color
:
null
,
color
:
null
,
borderRadius
:
0
}
}
}
}
}
...
...
src/packages/components/Charts/Lines/LineCommon/config.vue
浏览文件 @
318a90f7
<
template
>
<
template
>
<!-- Echarts 全局设置 -->
<!-- Echarts 全局设置 -->
<global-setting
:optionData=
"optionData"
></global-setting>
<global-setting
:optionData=
"optionData"
></global-setting>
<CollapseItem
<CollapseItem
v-for=
"(item, index) in seriesList"
:key=
"index"
:name=
"`折线图-$
{index + 1}`" :expanded="true">
v-for=
"(item, index) in seriesList"
:key=
"index"
:name=
"`折线图-$
{index + 1}`"
:expanded="true"
>
<SettingItemBox
name=
"线条"
>
<SettingItemBox
name=
"线条"
>
<setting-item
name=
"颜色"
>
<n-color-picker
size=
"small"
:modes=
"['hex']"
v-model:value=
"item.lineStyle.color"
></n-color-picker>
</setting-item>
<SettingItem
name=
"宽度"
>
<SettingItem
name=
"宽度"
>
<n-input-number
<n-input-number
v-model:value=
"item.lineStyle.width"
v-model:value=
"item.lineStyle.width"
...
@@ -15,16 +13,48 @@
...
@@ -15,16 +13,48 @@
:max=
"100"
:max=
"100"
size=
"small"
size=
"small"
placeholder=
"自动计算"
placeholder=
"自动计算"
></n-input-number>
></n-input-number>
</SettingItem>
</SettingItem>
<SettingItem
name=
"类型"
>
<SettingItem
name=
"类型"
>
<n-select
<n-select
v-model:value=
"item.lineStyle.type"
size=
"small"
:options=
"lineConf.lineStyle.type"
></n-select>
v-model:value=
"item.lineStyle.type"
</SettingItem>
</SettingItemBox>
<SettingItemBox
name=
"实心点"
>
<SettingItem
name=
"大小"
>
<n-input-number
v-model:value=
"item.symbolSize"
:min=
"1"
:max=
"100"
size=
"small"
size=
"small"
:options=
"lineConf.lineStyle.type
"
placeholder=
"自动计算
"
></n-select
>
></n-input-number
>
</SettingItem>
</SettingItem>
</SettingItemBox>
</SettingItemBox>
<setting-item-box
name=
"标签"
>
<setting-item>
<n-space>
<n-switch
v-model:value=
"item.label.show"
size=
"small"
/>
<n-text>
展示标签
</n-text>
</n-space>
</setting-item>
<setting-item
name=
"大小"
>
<n-input-number
v-model:value=
"item.label.fontSize"
size=
"small"
:min=
"1"
></n-input-number>
</setting-item>
<setting-item
name=
"颜色"
>
<n-color-picker
size=
"small"
:modes=
"['hex']"
v-model:value=
"item.label.color"
></n-color-picker>
</setting-item>
<setting-item
name=
"位置"
>
<n-select
v-model:value=
"item.label.position"
:options=
"[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' }
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
</CollapseItem>
</
template
>
</
template
>
...
@@ -32,12 +62,7 @@
...
@@ -32,12 +62,7 @@
import
{
PropType
,
computed
}
from
'
vue
'
import
{
PropType
,
computed
}
from
'
vue
'
import
{
lineConf
}
from
'
@/packages/chartConfiguration/echarts/index
'
import
{
lineConf
}
from
'
@/packages/chartConfiguration/echarts/index
'
import
{
GlobalThemeJsonType
}
from
'
@/settings/chartThemes/index
'
import
{
GlobalThemeJsonType
}
from
'
@/settings/chartThemes/index
'
import
{
import
{
GlobalSetting
,
CollapseItem
,
SettingItemBox
,
SettingItem
}
from
'
@/components/Pages/ChartItemSetting
'
GlobalSetting
,
CollapseItem
,
SettingItemBox
,
SettingItem
}
from
'
@/components/Pages/ChartItemSetting
'
const
props
=
defineProps
({
const
props
=
defineProps
({
optionData
:
{
optionData
:
{
...
...
src/packages/components/Charts/Lines/LineGradientSingle/config.ts
浏览文件 @
318a90f7
...
@@ -20,7 +20,7 @@ const options = {
...
@@ -20,7 +20,7 @@ const options = {
},
},
xAxis
:
{
xAxis
:
{
show
:
true
,
show
:
true
,
type
:
'
category
'
type
:
'
category
'
,
},
},
yAxis
:
{
yAxis
:
{
show
:
true
,
show
:
true
,
...
@@ -31,6 +31,13 @@ const options = {
...
@@ -31,6 +31,13 @@ const options = {
{
{
type
:
'
line
'
,
type
:
'
line
'
,
smooth
:
false
,
smooth
:
false
,
symbolSize
:
5
,
//设定实心点的大小
label
:{
show
:
true
,
position
:
'
top
'
,
color
:
"
#fff
"
,
fontSize
:
12
,
},
lineStyle
:
{
lineStyle
:
{
type
:
'
solid
'
,
type
:
'
solid
'
,
width
:
3
width
:
3
...
@@ -52,7 +59,8 @@ const options = {
...
@@ -52,7 +59,8 @@ const options = {
]
]
}
}
export
default
class
Config
extends
PublicConfigClass
implements
CreateComponentType
{
export
default
class
Config
extends
PublicConfigClass
implements
CreateComponentType
{
public
key
:
string
=
LineGradientSingleConfig
.
key
public
key
:
string
=
LineGradientSingleConfig
.
key
public
chartConfig
=
LineGradientSingleConfig
public
chartConfig
=
LineGradientSingleConfig
// 图表配置项
// 图表配置项
...
...
src/packages/components/Charts/Lines/LineGradientSingle/config.vue
浏览文件 @
318a90f7
...
@@ -25,28 +25,72 @@
...
@@ -25,28 +25,72 @@
></n-select>
></n-select>
</SettingItem>
</SettingItem>
</SettingItemBox>
</SettingItemBox>
<SettingItemBox
name=
"实心点"
>
<SettingItem
name=
"大小"
>
<n-input-number
v-model:value=
"item.symbolSize"
:min=
"1"
:max=
"100"
size=
"small"
placeholder=
"自动计算"
></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box
name=
"标签"
>
<setting-item>
<n-space>
<n-switch
v-model:value=
"item.label.show"
size=
"small"
/>
<n-text>
展示标签
</n-text>
</n-space>
</setting-item>
<setting-item
name=
"大小"
>
<n-input-number
v-model:value=
"item.label.fontSize"
size=
"small"
:min=
"1"
></n-input-number>
</setting-item>
<setting-item
name=
"颜色"
>
<n-color-picker
size=
"small"
:modes=
"['hex']"
v-model:value=
"item.label.color"
></n-color-picker>
</setting-item>
<setting-item
name=
"位置"
>
<n-select
v-model:value=
"item.label.position"
:options=
"[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
</CollapseItem>
</
template
>
</
template
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
PropType
,
computed
}
from
'
vue
'
import
{
PropType
,
computed
}
from
"
vue
"
;
import
{
lineConf
}
from
'
@/packages/chartConfiguration/echarts/index
'
import
{
lineConf
}
from
"
@/packages/chartConfiguration/echarts/index
"
;
import
{
GlobalThemeJsonType
}
from
'
@/settings/chartThemes/index
'
import
{
GlobalThemeJsonType
}
from
"
@/settings/chartThemes/index
"
;
import
{
import
{
GlobalSetting
,
GlobalSetting
,
CollapseItem
,
CollapseItem
,
SettingItemBox
,
SettingItemBox
,
SettingItem
SettingItem
,
}
from
'
@/components/Pages/ChartItemSetting
'
}
from
"
@/components/Pages/ChartItemSetting
"
;
const
props
=
defineProps
({
const
props
=
defineProps
({
optionData
:
{
optionData
:
{
type
:
Object
as
PropType
<
GlobalThemeJsonType
>
,
type
:
Object
as
PropType
<
GlobalThemeJsonType
>
,
required
:
true
required
:
true
,
},
},
})
})
;
const
seriesList
=
computed
(()
=>
{
const
seriesList
=
computed
(()
=>
{
return
props
.
optionData
.
series
return
props
.
optionData
.
series
;
})
})
;
</
script
>
</
script
>
src/packages/components/Charts/Lines/LineGradientSingle/index.vue
浏览文件 @
318a90f7
<
template
>
<
template
>
<v-chart
ref=
"vChartRef"
:theme=
"themeColor"
:option=
"option.value"
:manual-update=
"isPreview()"
autoresize
>
<v-chart
ref=
"vChartRef"
:theme=
"themeColor"
:option=
"option.value"
:manual-update=
"isPreview()"
autoresize
>
</v-chart>
</v-chart>
</
template
>
</
template
>
...
@@ -32,7 +37,14 @@ const props = defineProps({
...
@@ -32,7 +37,14 @@ const props = defineProps({
}
}
})
})
use
([
DatasetComponent
,
CanvasRenderer
,
LineChart
,
GridComponent
,
TooltipComponent
,
LegendComponent
])
use
([
DatasetComponent
,
CanvasRenderer
,
LineChart
,
GridComponent
,
TooltipComponent
,
LegendComponent
,
])
const
chartEditStore
=
useChartEditStore
()
const
chartEditStore
=
useChartEditStore
()
const
option
=
reactive
({
const
option
=
reactive
({
...
@@ -40,41 +52,32 @@ const option = reactive({
...
@@ -40,41 +52,32 @@ const option = reactive({
})
})
// 渐变色处理
// 渐变色处理
watch
(
watch
(()
=>
chartEditStore
.
getEditCanvasConfig
.
chartThemeColor
,
(
newColor
:
keyof
typeof
chartColorsSearch
)
=>
{
()
=>
chartEditStore
.
getEditCanvasConfig
.
chartThemeColor
,
if
(
!
isPreview
())
{
(
newColor
:
keyof
typeof
chartColorsSearch
)
=>
{
const
themeColor
=
chartColorsSearch
[
newColor
]
||
chartColorsSearch
[
defaultTheme
]
if
(
!
isPreview
())
{
props
.
chartConfig
.
option
.
series
.
forEach
((
value
:
any
,
index
:
number
)
=>
{
const
themeColor
=
chartColorsSearch
[
newColor
]
||
chartColorsSearch
[
defaultTheme
]
value
.
areaStyle
.
color
=
new
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
props
.
chartConfig
.
option
.
series
.
forEach
((
value
:
any
,
index
:
number
)
=>
{
{
value
.
areaStyle
.
color
=
new
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
offset
:
0
,
{
color
:
themeColor
[
3
]
offset
:
0
,
},
color
:
themeColor
[
3
]
{
},
offset
:
1
,
{
color
:
'
rgba(0,0,0, 0)
'
offset
:
1
,
}
color
:
'
rgba(0,0,0, 0)
'
])
}
})
])
})
}
option
.
value
=
mergeTheme
(
props
.
chartConfig
.
option
,
props
.
themeSetting
,
includes
)
props
.
chartConfig
.
option
=
option
.
value
},
{
immediate
:
true
}
}
)
option
.
value
=
mergeTheme
(
props
.
chartConfig
.
option
,
props
.
themeSetting
,
includes
)
props
.
chartConfig
.
option
=
option
.
value
},
{
immediate
:
true
})
watch
(
()
=>
props
.
chartConfig
.
option
.
dataset
,
watch
(()
=>
props
.
chartConfig
.
option
.
dataset
,
()
=>
{
()
=>
{
option
.
value
=
props
.
chartConfig
.
option
option
.
value
=
props
.
chartConfig
.
option
})
},
{
deep
:
false
}
)
const
{
vChartRef
}
=
useChartDataFetch
(
props
.
chartConfig
,
useChartEditStore
)
const
{
vChartRef
}
=
useChartDataFetch
(
props
.
chartConfig
,
useChartEditStore
)
</
script
>
</
script
>
src/packages/components/Charts/Lines/LineGradients/config.ts
浏览文件 @
318a90f7
...
@@ -31,6 +31,13 @@ const option = {
...
@@ -31,6 +31,13 @@ const option = {
{
{
type
:
'
line
'
,
type
:
'
line
'
,
smooth
:
false
,
smooth
:
false
,
symbolSize
:
5
,
//设定实心点的大小
label
:
{
show
:
true
,
position
:
'
top
'
,
color
:
'
#fff
'
,
fontSize
:
12
},
lineStyle
:
{
lineStyle
:
{
width
:
3
,
width
:
3
,
type
:
'
solid
'
type
:
'
solid
'
...
@@ -52,6 +59,12 @@ const option = {
...
@@ -52,6 +59,12 @@ const option = {
{
{
type
:
'
line
'
,
type
:
'
line
'
,
smooth
:
false
,
smooth
:
false
,
label
:
{
show
:
true
,
position
:
'
top
'
,
color
:
'
#fff
'
,
fontSize
:
12
},
lineStyle
:
{
lineStyle
:
{
width
:
3
,
width
:
3
,
type
:
'
solid
'
type
:
'
solid
'
...
...
src/packages/components/Charts/Lines/LineGradients/config.vue
浏览文件 @
318a90f7
...
@@ -25,6 +25,50 @@
...
@@ -25,6 +25,50 @@
></n-select>
></n-select>
</SettingItem>
</SettingItem>
</SettingItemBox>
</SettingItemBox>
<SettingItemBox
name=
"实心点"
>
<SettingItem
name=
"大小"
>
<n-input-number
v-model:value=
"item.symbolSize"
:min=
"1"
:max=
"100"
size=
"small"
placeholder=
"自动计算"
></n-input-number>
</SettingItem>
</SettingItemBox>
<setting-item-box
name=
"标签"
>
<setting-item>
<n-space>
<n-switch
v-model:value=
"item.label.show"
size=
"small"
/>
<n-text>
展示标签
</n-text>
</n-space>
</setting-item>
<setting-item
name=
"大小"
>
<n-input-number
v-model:value=
"item.label.fontSize"
size=
"small"
:min=
"1"
></n-input-number>
</setting-item>
<setting-item
name=
"颜色"
>
<n-color-picker
size=
"small"
:modes=
"['hex']"
v-model:value=
"item.label.color"
></n-color-picker>
</setting-item>
<setting-item
name=
"位置"
>
<n-select
v-model:value=
"item.label.position"
:options=
"[
{ label: 'top', value: 'top' },
{ label: 'left', value: 'left' },
{ label: 'right', value: 'right' },
{ label: 'bottom', value: 'bottom' },
]"
/>
</setting-item>
</setting-item-box>
</CollapseItem>
</CollapseItem>
</
template
>
</
template
>
...
...
src/packages/components/Charts/Lines/LineGradients/index.vue
浏览文件 @
318a90f7
<
template
>
<
template
>
<v-chart
ref=
"vChartRef"
:theme=
"themeColor"
:option=
"option.value"
:manual-update=
"isPreview()"
autoresize
></v-chart>
<v-chart
ref=
"vChartRef"
:theme=
"themeColor"
:option=
"option.value"
:manual-update=
"isPreview()"
autoresize
></v-chart>
</
template
>
</
template
>
<
script
setup
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
{
reactive
,
watch
,
PropType
}
from
'
vue
'
import
{
reactive
,
watch
,
PropType
}
from
"
vue
"
;
import
VChart
from
'
vue-echarts
'
import
VChart
from
"
vue-echarts
"
;
import
{
use
,
graphic
}
from
'
echarts/core
'
import
{
use
,
graphic
}
from
"
echarts/core
"
;
import
{
CanvasRenderer
}
from
'
echarts/renderers
'
import
{
CanvasRenderer
}
from
"
echarts/renderers
"
;
import
{
LineChart
}
from
'
echarts/charts
'
import
{
LineChart
}
from
"
echarts/charts
"
;
import
config
,
{
includes
}
from
'
./config
'
import
config
,
{
includes
}
from
"
./config
"
;
import
{
mergeTheme
}
from
'
@/packages/public/chart
'
import
{
mergeTheme
}
from
"
@/packages/public/chart
"
;
import
{
useChartEditStore
}
from
'
@/store/modules/chartEditStore/chartEditStore
'
import
{
useChartEditStore
}
from
"
@/store/modules/chartEditStore/chartEditStore
"
;
import
{
chartColorsSearch
,
defaultTheme
}
from
'
@/settings/chartThemes/index
'
import
{
chartColorsSearch
,
defaultTheme
}
from
"
@/settings/chartThemes/index
"
;
import
{
DatasetComponent
,
GridComponent
,
TooltipComponent
,
LegendComponent
}
from
'
echarts/components
'
import
{
import
{
useChartDataFetch
}
from
'
@/hooks
'
DatasetComponent
,
import
{
isPreview
}
from
'
@/utils
'
GridComponent
,
TooltipComponent
,
LegendComponent
,
}
from
"
echarts/components
"
;
import
{
useChartDataFetch
}
from
"
@/hooks
"
;
import
{
isPreview
}
from
"
@/utils
"
;
const
props
=
defineProps
({
const
props
=
defineProps
({
themeSetting
:
{
themeSetting
:
{
type
:
Object
,
type
:
Object
,
required
:
true
required
:
true
,
},
},
themeColor
:
{
themeColor
:
{
type
:
Object
,
type
:
Object
,
required
:
true
required
:
true
,
},
},
chartConfig
:
{
chartConfig
:
{
type
:
Object
as
PropType
<
config
>
,
type
:
Object
as
PropType
<
config
>
,
required
:
true
required
:
true
,
}
}
,
})
})
;
use
([
DatasetComponent
,
CanvasRenderer
,
LineChart
,
GridComponent
,
TooltipComponent
,
LegendComponent
])
use
([
const
chartEditStore
=
useChartEditStore
()
DatasetComponent
,
CanvasRenderer
,
LineChart
,
GridComponent
,
TooltipComponent
,
LegendComponent
,
]);
const
chartEditStore
=
useChartEditStore
();
const
option
=
reactive
({
const
option
=
reactive
({
value
:
{}
value
:
{}
,
})
})
;
// 渐变色处理
// 渐变色处理
watch
(
watch
(
()
=>
chartEditStore
.
getEditCanvasConfig
.
chartThemeColor
,
()
=>
chartEditStore
.
getEditCanvasConfig
.
chartThemeColor
,
(
newColor
:
keyof
typeof
chartColorsSearch
)
=>
{
(
newColor
:
keyof
typeof
chartColorsSearch
)
=>
{
if
(
!
isPreview
())
{
if
(
!
isPreview
())
{
const
themeColor
=
chartColorsSearch
[
newColor
]
||
chartColorsSearch
[
defaultTheme
]
const
themeColor
=
chartColorsSearch
[
newColor
]
||
chartColorsSearch
[
defaultTheme
]
;
props
.
chartConfig
.
option
.
series
.
forEach
((
value
:
any
,
index
:
number
)
=>
{
props
.
chartConfig
.
option
.
series
.
forEach
((
value
:
any
,
index
:
number
)
=>
{
value
.
areaStyle
.
color
=
new
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
value
.
areaStyle
.
color
=
new
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
{
offset
:
0
,
offset
:
0
,
color
:
themeColor
[
3
+
index
]
color
:
themeColor
[
3
+
index
]
,
},
},
{
{
offset
:
1
,
offset
:
1
,
color
:
'
rgba(0,0,0, 0)
'
color
:
"
rgba(0,0,0, 0)
"
,
}
}
,
])
])
;
})
})
;
}
}
option
.
value
=
mergeTheme
(
props
.
chartConfig
.
option
,
props
.
themeSetting
,
includes
)
option
.
value
=
mergeTheme
(
props
.
chartConfig
.
option
,
props
.
themeSetting
,
includes
)
;
props
.
chartConfig
.
option
=
option
.
value
props
.
chartConfig
.
option
=
option
.
value
;
},
},
{
{
immediate
:
true
immediate
:
true
,
}
}
)
)
;
watch
(
watch
(
()
=>
props
.
chartConfig
.
option
.
dataset
,
()
=>
props
.
chartConfig
.
option
.
dataset
,
()
=>
{
()
=>
{
option
.
value
=
props
.
chartConfig
.
option
option
.
value
=
props
.
chartConfig
.
option
;
}
}
)
);
const
{
vChartRef
}
=
useChartDataFetch
(
props
.
chartConfig
,
useChartEditStore
);
const
{
vChartRef
}
=
useChartDataFetch
(
props
.
chartConfig
,
useChartEditStore
)
</
script
>
</
script
>
src/packages/components/Charts/Lines/LineLinearSingle/config.ts
浏览文件 @
318a90f7
...
@@ -29,6 +29,7 @@ export const option = {
...
@@ -29,6 +29,7 @@ export const option = {
series
:
[
series
:
[
{
{
type
:
'
line
'
,
type
:
'
line
'
,
symbolSize
:
5
,
//设定实心点的大小
lineStyle
:
{
lineStyle
:
{
type
:
'
solid
'
,
type
:
'
solid
'
,
width
:
3
,
width
:
3
,
...
...
src/packages/components/Charts/Lines/LineLinearSingle/config.vue
浏览文件 @
318a90f7
...
@@ -39,6 +39,17 @@
...
@@ -39,6 +39,17 @@
></n-select>
></n-select>
</SettingItem>
</SettingItem>
</SettingItemBox>
</SettingItemBox>
<SettingItemBox
name=
"实心点"
>
<SettingItem
name=
"大小"
>
<n-input-number
v-model:value=
"item.symbolSize"
:min=
"1"
:max=
"100"
size=
"small"
placeholder=
"自动计算"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox
name=
"阴影"
:alone=
"true"
>
<SettingItemBox
name=
"阴影"
:alone=
"true"
>
<SettingItem
name=
"颜色"
>
<SettingItem
name=
"颜色"
>
<n-color-picker
<n-color-picker
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录