center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor: 视图样式优化

Browse Source
This commit is contained in:
junjie 2021-07-30 12:47:15 +08:00
parent 5da8de3332
commit 05ab2d576b
8 changed files with 146 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/views/chart/components/component-style/LegendSelector.vue
View File

@ -148,25 +148,29 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.legend) {
this.legendForm = customStyle.legend
}
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.legend) {
this.legendForm = customStyle.legend
}
}
},
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {

32
frontend/src/views/chart/components/component-style/SplitSelector.vue
View File

@ -122,27 +122,31 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.split) {
this.splitForm = customStyle.split
} else {
this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
}
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.split) {
this.splitForm = customStyle.split
} else {
this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
}
}
},
init() {
const arr = []
for (let i = 6; i <= 40; i = i + 2) {

30
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -136,26 +136,30 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.text) {
this.titleForm = customStyle.text
}
this.titleForm.title = this.chart.title
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.text) {
this.titleForm = customStyle.text
}
this.titleForm.title = this.chart.title
}
},
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {

40
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -178,31 +178,35 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.xAxis) {
this.axisForm = customStyle.xAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
}
if (!this.axisForm.nameTextStyle) {
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
}
}
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.xAxis) {
this.axisForm = customStyle.xAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
}
if (!this.axisForm.nameTextStyle) {
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
}
}
}
},
init() {
const arr = []
for (let i = 6; i <= 40; i = i + 2) {

40
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -178,31 +178,35 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.yAxis) {
this.axisForm = customStyle.yAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
}
if (!this.axisForm.nameTextStyle) {
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
}
}
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.yAxis) {
this.axisForm = customStyle.yAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
}
if (!this.axisForm.nameTextStyle) {
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
}
}
}
},
init() {
const arr = []
for (let i = 6; i <= 40; i = i + 2) {

34
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -177,28 +177,32 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.label) {
this.labelForm = customAttr.label
if (!this.labelForm.labelLine) {
this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
}
}
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.label) {
this.labelForm = customAttr.label
if (!this.labelForm.labelLine) {
this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
}
}
}
},
init() {
const arr = []
for (let i = 10; i <= 20; i = i + 2) {

28
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -317,25 +317,29 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.size) {
this.sizeForm = customAttr.size
}
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.size) {
this.sizeForm = customAttr.size
}
}
},
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {

28
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -144,25 +144,29 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
}
}
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.tooltip) {
this.tooltipForm = customAttr.tooltip
}
}
},
init() {
const arr = []
for (let i = 10; i <= 20; i = i + 2) {