feat: 视图高级设置

frontend/src/lang/en.js

@@ -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',

frontend/src/lang/tw.js

@@ -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 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -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 页，默认抽取第一个',

frontend/src/views/chart/chart/bar/bar.js

 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
 }
 

frontend/src/views/chart/chart/bar/bar_antv.js

 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: {

frontend/src/views/chart/chart/common/common.js

@@ -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
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+}

frontend/src/views/chart/chart/common/common_antv.js

@@ -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]
+  }
+}

frontend/src/views/chart/chart/line/line.js

 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
 }
 

frontend/src/views/chart/chart/line/line_antv.js

@@ -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: {

frontend/src/views/chart/chart/mix/mix.js

 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
 }

frontend/src/views/chart/chart/scatter/scatter.js

 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
 }
 

frontend/src/views/chart/chart/scatter/scatter_antv.js

@@ -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
     },

frontend/src/views/chart/components/senior/AssistLine.vue

@@ -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()

frontend/src/views/chart/view/ChartEdit.vue

@@ -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>