github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 20:42:55 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: 视图高级设置

Browse Source
This commit is contained in:
junjun 2022-03-07 13:30:22 +08:00
parent 52c6a1b2fe
commit a84820ba1e
14 changed files with 199 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lang/en.js
View File

@ -1039,7 +1039,9 @@ export default {
chart_no_senior: 'This chart type not support senior config,please look forward to.',
assist_line: 'Assist Line',
field_fixed: 'Fixed',
line_type_dotted: 'Dotted'
line_type_dotted: 'Dotted',
value_can_not_empty: 'Value can not be empty',
value_error: 'Value illegal'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

4
frontend/src/lang/tw.js
View File

@ -1039,7 +1039,9 @@ export default {
chart_no_senior: '當前圖表類型暫無高級配置，敬請期待',
assist_line: '輔助線',
field_fixed: '固定值',
line_type_dotted: '點'
line_type_dotted: '點',
value_can_not_empty: '值不能為空',
value_error: '值必須為數值'
},
dataset: {
sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

4
frontend/src/lang/zh.js
View File

@ -1042,7 +1042,9 @@ export default {
chart_no_senior: '当前图表类型暂无高级配置，敬请期待',
assist_line: '辅助线',
field_fixed: '固定值',
line_type_dotted: '点'
line_type_dotted: '点',
value_can_not_empty: '值不能为空',
value_error: '值必须为数值'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',

4
frontend/src/views/chart/chart/bar/bar.js
View File

@ -1,5 +1,5 @@
import { hexColorToRGBA } from '../util.js'
import { componentStyle } from '../common/common'
import { componentStyle, seniorCfg } from '../common/common'
export function baseBarOption(chart_option, chart) {
// 处理shape attr
@ -48,6 +48,7 @@ export function baseBarOption(chart_option, chart) {
}
// console.log(chart_option);
componentStyle(chart_option, chart)
seniorCfg(chart_option, chart)
return chart_option
}
@ -110,6 +111,7 @@ export function horizontalBarOption(chart_option, chart) {
}
// console.log(chart_option);
componentStyle(chart_option, chart)
seniorCfg(chart_option, chart)
return chart_option
}

16
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -1,5 +1,15 @@
import { Column, Bar } from '@antv/g2plot'
import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding, getSlider } from '@/views/chart/chart/common/common_antv'
import {
getTheme,
getLabel,
getTooltip,
getLegend,
getXAxis,
getYAxis,
getPadding,
getSlider,
getAnalyse
} from '@/views/chart/chart/common/common_antv'
export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
// theme
@ -15,6 +25,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
const data = chart.data.datas
// config
const slider = getSlider(chart)
const analyse = getAnalyse(chart)
// options
const options = {
theme: theme,
@ -29,6 +40,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
annotations: analyse,
interactions: [
{
type: 'element-active', cfg: {
@ -113,6 +125,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
const data = chart.data.datas
// config
const slider = getSlider(chart)
const analyse = getAnalyse(chart)
// options
const options = {
theme: theme,
@ -127,6 +140,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
annotations: analyse,
interactions: [
{
type: 'element-active', cfg: {

76
frontend/src/views/chart/chart/common/common.js
View File

@ -178,3 +178,79 @@ export function componentStyle(chart_option, chart) {
}
}
}
export function seniorCfg(chart_option, chart) {
if (chart.senior && chart.type && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('mix'))) {
const senior = JSON.parse(chart.senior)
if (senior.functionCfg) {
if (senior.functionCfg.sliderShow) {
chart_option.dataZoom = [
{
type: 'inside',
start: parseInt(senior.functionCfg.sliderRange[0]),
end: parseInt(senior.functionCfg.sliderRange[1])
},
{
type: 'slider',
start: parseInt(senior.functionCfg.sliderRange[0]),
end: parseInt(senior.functionCfg.sliderRange[1])
}
]
if (chart.type.includes('horizontal')) {
chart_option.dataZoom[0].yAxisIndex = [0]
chart_option.dataZoom[1].yAxisIndex = [0]
chart_option.dataZoom[1].left = '10px'
}
}
}
if (senior.assistLine && senior.assistLine.length > 0) {
if (chart_option.series && chart_option.series.length > 0) {
chart_option.series[0].markLine = {
symbol: 'none',
data: []
}
senior.assistLine.forEach(ele => {
if (chart.type.includes('horizontal')) {
chart_option.series[0].markLine.data.push({
symbol: 'none',
xAxis: parseFloat(ele.value),
name: ele.name,
lineStyle: {
color: ele.color,
type: ele.lineType
},
label: {
show: true,
color: ele.color,
fontSize: 10,
position: 'insideStartTop'
},
tooltip: {
show: false
}
})
} else {
chart_option.series[0].markLine.data.push({
symbol: 'none',
yAxis: parseFloat(ele.value),
name: ele.name,
lineStyle: {
color: ele.color,
type: ele.lineType
},
label: {
show: true,
color: ele.color,
fontSize: 10,
position: 'insideStartTop'
},
tooltip: {
show: false
}
})
}
})
}
}
}
}

49
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -439,7 +439,7 @@ function transAxisPosition(chart, axis) {
export function getSlider(chart) {
let senior = {}
let cfg = false
if (chart.senior) {
if (chart.senior && chart.type && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('mix'))) {
senior = JSON.parse(chart.senior)
if (senior.functionCfg) {
if (senior.functionCfg.sliderShow) {
@ -452,3 +452,50 @@ export function getSlider(chart) {
}
return cfg
}
export function getAnalyse(chart) {
let senior = {}
const assistLine = []
if (chart.senior && chart.type && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('mix'))) {
senior = JSON.parse(chart.senior)
if (senior.assistLine && senior.assistLine.length > 0) {
senior.assistLine.forEach(ele => {
assistLine.push({
type: 'line',
start: ['start', parseFloat(ele.value)],
end: ['end', parseFloat(ele.value)],
style: {
stroke: ele.color,
lineDash: getLineDash(ele.lineType)
}
})
assistLine.push({
type: 'text',
position: ['start', parseFloat(ele.value)],
content: parseFloat(ele.value),
offsetY: -2,
offsetX: 2,
style: {
textBaseline: 'bottom',
fill: ele.color,
fontSize: 10
}
})
})
}
}
return assistLine
}
function getLineDash(type) {
switch (type) {
case 'solid':
return [0, 0]
case 'dashed':
return [10, 8]
case 'dotted':
return [2, 2]
default:
return [0, 0]
}
}

3
frontend/src/views/chart/chart/line/line.js
View File

@ -1,5 +1,5 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { componentStyle, seniorCfg } from '../common/common'
export function baseLineOption(chart_option, chart) {
// 处理shape attr
@ -55,6 +55,7 @@ export function baseLineOption(chart_option, chart) {
}
// console.log(chart_option);
componentStyle(chart_option, chart)
seniorCfg(chart_option, chart)
return chart_option
}

7
frontend/src/views/chart/chart/line/line_antv.js
View File

@ -7,7 +7,8 @@ import {
getXAxis,
getYAxis,
getPadding,
getSlider
getSlider,
getAnalyse
} from '@/views/chart/chart/common/common_antv'
export function baseLineOptionAntV(plot, container, chart, action) {
@ -24,6 +25,7 @@ export function baseLineOptionAntV(plot, container, chart, action) {
const data = chart.data.datas
// config
const slider = getSlider(chart)
const analyse = getAnalyse(chart)
// options
const options = {
point: {},
@ -39,6 +41,7 @@ export function baseLineOptionAntV(plot, container, chart, action) {
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
annotations: analyse,
interactions: [
{
type: 'element-active', cfg: {
@ -114,6 +117,7 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
const data = chart.data.datas
// config
const slider = getSlider(chart)
const analyse = getAnalyse(chart)
// options
const options = {
point: {},
@ -129,6 +133,7 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
annotations: analyse,
interactions: [
{
type: 'element-active', cfg: {

3
frontend/src/views/chart/chart/mix/mix.js
View File

@ -1,5 +1,5 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { componentStyle, seniorCfg } from '../common/common'
export function baseMixOption(chart_option, chart) {
// 处理shape attr
@ -68,5 +68,6 @@ export function baseMixOption(chart_option, chart) {
}
// console.log(chart_option);
componentStyle(chart_option, chart)
seniorCfg(chart_option, chart)
return chart_option
}

3
frontend/src/views/chart/chart/scatter/scatter.js
View File

@ -1,5 +1,5 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { componentStyle, seniorCfg } from '../common/common'
let bubbleArray = []
let terminalType = 'pc'
@ -57,6 +57,7 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') {
}
// console.log(chart_option);
componentStyle(chart_option, chart)
seniorCfg(chart_option, chart)
return chart_option
}

5
frontend/src/views/chart/chart/scatter/scatter_antv.js
View File

@ -6,7 +6,8 @@ import {
getXAxis,
getYAxis,
getPadding,
getSlider
getSlider,
getAnalyse
} from '@/views/chart/chart/common/common_antv'
import { Scatter } from '@antv/g2plot'
@ -25,6 +26,7 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
const data = chart.data.datas
// config
const slider = getSlider(chart)
const analyse = getAnalyse(chart)
// options
const options = {
theme: theme,
@ -39,6 +41,7 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
xAxis: xAxis,
yAxis: yAxis,
slider: slider,
annotations: analyse,
pieStyle: {
lineWidth: 0
},

28
frontend/src/views/chart/components/senior/AssistLine.vue
View File

@ -102,6 +102,34 @@ export default {
this.editLineDialog = false
},
changeLine() {
// check line config
for (let i = 0; i < this.lineArr.length; i++) {
const ele = this.lineArr[i]
if (!ele.name || ele.name === '') {
this.$message({
message: this.$t('chart.name_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if (!ele.value) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if (parseFloat(ele.value).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
}
}
this.assistLine = JSON.parse(JSON.stringify(this.lineArr))
this.changeAssistLine()
this.closeEditLine()

5
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -2633,7 +2633,10 @@ export default {
width: 100%;
text-align: center;
font-size: 12px;
margin-top: 40px;
padding-top: 40px;
overflow:auto;
border-right: 1px solid #e6e6e6;
height: 100%;
}
</style>