xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
master
夜笙歌 5 months ago
parent 26d2673740
commit 6ce3097c37
7 changed files with 784 additions and 192 deletions
Show Stats Download Patch File Download Diff File

176
src/views/boardGenerate/index1.vue
Unescape Escape View File

@ -559,17 +559,184 @@
<div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
<el-collapse-item title="x轴设置" name="1">
<el-collapse-item title="x轴设置" name="1" v-if="Object.keys(nodeAttrForm).includes('xName')">
<el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
<el-input v-model="nodeAttrForm.xName" style="width: 100%" />
</el-form-item>
<el-form-item label="x轴名称位置" v-if="Object.keys(nodeAttrForm).includes('xNameLocation')">
<el-select
v-model="nodeAttrForm.xNameLocation"
placeholder="Select"
style="width: 100%"
>
<el-option
label="左侧"
value="start"
/>
<el-option
label="中心"
value="center"
/>
<el-option
label="右侧"
value="end"
/>
</el-select>
</el-form-item>
<el-form-item label="x轴刻度文字居中" v-if="Object.keys(nodeAttrForm).includes('boundaryGap')">
<el-switch v-model="nodeAttrForm.boundaryGap" />
</el-form-item>
<el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('xAxisLineShow')">
<el-switch v-model="nodeAttrForm.xAxisLineShow" />
</el-form-item>
<el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLineColor')">
<el-color-picker v-model="nodeAttrForm.xAxisLineColor" show-alpha />
</el-form-item>
<el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('xAxisTickShow')">
<el-switch v-model="nodeAttrForm.xAxisTickShow" />
</el-form-item>
<el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisTickInside')">
<el-switch v-model="nodeAttrForm.xAxisTickInside" />
</el-form-item>
<el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisTickColor')">
<el-color-picker v-model="nodeAttrForm.xAxisTickColor" show-alpha />
</el-form-item>
<el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInterval')">
<el-switch v-model="nodeAttrForm.xAxisLabelInterval" />
</el-form-item>
<el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInside')">
<el-switch v-model="nodeAttrForm.xAxisLabelInside" />
</el-form-item>
<el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelRotate')">
<el-slider v-model="nodeAttrForm.xAxisLabelRotate" :min="0" :max="360" />
</el-form-item>
<el-form-item label="刻度文字格式化" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFormatter')">
<el-input v-model="nodeAttrForm.xAxisLabelFormatter" style="width: 100%" />
</el-form-item>
<el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelColor')">
<el-color-picker v-model="nodeAttrForm.xAxisLabelColor" show-alpha />
</el-form-item>
<el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFontSize')">
<el-slider v-model="nodeAttrForm.xAxisLabelFontSize" :min="6" :max="36" />
</el-form-item>
<el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelMargin')">
<el-slider v-model="nodeAttrForm.xAxisLabelMargin" :min="0" :max="36" />
</el-form-item>
<el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineShow')">
<el-switch v-model="nodeAttrForm.xAxisSplitLineShow" />
</el-form-item>
<el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineColor')">
<el-color-picker v-model="nodeAttrForm.xAxisSplitLineColor" show-alpha />
</el-form-item>
<el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineType')">
<el-select
v-model="nodeAttrForm.xAxisSplitLineType"
placeholder="Select"
style="width: 100%"
>
<el-option
label="直线"
value="solid"
/>
<el-option
label="虚线"
value="dashed"
/>
<el-option
label="点线"
value="dotted"
/>
</el-select>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="y轴设置" name="2">
<el-collapse-item title="y轴设置" name="2" v-if="Object.keys(nodeAttrForm).includes('yName')">
<el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
<el-input v-model="nodeAttrForm.yName" style="width: 100%" />
</el-form-item>
<el-form-item label="y轴名称位置" v-if="Object.keys(nodeAttrForm).includes('yNameLocation')">
<el-select
v-model="nodeAttrForm.yNameLocation"
placeholder="Select"
style="width: 100%"
>
<el-option
label="顶部"
value="start"
/>
<el-option
label="中心"
value="center"
/>
<el-option
label="底部"
value="end"
/>
</el-select>
</el-form-item>
<el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('yAxisLineShow')">
<el-switch v-model="nodeAttrForm.yAxisLineShow" />
</el-form-item>
<el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLineColor')">
<el-color-picker v-model="nodeAttrForm.yAxisLineColor" show-alpha />
</el-form-item>
<el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('yAxisTickShow')">
<el-switch v-model="nodeAttrForm.yAxisTickShow" />
</el-form-item>
<el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisTickInside')">
<el-switch v-model="nodeAttrForm.yAxisTickInside" />
</el-form-item>
<el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisTickColor')">
<el-color-picker v-model="nodeAttrForm.yAxisTickColor" show-alpha />
</el-form-item>
<el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInterval')">
<el-switch v-model="nodeAttrForm.yAxisLabelInterval" />
</el-form-item>
<el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInside')">
<el-switch v-model="nodeAttrForm.yAxisLabelInside" />
</el-form-item>
<el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelRotate')">
<el-slider v-model="nodeAttrForm.yAxisLabelRotate" :min="0" :max="360" />
</el-form-item>
<el-form-item label="刻度文字内容格式" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFormatter')">
<el-input v-model="nodeAttrForm.yAxisLabelFormatter" style="width: 100%" />
</el-form-item>
<el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelColor')">
<el-color-picker v-model="nodeAttrForm.yAxisLabelColor" show-alpha />
</el-form-item>
<el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFontSize')">
<el-slider v-model="nodeAttrForm.yAxisLabelFontSize" :min="6" :max="36" />
</el-form-item>
<el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelMargin')">
<el-slider v-model="nodeAttrForm.yAxisLabelMargin" :min="0" :max="36" />
</el-form-item>
<el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineShow')">
<el-switch v-model="nodeAttrForm.yAxisSplitLineShow" />
</el-form-item>
<el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineColor')">
<el-color-picker v-model="nodeAttrForm.yAxisSplitLineColor" show-alpha />
</el-form-item>
<el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineType')">
<el-select
v-model="nodeAttrForm.yAxisSplitLineType"
placeholder="Select"
style="width: 100%"
>
<el-option
label="直线"
value="solid"
/>
<el-option
label="虚线"
value="dashed"
/>
<el-option
label="点线"
value="dotted"
/>
</el-select>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="边距设置" name="3">
<el-collapse-item title="边距设置" name="3" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
<el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
<el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
</el-form-item>
@ -583,7 +750,7 @@
<el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="100" />
</el-form-item>
</el-collapse-item>
<el-collapse-item title="表格设置" name="4">
<el-collapse-item title="表格设置" name="4" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
<el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
<el-button class="optionsBtn" plain @click="tableOptionsVisible = true">
配置表格
@ -1260,6 +1427,7 @@ const logEvent = async (eventname, event) => {
nodeAttrForm.value = event.node.data.options;
nodeDataForm.value = event.node;
customDataForm.value = event.node.data.customData;
console.log(nodeDataForm.value);
break;
case 'nodeDrag':
console.log(event.nodes);

187
src/views/boardGenerate/nodes/board/backgroundBarNode.vue
Unescape Escape View File

@ -103,57 +103,76 @@ const defaultOption = {
xAxis: [
{
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
type: 'category',
boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: '#DCE2E8'
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 3
},
axisPointer: {
label: {
padding: [0, 0, 0, 0],
margin: 0,
// 移入时的字体大小
fontSize: 12
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
boundaryGap: true
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
}
],
yAxis: [
{
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: '#fff'
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: false
}
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
},
}
],
series: [
@ -161,19 +180,11 @@ const defaultOption = {
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
color: props.data?.options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#0372FF'
},
{
offset: 1,
color: '#75ECFF'
}
])
color: '#0372FF'
}
},
barMaxWidth: 50,
@ -205,25 +216,87 @@ const getOption = () => {
bottom: options?.gridBottom + '%' || '20%',
right: options?.gridRight + '%' || '20%'
},
xAxis: [
{
name: options?.xName || ''
}
],
yAxis: [
{
name: options?.yName || ''
}
],
series: [
{
backgroundStyle: {
color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
xAxis: [
{
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
]
}
;
}
],
yAxis: [
{
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
axisLine: {
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
}
}
],
series: [
{
backgroundStyle: {
color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
}
}
]
};
let xData = [data?.x1 || []];
let yData = [data?.y1 || []];
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));

