feat: 视图高级设置

backend/src/main/java/io/dataease/base/domain/ChartView.java

 package io.dataease.base.domain;
 
 import java.io.Serializable;
+
+import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 
 @Data
 public class ChartView implements Serializable {
+    @ApiModelProperty("ID")
     private String id;
-
+    @ApiModelProperty("名称")
     private String name;
-
-    private String title;
-
-    private String sceneId;
-
+    @ApiModelProperty("数据集ID")
     private String tableId;
-
+    @ApiModelProperty("图表类型")
     private String type;
-
+    @ApiModelProperty("渲染方式")
     private String render;
-
+    @ApiModelProperty("展示结果数量")
     private Integer resultCount;
-
+    @ApiModelProperty("展示结果")
     private String resultMode;
-
+    @ApiModelProperty("标题")
+    private String title;
+    @ApiModelProperty("场景ID")
+    private String sceneId;
+    @ApiModelProperty("创建人")
     private String createBy;
-
+    @ApiModelProperty("创建时间")
     private Long createTime;
-
+    @ApiModelProperty("更新时间")
     private Long updateTime;
-
+    @ApiModelProperty("样式优先级")
     private String stylePriority;
-
+    @ApiModelProperty("public or private")
     private String chartType;
-
+    @ApiModelProperty("是否插件")
     private Boolean isPlugin;
 
     private static final long serialVersionUID = 1L;

backend/src/main/java/io/dataease/base/domain/ChartViewExample.java

@@ -244,146 +244,6 @@ public class ChartViewExample {
             return (Criteria) this;
         }
 
-        public Criteria andTitleIsNull() {
-            addCriterion("title is null");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleIsNotNull() {
-            addCriterion("title is not null");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleEqualTo(String value) {
-            addCriterion("title =", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleNotEqualTo(String value) {
-            addCriterion("title <>", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleGreaterThan(String value) {
-            addCriterion("title >", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleGreaterThanOrEqualTo(String value) {
-            addCriterion("title >=", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleLessThan(String value) {
-            addCriterion("title <", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleLessThanOrEqualTo(String value) {
-            addCriterion("title <=", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleLike(String value) {
-            addCriterion("title like", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleNotLike(String value) {
-            addCriterion("title not like", value, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleIn(List<String> values) {
-            addCriterion("title in", values, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleNotIn(List<String> values) {
-            addCriterion("title not in", values, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleBetween(String value1, String value2) {
-            addCriterion("title between", value1, value2, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andTitleNotBetween(String value1, String value2) {
-            addCriterion("title not between", value1, value2, "title");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdIsNull() {
-            addCriterion("scene_id is null");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdIsNotNull() {
-            addCriterion("scene_id is not null");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdEqualTo(String value) {
-            addCriterion("scene_id =", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdNotEqualTo(String value) {
-            addCriterion("scene_id <>", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdGreaterThan(String value) {
-            addCriterion("scene_id >", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdGreaterThanOrEqualTo(String value) {
-            addCriterion("scene_id >=", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdLessThan(String value) {
-            addCriterion("scene_id <", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdLessThanOrEqualTo(String value) {
-            addCriterion("scene_id <=", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdLike(String value) {
-            addCriterion("scene_id like", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdNotLike(String value) {
-            addCriterion("scene_id not like", value, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdIn(List<String> values) {
-            addCriterion("scene_id in", values, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdNotIn(List<String> values) {
-            addCriterion("scene_id not in", values, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdBetween(String value1, String value2) {
-            addCriterion("scene_id between", value1, value2, "sceneId");
-            return (Criteria) this;
-        }
-
-        public Criteria andSceneIdNotBetween(String value1, String value2) {
-            addCriterion("scene_id not between", value1, value2, "sceneId");
-            return (Criteria) this;
-        }
-
         public Criteria andTableIdIsNull() {
             addCriterion("table_id is null");
             return (Criteria) this;
@@ -724,6 +584,146 @@ public class ChartViewExample {
             return (Criteria) this;
         }
 
+        public Criteria andTitleIsNull() {
+            addCriterion("title is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleIsNotNull() {
+            addCriterion("title is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleEqualTo(String value) {
+            addCriterion("title =", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotEqualTo(String value) {
+            addCriterion("title <>", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleGreaterThan(String value) {
+            addCriterion("title >", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleGreaterThanOrEqualTo(String value) {
+            addCriterion("title >=", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleLessThan(String value) {
+            addCriterion("title <", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleLessThanOrEqualTo(String value) {
+            addCriterion("title <=", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleLike(String value) {
+            addCriterion("title like", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotLike(String value) {
+            addCriterion("title not like", value, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleIn(List<String> values) {
+            addCriterion("title in", values, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotIn(List<String> values) {
+            addCriterion("title not in", values, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleBetween(String value1, String value2) {
+            addCriterion("title between", value1, value2, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andTitleNotBetween(String value1, String value2) {
+            addCriterion("title not between", value1, value2, "title");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdIsNull() {
+            addCriterion("scene_id is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdIsNotNull() {
+            addCriterion("scene_id is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdEqualTo(String value) {
+            addCriterion("scene_id =", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotEqualTo(String value) {
+            addCriterion("scene_id <>", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdGreaterThan(String value) {
+            addCriterion("scene_id >", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdGreaterThanOrEqualTo(String value) {
+            addCriterion("scene_id >=", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdLessThan(String value) {
+            addCriterion("scene_id <", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdLessThanOrEqualTo(String value) {
+            addCriterion("scene_id <=", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdLike(String value) {
+            addCriterion("scene_id like", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotLike(String value) {
+            addCriterion("scene_id not like", value, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdIn(List<String> values) {
+            addCriterion("scene_id in", values, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotIn(List<String> values) {
+            addCriterion("scene_id not in", values, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdBetween(String value1, String value2) {
+            addCriterion("scene_id between", value1, value2, "sceneId");
+            return (Criteria) this;
+        }
+
+        public Criteria andSceneIdNotBetween(String value1, String value2) {
+            addCriterion("scene_id not between", value1, value2, "sceneId");
+            return (Criteria) this;
+        }
+
         public Criteria andCreateByIsNull() {
             addCriterion("create_by is null");
             return (Criteria) this;

backend/src/main/java/io/dataease/base/domain/ChartViewWithBLOBs.java

 package io.dataease.base.domain;
 
 import java.io.Serializable;
+
+import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 import lombok.ToString;
@@ -9,26 +11,29 @@ import lombok.ToString;
 @EqualsAndHashCode(callSuper = true)
 @ToString(callSuper = true)
 public class ChartViewWithBLOBs extends ChartView implements Serializable {
+    @ApiModelProperty("x轴")
     private String xAxis;
-
+    @ApiModelProperty("x副轴")
     private String xAxisExt;
-
+    @ApiModelProperty("y轴")
     private String yAxis;
-
+    @ApiModelProperty("y副轴")
     private String yAxisExt;
-
+    @ApiModelProperty("堆叠字段")
     private String extStack;
-
+    @ApiModelProperty("气泡大小字段")
     private String extBubble;
-
+    @ApiModelProperty("图形属性")
     private String customAttr;
-
+    @ApiModelProperty("组件样式")
     private String customStyle;
-
+    @ApiModelProperty("过滤器字段")
     private String customFilter;
-
+    @ApiModelProperty("下钻字段")
     private String drillFields;
-
+    @ApiModelProperty("高级设置")
+    private String senior;
+    @ApiModelProperty("视图截图快照")
     private String snapshot;
 
     private static final long serialVersionUID = 1L;

backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml

@@ -9,9 +9,9 @@
     </resultMap>
 
     <select id="searchOneWithPrivileges" resultMap="BaseResultMapDTO">
-        select
-        chart_view.*
-        from chart_view where id = #{id}
+        select chart_view.*
+        from chart_view
+        where id = #{id}
     </select>
 
     <select id="searchOne" resultMap="BaseResultMapDTO">
@@ -83,8 +83,7 @@
     </select>
 
     <insert id="chartCopy">
-        INSERT INTO chart_view (
-            `id`,
+        INSERT INTO chart_view (`id`,
                                 `name`,
                                 `scene_id`,
                                 `table_id`,
@@ -108,14 +107,14 @@
                                 `render`,
                                 `result_count`,
                                 `result_mode`,
-            `chart_type`
-        ) SELECT
-        #{newChartId},
-        GET_CHART_VIEW_COPY_NAME ( #{oldChartId} ),
+                                `chart_type`,
+                                `senior`)
+        SELECT #{newChartId},
+               GET_CHART_VIEW_COPY_NAME(#{oldChartId}),
                #{panelId},
                `table_id`,
                `type`,
-        GET_CHART_VIEW_COPY_NAME ( #{oldChartId} ),
+               GET_CHART_VIEW_COPY_NAME(#{oldChartId}),
                `x_axis`,
                `x_axis_ext`,
                `y_axis`,
@@ -134,35 +133,32 @@
                `render`,
                `result_count`,
                `result_mode`,
-        'private'
-        FROM
-            chart_view
-        WHERE
-            id = #{oldChartId}
+               'private',
+               `senior`
+        FROM chart_view
+        WHERE id = #{oldChartId}
     </insert>
 
     <select id="searchAdviceSceneId" resultType="String">
-        SELECT DISTINCT
-            ( scene_id )
-        FROM
-            ( SELECT GET_V_AUTH_MODEL_ID_P_USE ( #{userId}, 'chart' ) cids ) t,
+        SELECT DISTINCT (scene_id)
+        FROM (SELECT GET_V_AUTH_MODEL_ID_P_USE(#{userId}, 'chart') cids) t,
              panel_view
                  LEFT JOIN chart_view ON panel_view.chart_view_id = chart_view.id
                  LEFT JOIN chart_group ON chart_view.scene_id = chart_group.id
-        WHERE
-            FIND_IN_SET( chart_view.scene_id, cids )  and panel_view.panel_id =#{panelId}
-        ORDER BY
-            chart_group.create_time DESC
-            LIMIT 1
+        WHERE FIND_IN_SET(chart_view.scene_id, cids)
+          and panel_view.panel_id = #{panelId}
+        ORDER BY chart_group.create_time DESC LIMIT 1
     </select>
 
     <select id="checkSameDataSet" resultType="int">
-       select count(DISTINCT table_id)  from chart_view where id = #{viewIdSource} or id = #{viewIdTarget}
+        select count(DISTINCT table_id)
+        from chart_view
+        where id = #{viewIdSource}
+           or id = #{viewIdTarget}
     </select>
 
-    <insert id ='chartCopyWithPanel'>
-        INSERT INTO chart_view (
-            id,
+    <insert id='chartCopyWithPanel'>
+        INSERT INTO chart_view (id,
                                 `name`,
                                 title,
                                 scene_id,
@@ -187,9 +183,8 @@
                                 custom_style,
                                 custom_filter,
                                 drill_fields,
-            SNAPSHOT
-            ) SELECT
-            pv_copy.chart_view_id AS id,
+                                SNAPSHOT)
+        SELECT pv_copy.chart_view_id AS id,
                `name`,
                title,
                pv_copy.panel_id      AS scene_id,
@@ -215,25 +210,55 @@
                custom_filter,
                drill_fields,
                SNAPSHOT
-        FROM
-            (
-            SELECT
-                panel_id,
+        FROM (
+                 SELECT panel_id,
                         copy_from_view,
                         chart_view_id
-            FROM
-                panel_view
-            WHERE
-                copy_id = #{copyId}
+                 FROM panel_view
+                 WHERE copy_id = #{copyId}
              ) pv_copy
                  LEFT JOIN chart_view ON chart_view.id = pv_copy.copy_from_view
     </insert>
 
     <delete id="deleteCircleView">
-        delete chart_view from (select GET_CHART_GROUP_WITH_CHILDREN(#{pid}) cids) t,chart_view where FIND_IN_SET(chart_view.id,cids) and chart_type='public'
+        delete
+        chart_view from (select GET_CHART_GROUP_WITH_CHILDREN(
+        #{pid}
+        )
+        cids
+        )
+        t,
+        chart_view
+        where
+        FIND_IN_SET
+        (
+        chart_view
+        .
+        id,
+        cids
+        )
+        and
+        chart_type
+        =
+        'public'
     </delete>
 
     <delete id="deleteCircleGroup">
-        delete chart_group from (select GET_CHART_GROUP_WITH_CHILDREN(#{pid}) cids) t,chart_group where FIND_IN_SET(chart_group.id,cids)
+        delete
+        chart_group from (select GET_CHART_GROUP_WITH_CHILDREN(
+        #{pid}
+        )
+        cids
+        )
+        t,
+        chart_group
+        where
+        FIND_IN_SET
+        (
+        chart_group
+        .
+        id,
+        cids
+        )
     </delete>
 </mapper>

backend/src/main/resources/db/migration/V33__1.9.sql

+ALTER TABLE `chart_view` ADD COLUMN `senior` LONGTEXT COMMENT '高级' AFTER `drill_fields`;
+UPDATE `chart_view` SET `senior` = '{}';

backend/src/main/resources/generatorConfig.xml

@@ -60,8 +60,8 @@
         </javaClientGenerator>
 
         <!--要生成的数据库表 -->
-        <table tableName="dataease_code_version"/>
-<!--        <table tableName="chart_view"/>-->
+<!--        <table tableName="dataease_code_version"/>-->
+        <table tableName="chart_view"/>
 <!--        <table tableName="panel_view"/>-->
 <!--        <table tableName="panel_link_jump"/>-->
 <!--        <table tableName="panel_link_jump_info"/>-->

frontend/src/lang/en.js

@@ -1029,7 +1029,17 @@ export default {
     table_item_align: 'Body Align',
     table_align_left: 'Left',
     table_align_center: 'Center',
-    table_align_right: 'Right'
+    table_align_right: 'Right',
+    senior: 'Senior',
+    senior_cfg: 'Senior Config',
+    function_cfg: 'Function Config',
+    analyse_cfg: 'Analyse',
+    slider: 'Slider',
+    slider_range: 'Range',
+    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'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -1029,7 +1029,17 @@ export default {
     table_item_align: '表格對齊方式',
     table_align_left: '左對齊',
     table_align_center: '居中',
-    table_align_right: '右對齊'
+    table_align_right: '右對齊',
+    senior: '高級',
+    senior_cfg: '高級設置',
+    function_cfg: '功能設置',
+    analyse_cfg: '分析預警',
+    slider: '縮略軸',
+    slider_range: '默認範圍',
+    chart_no_senior: '當前圖表類型暫無高級配置，敬請期待',
+    assist_line: '輔助線',
+    field_fixed: '固定值',
+    line_type_dotted: '點'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -1032,7 +1032,17 @@ export default {
     table_item_align: '表格对齐方式',
     table_align_left: '左对齐',
     table_align_center: '居中',
-    table_align_right: '右对齐'
+    table_align_right: '右对齐',
+    senior: '高级',
+    senior_cfg: '高级设置',
+    function_cfg: '功能设置',
+    analyse_cfg: '分析预警',
+    slider: '缩略轴',
+    slider_range: '默认范围',
+    chart_no_senior: '当前图表类型暂无高级配置，敬请期待',
+    assist_line: '辅助线',
+    field_fixed: '固定值',
+    line_type_dotted: '点'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

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

 import { Column, Bar } from '@antv/g2plot'
-import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
+import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding, getSlider } from '@/views/chart/chart/common/common_antv'
 
 export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
   // theme
@@ -13,6 +13,8 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
   const yAxis = getYAxis(chart)
   // data
   const data = chart.data.datas
+  // config
+  const slider = getSlider(chart)
   // options
   const options = {
     theme: theme,
@@ -26,6 +28,7 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
     legend: legend,
     xAxis: xAxis,
     yAxis: yAxis,
+    slider: slider,
     interactions: [
       {
         type: 'element-active', cfg: {
@@ -108,6 +111,8 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
   const yAxis = getYAxis(chart)
   // data
   const data = chart.data.datas
+  // config
+  const slider = getSlider(chart)
   // options
   const options = {
     theme: theme,
@@ -121,6 +126,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
     legend: legend,
     xAxis: xAxis,
     yAxis: yAxis,
+    slider: slider,
     interactions: [
       {
         type: 'element-active', cfg: {

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

@@ -240,6 +240,10 @@ export const DEFAULT_SPLIT = {
     show: true
   }
 }
+export const DEFAULT_FUNCTION_CFG = {
+  sliderShow: false,
+  sliderRange: [0, 10]
+}
 // chart config
 export const BASE_BAR = {
   title: {

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

@@ -435,3 +435,20 @@ function transAxisPosition(chart, axis) {
     return axis.position
   }
 }
+
+export function getSlider(chart) {
+  let senior = {}
+  let cfg = false
+  if (chart.senior) {
+    senior = JSON.parse(chart.senior)
+    if (senior.functionCfg) {
+      if (senior.functionCfg.sliderShow) {
+        cfg = {
+          start: parseInt(senior.functionCfg.sliderRange[0]) / 100,
+          end: parseInt(senior.functionCfg.sliderRange[1]) / 100
+        }
+      }
+    }
+  }
+  return cfg
+}

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

 import { Line, Area } from '@antv/g2plot'
-import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
+import {
+  getTheme,
+  getLabel,
+  getTooltip,
+  getLegend,
+  getXAxis,
+  getYAxis,
+  getPadding,
+  getSlider
+} from '@/views/chart/chart/common/common_antv'
 
 export function baseLineOptionAntV(plot, container, chart, action) {
   // theme
@@ -13,6 +22,8 @@ export function baseLineOptionAntV(plot, container, chart, action) {
   const yAxis = getYAxis(chart)
   // data
   const data = chart.data.datas
+  // config
+  const slider = getSlider(chart)
   // options
   const options = {
     point: {},
@@ -27,6 +38,7 @@ export function baseLineOptionAntV(plot, container, chart, action) {
     legend: legend,
     xAxis: xAxis,
     yAxis: yAxis,
+    slider: slider,
     interactions: [
       {
         type: 'element-active', cfg: {
@@ -100,6 +112,8 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
   const yAxis = getYAxis(chart)
   // data
   const data = chart.data.datas
+  // config
+  const slider = getSlider(chart)
   // options
   const options = {
     point: {},
@@ -114,6 +128,7 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
     legend: legend,
     xAxis: xAxis,
     yAxis: yAxis,
+    slider: slider,
     interactions: [
       {
         type: 'element-active', cfg: {

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

-import { getTheme, getLabel, getTooltip, getLegend, getXAxis, getYAxis, getPadding } from '@/views/chart/chart/common/common_antv'
+import {
+  getTheme,
+  getLabel,
+  getTooltip,
+  getLegend,
+  getXAxis,
+  getYAxis,
+  getPadding,
+  getSlider
+} from '@/views/chart/chart/common/common_antv'
 
 import { Scatter } from '@antv/g2plot'
 
@@ -14,6 +23,8 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
   const yAxis = getYAxis(chart)
   // data
   const data = chart.data.datas
+  // config
+  const slider = getSlider(chart)
   // options
   const options = {
     theme: theme,
@@ -27,6 +38,7 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
     legend: legend,
     xAxis: xAxis,
     yAxis: yAxis,
+    slider: slider,
     pieStyle: {
       lineWidth: 0
     },

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

+<template>
+  <div style="width: 100%;padding: 0 18px;">
+    <el-col>
+      <el-button
+        :title="$t('chart.edit')"
+        icon="el-icon-edit"
+        type="text"
+        size="small"
+        style="width: 24px;margin-left: 4px;"
+        @click="editLine"
+      />
+      <el-col>
+        <el-row v-for="(item,index) in assistLine" :key="index" class="line-style">
+          <el-col :span="8">
+            <span :title="item.name">{{ item.name }}</span>
+          </el-col>
+          <el-col :span="8">
+            <span v-if="item.field === '0'" :title="$t('chart.field_fixed')">{{ $t('chart.field_fixed') }}</span>
+          </el-col>
+          <el-col :span="8">
+            <span :title="item.value">{{ item.value }}</span>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-col>
+
+    <!--编辑辅助线-->
+    <el-dialog
+      v-if="editLineDialog"
+      v-dialogDrag
+      :title="$t('chart.assist_line')"
+      :visible="editLineDialog"
+      :show-close="false"
+      width="70%"
+      class="dialog-css"
+    >
+      <assist-line-edit :line="assistLine" @onAssistLineChange="lineChange" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeEditLine">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="changeLine">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import AssistLineEdit from '@/views/chart/components/senior/dialog/AssistLineEdit'
+export default {
+  name: 'AssistLine',
+  components: { AssistLineEdit },
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      assistLine: [],
+      editLineDialog: false,
+      lineArr: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.senior) {
+        let senior = null
+        if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
+          senior = JSON.parse(JSON.stringify(chart.senior))
+        } else {
+          senior = JSON.parse(chart.senior)
+        }
+        if (senior.assistLine) {
+          this.assistLine = senior.assistLine
+        } else {
+          this.assistLine = []
+        }
+      }
+    },
+    changeAssistLine() {
+      this.$emit('onAssistLineChange', this.assistLine)
+    },
+    lineChange(val) {
+      this.lineArr = val
+    },
+
+    editLine() {
+      this.editLineDialog = true
+    },
+    closeEditLine() {
+      this.editLineDialog = false
+    },
+    changeLine() {
+      this.assistLine = JSON.parse(JSON.stringify(this.lineArr))
+      this.changeAssistLine()
+      this.closeEditLine()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+span{
+  font-size: 12px
+}
+.el-form-item{
+  margin-bottom: 6px;
+}
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+
+.line-style{
+
+}
+.line-style >>> span{
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0 10px;
+}
+
+.dialog-css >>> .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css >>> .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css >>> .el-dialog__body {
+  padding: 10px 20px 20px;
+}
+</style>

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

+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="functionForm" :model="functionForm" label-width="80px" size="mini">
+        <el-form-item :label="$t('chart.slider')" class="form-item">
+          <el-checkbox v-model="functionForm.sliderShow" @change="changeFunctionCfg">{{ $t('chart.show') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_range')+'(%)'" class="form-item form-item-slider">
+          <el-slider v-model="functionForm.sliderRange" :min="0" :max="100" input-size="mini" range @change="changeFunctionCfg" />
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_FUNCTION_CFG } from '../../chart/chart'
+
+export default {
+  name: 'FunctionCfg',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      functionForm: JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG))
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.senior) {
+        let senior = null
+        if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
+          senior = JSON.parse(JSON.stringify(chart.senior))
+        } else {
+          senior = JSON.parse(chart.senior)
+        }
+        if (senior.functionCfg) {
+          this.functionForm = senior.functionCfg
+        } else {
+          this.functionForm = JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG))
+        }
+      }
+    },
+    changeFunctionCfg() {
+      this.$emit('onFunctionCfgChange', this.functionForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+span{
+  font-size: 12px
+}
+.el-form-item{
+  margin-bottom: 6px;
+}
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>

frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue

+<template>
+  <el-col>
+    <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addLine" />
+    <div style="max-height: 50vh;overflow-y: auto;">
+      <el-row v-for="(item,index) in lineArr" :key="index" class="line-item">
+        <el-col :span="6">
+          <el-input v-model="item.name" class="value-item" :placeholder="$t('chart.name')" size="mini" clearable @change="changeAssistLine" />
+        </el-col>
+        <el-col :span="4">
+          <el-select v-model="item.field" size="mini" class="select-item" @change="changeAssistLine">
+            <el-option
+              v-for="opt in fieldOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeAssistLine" />
+        </el-col>
+        <el-col :span="4">
+          <el-select v-model="item.lineType" size="mini" class="select-item" @change="changeAssistLine">
+            <el-option
+              v-for="opt in lineOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="2" style="text-align: center;">
+          <el-color-picker v-model="item.color" class="color-picker-style" :predefine="predefineColors" @change="changeAssistLine" />
+        </el-col>
+        <el-col :span="2">
+          <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeLine(index)" />
+        </el-col>
+      </el-row>
+    </div>
+  </el-col>
+</template>
+
+<script>
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
+
+export default {
+  name: 'AssistLineEdit',
+  props: {
+    line: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      lineArr: [],
+      lineObj: {
+        name: '辅助线',
+        field: '0', // 固定值
+        axis: 'y', // 主轴
+        value: 0,
+        lineType: 'solid',
+        color: '#ff0000'
+      },
+      fieldOptions: [
+        { label: this.$t('chart.field_fixed'), value: '0' }
+      ],
+      lineOptions: [
+        { label: this.$t('chart.line_type_solid'), value: 'solid' },
+        { label: this.$t('chart.line_type_dashed'), value: 'dashed' },
+        { label: this.$t('chart.line_type_dotted'), value: 'dotted' }
+      ],
+      predefineColors: COLOR_PANEL
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.lineArr = JSON.parse(JSON.stringify(this.line))
+    },
+    addLine() {
+      this.lineArr.push(this.lineObj)
+      this.changeAssistLine()
+    },
+    removeLine(index) {
+      this.lineArr.splice(index, 1)
+      this.changeAssistLine()
+    },
+
+    changeAssistLine() {
+      this.$emit('onAssistLineChange', this.lineArr)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line-item {
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  padding: 4px 14px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.form-item >>> .el-form-item__label {
+  font-size: 12px;
+}
+
+span {
+  font-size: 12px;
+}
+
+.value-item {
+  position: relative;
+  display: inline-block;
+  width: 120px !important;
+}
+
+.select-item {
+  position: relative;
+  display: inline-block;
+  width: 100px !important;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+  font-size: 12px;
+}
+
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+  width: 28px;
+  height: 28px;
+  margin-top: 6px;
+}
+
+.color-picker-style >>> .el-color-picker__trigger{
+  width: 28px;
+  height: 28px;
+}
+</style>

frontend/src/views/chart/group/Group.vue

@@ -308,7 +308,8 @@ import {
   DEFAULT_YAXIS_STYLE,
   DEFAULT_YAXIS_EXT_STYLE,
   DEFAULT_BACKGROUND_COLOR,
-  DEFAULT_SPLIT
+  DEFAULT_SPLIT,
+  DEFAULT_FUNCTION_CFG
 } from '../chart/chart'
 
 export default {
@@ -764,6 +765,10 @@ export default {
         background: DEFAULT_BACKGROUND_COLOR,
         split: DEFAULT_SPLIT
       })
+      view.senior = JSON.stringify({
+        functionCfg: DEFAULT_FUNCTION_CFG,
+        assistLine: []
+      })
       view.stylePriority = 'view' // 默认样式优先级视图
       view.xaxis = JSON.stringify([])
       view.xaxisExt = JSON.stringify([])

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

@@ -810,6 +810,35 @@
             </div>
           </el-row>
         </el-tab-pane>
+        <el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 360px;">
+          <el-row class="view-panel">
+            <div
+              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix'))"
+              style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
+              class="attr-style theme-border-class"
+            >
+              <el-row>
+                <span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
+                <el-collapse v-model="attrActiveNames" class="style-collapse">
+                  <el-collapse-item name="function" :title="$t('chart.function_cfg')">
+                    <function-cfg :param="param" class="attr-selector" :chart="chart" @onFunctionCfgChange="onFunctionCfgChange" />
+                  </el-collapse-item>
+                </el-collapse>
+              </el-row>
+              <el-row>
+                <span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
+                <el-collapse v-model="styleActiveNames" class="style-collapse">
+                  <el-collapse-item name="analyse" :title="$t('chart.assist_line')">
+                    <assist-line :param="param" class="attr-selector" :chart="chart" @onAssistLineChange="onAssistLineChange" />
+                  </el-collapse-item>
+                </el-collapse>
+              </el-row>
+            </div>
+            <div v-else class="no-senior">
+              {{ $t('chart.chart_no_senior') }}
+            </div>
+          </el-row>
+        </el-tab-pane>
       </el-tabs>
 
       <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
@@ -1006,6 +1035,7 @@ import DatasetChartDetail from '../../dataset/common/DatasetChartDetail'
 import {
   DEFAULT_BACKGROUND_COLOR,
   DEFAULT_COLOR_CASE,
+  DEFAULT_FUNCTION_CFG,
   DEFAULT_LABEL,
   DEFAULT_LEGEND_STYLE,
   DEFAULT_SIZE,
@@ -1052,9 +1082,13 @@ import { compareItem } from '@/views/chart/chart/compare'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
 import PluginCom from '@/views/system/plugin/PluginCom'
+import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
+import AssistLine from '@/views/chart/components/senior/AssistLine'
 export default {
   name: 'ChartEdit',
   components: {
+    AssistLine,
+    FunctionCfg,
     DimensionExtItem,
     ChartComponentS2,
     CompareEdit,
@@ -1138,6 +1172,10 @@ export default {
           background: DEFAULT_BACKGROUND_COLOR,
           split: DEFAULT_SPLIT
         },
+        senior: {
+          functionCfg: DEFAULT_FUNCTION_CFG,
+          assistLine: []
+        },
         customFilter: [],
         render: 'antv',
         isPlugin: false
@@ -1446,6 +1484,7 @@ export default {
       view.extStack = JSON.stringify(view.extStack)
       view.drillFields = JSON.stringify(view.drillFields)
       view.extBubble = JSON.stringify(view.extBubble)
+      view.senior = JSON.stringify(view.senior)
       delete view.data
       return view
     },
@@ -1471,6 +1510,7 @@ export default {
         this.view.customAttr = view.customAttr ? JSON.parse(view.customAttr) : {}
         this.view.customStyle = view.customStyle ? JSON.parse(view.customStyle) : {}
         this.view.customFilter = view.customFilter ? JSON.parse(view.customFilter) : {}
+        this.view.senior = view.senior ? JSON.parse(view.senior) : {}
         // 将视图传入echart组件
         this.chart = response.data
         this.data = response.data.data
@@ -1505,6 +1545,7 @@ export default {
       view.customAttr = JSON.stringify(this.view.customAttr)
       view.customStyle = JSON.stringify(this.view.customStyle)
       view.customFilter = JSON.stringify(this.view.customFilter)
+      view.senior = JSON.stringify(this.view.senior)
       view.data = this.data
       this.chart = view
     },
@@ -1556,6 +1597,7 @@ export default {
           this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
           this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
           this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
+          this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}
           // 将视图传入echart组件
           this.chart = response.data
           this.data = response.data.data
@@ -1600,6 +1642,7 @@ export default {
           this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
           this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
           this.view.customFilter = this.view.customFilter ? JSON.parse(this.view.customFilter) : {}
+          this.view.senior = this.view.senior ? JSON.parse(this.view.senior) : {}
 
           // 将视图传入echart组件
           this.chart = response.data
@@ -1703,6 +1746,16 @@ export default {
       this.calcStyle()
     },
 
+    onFunctionCfgChange(val) {
+      this.view.senior.functionCfg = val
+      this.calcStyle()
+    },
+
+    onAssistLineChange(val) {
+      this.view.senior.assistLine = val
+      this.calcStyle()
+    },
+
     showDimensionEditFilter(item) {
       this.dimensionItem = JSON.parse(JSON.stringify(item))
       this.dimensionFilterEdit = true
@@ -2379,7 +2432,7 @@ export default {
 
   .tab-header > > > .el-tabs__item {
     font-size: 12px;
-    padding: 0 60px!important;
+    padding: 0 40px!important;
   }
 
   .blackTheme .tab-header > > > .el-tabs__item {
@@ -2576,4 +2629,11 @@ export default {
     margin-left: 4px;
   }
 
+  .no-senior {
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+    margin-top: 40px;
+  }
+
 </style>