79
src/views/boardGenerate/nodes/board/barNode.vue
Unescape Escape View File

@ -103,57 +103,76 @@ const defaultOption = {
xAxis: [
{
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
type: 'category',
boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: '#DCE2E8'
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 3
},
axisPointer: {
label: {
padding: [0, 0, 0, 0],
margin: 0,
// 移入时的字体大小
fontSize: 12
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
boundaryGap: true
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
}
],
yAxis: [
{
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: '#fff'
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: false
}
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
},
}
],
series: [

159
src/views/boardGenerate/nodes/board/curveNode.vue
Unescape Escape View File

@ -103,67 +103,86 @@ const defaultOption = {
xAxis: [
{
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
type: 'category',
boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: '#DCE2E8'
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 3
},
axisPointer: {
label: {
padding: [0, 0, 0, 0],
margin: 0,
// 移入时的字体大小
fontSize: 12
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
boundaryGap: true
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
}
],
yAxis: [
{
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: '#fff'
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: false
}
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
},
}
],
series: [
{
type: 'line',
symbolSize: 1,
symbol: 'circle',
showSymbol: props.data?.options?.lineSymbolShow || false,
symbolSize: props.data?.options?.lineSymbolSize || 5,
symbol: props.data?.options?.lineSymbolType || 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
@ -208,12 +227,82 @@ const getOption = () => {
},
xAxis: [
{
name: props.data?.options?.xName || ''
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
}
],
yAxis: [
{
name: props.data?.options?.yName || ''
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
axisLine: {
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
}
}
],
series: [
{
showSymbol: props.data?.options?.lineSymbolShow || false,
symbolSize: props.data?.options?.lineSymbolSize || 5,
symbol: props.data?.options?.lineSymbolType || 'circle'
}
]
};

101
src/views/boardGenerate/nodes/board/lineNode.vue
Unescape Escape View File

@ -48,7 +48,7 @@ const props = defineProps({
});
const chartRef = ref();
let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']);
const defaultOption = {
title: {
text: props.data.options.title || '',
@ -114,6 +114,7 @@ const defaultOption = {
},
axisTick: {
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
@ -140,6 +141,7 @@ const defaultOption = {
yAxis: [
{
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
type: 'value',
axisLine: {
show: props.data?.options?.yAxisLineShow || false,
@ -149,6 +151,7 @@ const defaultOption = {
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
@ -175,31 +178,23 @@ const defaultOption = {
series: [
{
type: 'line',
symbolSize: 1,
symbol: 'circle',
showSymbol: props.data?.options?.lineSymbolShow || false,
symbolSize: props.data?.options?.lineSymbolSize || 5,
symbol: props.data?.options?.lineSymbolType || 'circle',
smooth: false,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#9effff'
},
{
offset: 1,
color: '#9E87FF'
}
]),
color: colorList.value[0],
shadowColor: 'rgba(158,135,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[0],
borderColor: colorList[0]
color: colorList.value[0],
borderColor: colorList.value[0],
borderWidth: 1
}
}
}
@ -224,12 +219,82 @@ const getOption = () => {
},
xAxis: [
{
name: props.data?.options?.xName || ''
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
}
],
yAxis: [
{
name: props.data?.options?.yName || ''
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
axisLine: {
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
}
}
],
series: [
{
showSymbol: props.data?.options?.lineSymbolShow || false,
symbolSize: props.data?.options?.lineSymbolSize || 5,
symbol: props.data?.options?.lineSymbolType || 'circle'
}
]
};

106
src/views/boardGenerate/nodes/board/multiLinesNode.vue
Unescape Escape View File

@ -48,7 +48,7 @@ const props = defineProps({
});
const chartRef = ref();
let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']);
const sortData = (data) => {
let obj = [];
Object.keys(data).forEach((key) => {
@ -76,7 +76,7 @@ const getOption = () => {
top: '5%'
},
legend: {
show:props.data?.options?.legend||false,
show: props.data?.options?.legend || false,
icon: 'circle',
top: '5%',
right: '5%',
@ -87,7 +87,7 @@ const getOption = () => {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
show: props.data?.options?.tooltip || false,
trigger: 'axis',
axisPointer: {
label: {
@ -115,84 +115,96 @@ const getOption = () => {
},
xAxis: [
{
name: props.data?.options?.xName || '',
nameLocation: props.data?.options?.xNameLocation || 'end',
type: 'category',
boundaryGap: props.data?.options?.boundaryGap || false,
axisLine: {
show: props.data?.options?.xAxisLineShow || false,
lineStyle: {
color: '#DCE2E8'
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 3
},
axisPointer: {
label: {
padding: [0, 0, 0, 0],
margin: 0,
// 移入时的字体大小
fontSize: 12
show: props.data?.options?.xAxisTickShow || false,
inside: props.data?.options?.xAxisTickInside || false,
lineStyle: {
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
}
},
boundaryGap: true
axisLabel: {
show: props.data?.options?.xAxisLabelShow || false,
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.xAxisLabelInside || false,
formatter: props.data?.options?.xAxisLabelFormatter || null,
rotate: props.data?.options?.xAxisLabelRotate || 0,
color: props.data?.options?.xAxisLabelColor || '#fff',
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
margin: props.data?.options?.xAxisLabelMargin || 3
},
splitLine: {
show: props.data?.options?.xAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.xAxisSplitLineType || 'solid'
}
}
}
],
yAxis: {
name: props.data?.options?.yName || '',
nameLocation: props.data?.options?.yNameLocation || 'end',
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
show: props.data?.options?.yAxisLineShow || false,
lineStyle: {
color: '#fff'
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
}
},
axisTick: {
show: props.data?.options?.yAxisTickShow || false,
inside: props.data?.options?.yAxisTickInside || false,
lineStyle: {
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
show: props.data?.options?.yAxisLabelShow || false,
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
inside: props.data?.options?.yAxisLabelInside || false,
formatter: props.data?.options?.yAxisLabelFormatter || null,
rotate: props.data?.options?.yAxisLabelRotate || 0,
color: props.data?.options?.yAxisLabelColor || '#fff',
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
margin: props.data?.options?.yAxisLabelMargin || 3
},
splitLine: {
show: false
show: props.data?.options?.yAxisSplitLineShow || false,
lineStyle: {
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
type: props.data?.options?.yAxisSplitLineType || 'solid'
}
}
},
series: props.data.options?.yNames.map(() => {
return {
type: 'line',
symbolSize: 1,
symbol: 'circle',
showSymbol: props.data?.options?.lineSymbolShow || false,
symbolSize: props.data?.options?.lineSymbolSize || 5,
symbol: props.data?.options?.lineSymbolType || 'circle',
smooth: false,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#9effff'
},
{
offset: 1,
color: '#9E87FF'
}
]),
color: colorList.value[0],
shadowColor: 'rgba(158,135,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[0],
borderColor: colorList[0]
color: colorList.value[0],
borderColor: colorList.value[0]
}
}
};

168
src/views/boardGenerate/tool.js
Unescape Escape View File

@ -17,12 +17,13 @@ const getOption = (e) => {
gridLeft: 5,
gridBottom: 10,
gridRight: 10,
boundaryGap: true,
xName: '',
xNameLocation: 'end',
xAxisLineShow: true,
boundaryGap: true,
xAxisLineColor: '#DCE2E8',
xAxisTickShow: true,
xAxisTickInside: false,
xAxisTickColor: '#DCE2E8',
xAxisLabelShow: true,
xAxisLabelInterval: false,
@ -36,6 +37,26 @@ const getOption = (e) => {
xAxisSplitLineColor: '#DCE2E8',
xAxisSplitLineType: 'solid',
yName: '',
yNameLocation: 'end',
yAxisLineShow: true,
yAxisLineColor: '#DCE2E8',
yAxisTickShow: true,
yAxisTickInside: false,
yAxisTickColor: '#DCE2E8',
yAxisLabelShow: true,
yAxisLabelInterval: false,
yAxisLabelInside: false,
yAxisLabelRotate: 0,
yAxisLabelFormatter: '',
yAxisLabelColor: '#fff',
yAxisLabelFontSize: 12,
yAxisLabelMargin: 3,
yAxisSplitLineShow: false,
yAxisSplitLineColor: '#DCE2E8',
yAxisSplitLineType: 'solid',
lineSymbolShow: false,
lineSymbolSize: 5,
lineSymbolType: 'circle',
tooltip: true,
legend: true
};
@ -47,8 +68,43 @@ const getOption = (e) => {
gridLeft: 5,
gridBottom: 10,
gridRight: 10,
boundaryGap: true,
xName: '',
xNameLocation: 'end',
xAxisLineShow: true,
xAxisLineColor: '#DCE2E8',
xAxisTickShow: true,
xAxisTickInside: false,
xAxisTickColor: '#DCE2E8',
xAxisLabelShow: true,
xAxisLabelInterval: false,
xAxisLabelInside: false,
xAxisLabelRotate: 0,
xAxisLabelFormatter: '',
xAxisLabelColor: '#fff',
xAxisLabelFontSize: 12,
xAxisLabelMargin: 3,
xAxisSplitLineShow: false,
xAxisSplitLineColor: '#DCE2E8',
xAxisSplitLineType: 'solid',
yName: '',
yNameLocation: 'end',
yAxisLineShow: true,
yAxisLineColor: '#DCE2E8',
yAxisTickShow: true,
yAxisTickInside: false,
yAxisTickColor: '#DCE2E8',
yAxisLabelShow: true,
yAxisLabelInterval: false,
yAxisLabelInside: false,
yAxisLabelRotate: 0,
yAxisLabelFormatter: '',
yAxisLabelColor: '#fff',
yAxisLabelFontSize: 12,
yAxisLabelMargin: 3,
yAxisSplitLineShow: false,
yAxisSplitLineColor: '#DCE2E8',
yAxisSplitLineType: 'solid',
tooltip: true,
legend: true
};
@ -60,8 +116,43 @@ const getOption = (e) => {
gridLeft: 5,
gridBottom: 10,
gridRight: 10,
boundaryGap: true,
xName: '',
xNameLocation: 'end',
xAxisLineShow: true,
xAxisLineColor: '#DCE2E8',
xAxisTickShow: true,
xAxisTickInside: false,
xAxisTickColor: '#DCE2E8',
xAxisLabelShow: true,
xAxisLabelInterval: false,
xAxisLabelInside: false,
xAxisLabelRotate: 0,
xAxisLabelFormatter: '',
xAxisLabelColor: '#fff',
xAxisLabelFontSize: 12,
xAxisLabelMargin: 3,
xAxisSplitLineShow: false,
xAxisSplitLineColor: '#DCE2E8',
xAxisSplitLineType: 'solid',
yName: '',
yNameLocation: 'end',
yAxisLineShow: true,
yAxisLineColor: '#DCE2E8',
yAxisTickShow: true,
yAxisTickInside: false,
yAxisTickColor: '#DCE2E8',
yAxisLabelShow: true,
yAxisLabelInterval: false,
yAxisLabelInside: false,
yAxisLabelRotate: 0,
yAxisLabelFormatter: '',
yAxisLabelColor: '#fff',
yAxisLabelFontSize: 12,
yAxisLabelMargin: 3,
yAxisSplitLineShow: false,
yAxisSplitLineColor: '#DCE2E8',
yAxisSplitLineType: 'solid',
tooltip: true,
legend: true,
backgroundColor: 'rgba(180, 180, 180, 0.2)'
@ -74,8 +165,46 @@ const getOption = (e) => {
gridLeft: 5,
gridBottom: 10,
gridRight: 10,
boundaryGap: true,
xName: '',
xNameLocation: 'end',
xAxisLineShow: true,
xAxisLineColor: '#DCE2E8',
xAxisTickShow: true,
xAxisTickInside: false,
xAxisTickColor: '#DCE2E8',
xAxisLabelShow: true,
xAxisLabelInterval: false,
xAxisLabelInside: false,
xAxisLabelRotate: 0,
xAxisLabelFormatter: '',
xAxisLabelColor: '#fff',
xAxisLabelFontSize: 12,
xAxisLabelMargin: 3,
xAxisSplitLineShow: false,
xAxisSplitLineColor: '#DCE2E8',
xAxisSplitLineType: 'solid',
yName: '',
yNameLocation: 'end',
yAxisLineShow: true,
yAxisLineColor: '#DCE2E8',
yAxisTickShow: true,
yAxisTickInside: false,
yAxisTickColor: '#DCE2E8',
yAxisLabelShow: true,
yAxisLabelInterval: false,
yAxisLabelInside: false,
yAxisLabelRotate: 0,
yAxisLabelFormatter: '',
yAxisLabelColor: '#fff',
yAxisLabelFontSize: 12,
yAxisLabelMargin: 3,
yAxisSplitLineShow: false,
yAxisSplitLineColor: '#DCE2E8',
yAxisSplitLineType: 'solid',
lineSymbolShow: false,
lineSymbolSize: 5,
lineSymbolType: 'circle',
tooltip: true,
legend: true
};
@ -88,7 +217,44 @@ const getOption = (e) => {
gridBottom: 10,
gridRight: 10,
xName: '',
xNameLocation: 'end',
xAxisLineShow: true,
xAxisLineColor: '#DCE2E8',
xAxisTickShow: true,
xAxisTickInside: false,
xAxisTickColor: '#DCE2E8',
xAxisLabelShow: true,
xAxisLabelInterval: false,
xAxisLabelInside: false,
xAxisLabelRotate: 0,
xAxisLabelFormatter: '',
xAxisLabelColor: '#fff',
xAxisLabelFontSize: 12,
xAxisLabelMargin: 3,
xAxisSplitLineShow: false,
xAxisSplitLineColor: '#DCE2E8',
xAxisSplitLineType: 'solid',
yName: '',
yNameLocation: 'end',
yAxisLineShow: true,
yAxisLineColor: '#DCE2E8',
yAxisTickShow: true,
yAxisTickInside: false,
yAxisTickColor: '#DCE2E8',
yAxisLabelShow: true,
yAxisLabelInterval: false,
yAxisLabelInside: false,
yAxisLabelRotate: 0,
yAxisLabelFormatter: '',
yAxisLabelColor: '#fff',
yAxisLabelFontSize: 12,
yAxisLabelMargin: 3,
yAxisSplitLineShow: false,
yAxisSplitLineColor: '#DCE2E8',
yAxisSplitLineType: 'solid',
lineSymbolShow: false,
lineSymbolSize: 5,
lineSymbolType: 'circle',
tooltip: true,
legend: true
};

Write Preview
Loading…
Cancel
Save