Merge pull request #11516 from dataease/pr@dev-v2@feat_border-re

feat(仪表板、数据大屏): 支持传统边框

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -202,6 +202,18 @@ const height = ref(0)
 const isShowArea = ref(false)
 const svgFilterAttrs = ['width', 'height', 'top', 'left', 'rotate', 'backgroundColor']
 const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
+const commonFilterAttrsFilterBorder = [
+  'width',
+  'height',
+  'top',
+  'left',
+  'rotate',
+  'borderActive',
+  'borderWidth',
+  'borderRadius',
+  'borderStyle',
+  'borderColor'
+]
 const userViewEnlargeRef = ref(null)
 const customDatasetParamsRef = ref(null)
 const linkJumpRef = ref(null)
@@ -515,7 +527,7 @@ const handleContextMenu = e => {
 }
 
 const getComponentStyle = style => {
-  return getStyle(style, commonFilterAttrs)
+  return getStyle(style, style.borderActive ? commonFilterAttrs : commonFilterAttrsFilterBorder)
 }
 
 const getSvgComponentStyle = style => {

core/core-frontend/src/custom-component/common/CommonAttr.vue

@@ -97,7 +97,7 @@ const colorPickerWidth = computed(() => {
 })
 
 const borderSettingShow = computed(() => {
-  return !!element.value.style['borderActive']
+  return !!element.value.style['borderStyle']
 })
 
 // 暂时关闭
@@ -186,14 +186,14 @@ const stopEvent = e => {
       </el-collapse-item>
       <collapse-switch-item
         v-if="element && borderSettingShow"
-        v-model="element.value.style.borderActive"
+        v-model="element.style.borderActive"
         :themes="themes"
         title="边框"
         name="borderSetting"
         class="common-style-area"
       >
         <common-border-setting
-          :element="element"
+          :style-info="element.style"
           :themes="themes"
           @onStyleAttrChange="onStyleAttrChange"
         ></common-border-setting>

core/core-frontend/src/custom-component/common/CommonBorderSetting.vue

@@ -13,14 +13,14 @@ const { canvasStyleData } = storeToRefs(dvMainStore)
 const props = withDefaults(
   defineProps<{
     themes?: EditorTheme
-    element: any
+    styleInfo: any
   }>(),
   {
     themes: 'dark'
   }
 )
 const emits = defineEmits(['onStyleAttrChange'])
-const { themes, element } = toRefs(props)
+const { themes, styleInfo } = toRefs(props)
 const state = reactive({
   fontSize: [],
   isSetting: false,
@@ -38,16 +38,16 @@ const borderStyleList = [
 ]
 
 const styleInit = () => {
-  if (element.value) {
+  if (styleInfo.value) {
     Object.keys(styleMounted.value).forEach(key => {
       styleMounted.value[key] = Math.round(
-        (element.value.style[key] * 100) / canvasStyleData.value.scale
+        (styleInfo.value[key] * 100) / canvasStyleData.value.scale
       )
     })
   }
 }
 
-const styleForm = computed<any>(() => element.value.style)
+const styleForm = computed<any>(() => styleInfo.value)
 
 const changeStyle = params => {
   snapshotStore.recordSnapshotCache()
@@ -55,18 +55,16 @@ const changeStyle = params => {
 }
 
 const changeStylePre = key => {
-  changeStyle({ key: key, value: element.value.style[key] })
+  changeStyle({ key: key, value: styleInfo.value[key] })
 }
 
 const sizeChange = key => {
-  element.value.style[key] = Math.round(
+  styleInfo.value[key] = (styleMounted.value[key] * canvasStyleData.value.scale) / 100
-    (styleMounted.value[key] * canvasStyleData.value.scale) / 100
+  changeStyle({ key: key, value: styleInfo.value[key] })
-  )
-  changeStyle({ key: key, value: element.value.style[key] })
 }
 
 watch(
-  () => element.value,
+  () => styleInfo.value,
   () => {
     styleInit()
   },
@@ -80,52 +78,85 @@ watch(
 <template>
   <el-row class="custom-row">
     <el-form label-position="top">
-      <el-form-item label="颜色" class="form-item" :class="'form-item-' + themes">
+      <el-row style="display: flex">
-        <el-color-picker
+        <el-form-item
-          title="颜色"
+          style="width: 70px"
-          v-model="styleForm.borderColor"
+          label="颜色"
-          class="color-picker-style"
+          class="form-item"
-          :triggerWidth="50"
+          :class="'form-item-' + themes"
-          is-custom
-          :predefine="state.predefineColors"
-          @change="changeStylePre('borderColor')"
         >
-        </el-color-picker>
+          <el-color-picker
-      </el-form-item>
+            title="颜色"
-      <el-form-item label="圆角" class="form-item" :class="'form-item-' + themes">
+            v-model="styleForm.borderColor"
-        <el-input-number
+            class="color-picker-style"
-          title="圆角"
+            :triggerWidth="65"
-          v-model="styleForm.borderRadio"
+            is-custom
-          class="color-picker-style"
+            :predefine="state.predefineColors"
-          @change="sizeChange('borderWidth')"
+            @change="changeStylePre('borderColor')"
+          >
+          </el-color-picker>
+        </el-form-item>
+        <el-form-item
+          style="width: 150px"
+          label="圆角"
+          class="form-item"
+          :class="'form-item-' + themes"
         >
-        </el-input-number>
+          <el-input-number
-      </el-form-item>
+            title="圆角"
-      <el-form-item label="样式" class="form-item" :class="'form-item-' + themes">
+            :effect="themes"
-        <el-select
+            :min="0"
-          :effect="themes"
+            :max="200"
-          v-model="styleForm.borderStyle"
+            controls-position="right"
-          size="small"
+            v-model="styleMounted.borderRadius"
-          @change="changeStylePre('borderStyle')"
+            class="color-picker-style"
+            @change="sizeChange('borderRadius')"
+          >
+          </el-input-number>
+        </el-form-item>
+      </el-row>
+      <el-row style="display: flex">
+        <el-form-item
+          style="width: 70px"
+          label="样式"
+          class="form-item"
+          :class="'form-item-' + themes"
         >
-          <el-option
+          <el-select
-            class="custom-style-option"
+            :effect="themes"
-            v-for="option in borderStyleList"
+            v-model="styleForm.borderStyle"
-            :key="option.value"
+            size="small"
-            :label="option.name"
+            style="width: 65px"
-            :value="option.value"
+            @change="changeStylePre('borderStyle')"
-          />
+          >
-        </el-select>
+            <el-option
-      </el-form-item>
+              class="custom-style-option"
-      <el-form-item label="线宽" class="form-item" :class="'form-item-' + themes">
+              v-for="option in borderStyleList"
-        <el-input-number
+              :key="option.value"
-          title="线宽"
+              :label="option.name"
-          v-model="styleForm.borderWidth"
+              :value="option.value"
-          class="color-picker-style"
+            />
-          @change="sizeChange('borderWidth')"
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          style="width: 150px"
+          label="线宽"
+          class="form-item"
+          :class="'form-item-' + themes"
         >
-        </el-input-number>
+          <el-input-number
-      </el-form-item>
+            title="线宽"
+            :min="0"
+            :max="50"
+            :effect="themes"
+            controls-position="right"
+            v-model="styleMounted.borderWidth"
+            class="color-picker-style"
+            @change="sizeChange('borderWidth')"
+          >
+          </el-input-number>
+        </el-form-item>
+      </el-row>
     </el-form>
   </el-row>
 </template>

core/core-frontend/src/custom-component/common/CommonStyleSet.vue

@@ -350,7 +350,6 @@ const state = reactive({
 
 const styleColorKeyArray = [
   { value: 'color', label: '颜色', width: 90, icon: 'dv-style-color' },
-  { value: 'borderColor', label: '边框颜色', width: 90, icon: 'dv-style-borderColor' },
   {
     value: 'headFontColor',
     label: '头部字体颜色',
@@ -388,34 +387,6 @@ const fontSizeList = computed(() => {
   return arr
 })
 
-const borderWidthList = computed(() => {
-  const arr = []
-  for (let i = 0; i <= 20; i = i + 1) {
-    arr.push({
-      name: i + '',
-      value: i
-    })
-  }
-  return arr
-})
-
-const borderRadiusList = computed(() => {
-  const arr = []
-  for (let i = 0; i <= 50; i = i + 1) {
-    arr.push({
-      name: i + '',
-      value: i
-    })
-  }
-  return arr
-})
-
-const borderStyleList = [
-  { name: '实线', value: 'solid' },
-  { name: '虚线', value: 'dashed' },
-  { name: '点线', value: 'dotted' }
-]
-
 const styleOptionKeyArrayPre = [
   {
     value: 'fontFamily',
@@ -466,27 +437,6 @@ const styleOptionKeyArray = [
     customOption: opacitySizeList,
     width: '90px',
     icon: 'dv-style-opacity'
-  },
-  {
-    value: 'borderWidth',
-    label: '边框宽度',
-    customOption: borderWidthList.value,
-    width: '90px',
-    icon: 'dv-style-borderSize'
-  },
-  {
-    value: 'borderRadius',
-    label: '圆角',
-    customOption: borderRadiusList.value,
-    width: '90px',
-    icon: 'dv-style-borderRadius'
-  },
-  {
-    value: 'borderStyle',
-    label: '边框样式',
-    customOption: borderStyleList,
-    width: '90px',
-    icon: 'dv-style-borderStyle'
   }
 ]
 

core/core-frontend/src/models/chart/editor.d.ts

@@ -1,5 +1,6 @@
 declare type EditorProperty =
   | 'background-overall-component'
+  | 'border-style'
   | 'basic-style-selector'
   | 'dual-basic-style-selector'
   | 'label-selector'

core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue

@@ -27,6 +27,7 @@ import QuadrantSelector from '@/views/chart/components/editor/editor-style/compo
 import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/components/FlowMapLineSelector.vue'
 import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'
 import CommonEvent from '@/custom-component/common/CommonEvent.vue'
+import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo, batchOptStatus } = storeToRefs(dvMainStore)
@@ -43,6 +44,10 @@ const props = defineProps({
     type: Object,
     required: false
   },
+  commonBorderPop: {
+    type: Object,
+    required: false
+  },
   eventInfo: {
     type: Object,
     required: false
@@ -90,8 +95,15 @@ const props = defineProps({
   }
 })
 
-const { chart, themes, properties, propertyInnerAll, commonBackgroundPop, selectorSpec } =
+const {
-  toRefs(props)
+  chart,
+  themes,
+  properties,
+  propertyInnerAll,
+  commonBackgroundPop,
+  commonBorderPop,
+  selectorSpec
+} = toRefs(props)
 const emit = defineEmits([
   'onColorChange',
   'onMiscChange',
@@ -104,6 +116,7 @@ const emit = defineEmits([
   'onLegendChange',
   'onBasicStyleChange',
   'onBackgroundChange',
+  'onStyleAttrChange',
   'onTableHeaderChange',
   'onTableCellChange',
   'onTableTotalChange',
@@ -192,6 +205,10 @@ const onBackgroundChange = (val, prop) => {
   state.initReady && emit('onBackgroundChange', val, prop)
 }
 
+const onStyleAttrChange = ({ key, value }) => {
+  state.initReady && emit('onStyleAttrChange', { custom: 'style', property: key, value: value })
+}
+
 const onTableHeaderChange = (val, prop) => {
   emit('onTableHeaderChange', val, prop)
 }
@@ -318,6 +335,20 @@ watch(
               component-position="component"
             />
           </el-collapse-item>
+          <collapse-switch-item
+            v-if="showProperties('border-style') && commonBorderPop"
+            v-model="commonBorderPop.borderActive"
+            :themes="themes"
+            title="边框"
+            name="borderSetting"
+            class="common-style-area"
+          >
+            <common-border-setting
+              :style-info="commonBorderPop"
+              :themes="themes"
+              @onStyleAttrChange="onStyleAttrChange"
+            ></common-border-setting>
+          </collapse-switch-item>
           <el-collapse-item :effect="themes" name="events" title="事件" v-if="eventsShow">
             <common-event :themes="themes" :events-info="eventInfo"></common-event>
           </el-collapse-item>

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -1053,6 +1053,10 @@ const onBackgroundChange = val => {
   curComponent.value.commonBackground = val
 }
 
+const onStyleAttrChange = val => {
+  curComponent.value.style[val.property] = val.value
+}
+
 const onAssistLineChange = val => {
   view.value.senior.assistLineCfg = val.data
   if (val.requestData) {
@@ -2776,6 +2780,7 @@ const deleteChartFieldItem = id => {
                         :property-inner-all="chartViewInstance.propertyInner"
                         :selector-spec="chartViewInstance.selectorSpec"
                         :common-background-pop="curComponent?.commonBackground"
+                        :common-border-pop="curComponent?.style"
                         :event-info="curComponent?.events"
                         :chart="view"
                         :themes="themes"
@@ -2794,6 +2799,7 @@ const deleteChartFieldItem = id => {
                         @onIndicatorNameChange="onIndicatorNameChange"
                         @onLegendChange="onLegendChange"
                         @onBackgroundChange="onBackgroundChange"
+                        @onStyleAttrChange="onStyleAttrChange"
                         @onBasicStyleChange="onBasicStyleChange"
                         @onTableHeaderChange="onTableHeaderChange"
                         @onTableCellChange="onTableCellChange"

core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts

@@ -49,6 +49,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
   axis: AxisType[] = ['xAxis', 'yAxis', 'yAxisExt', 'filter', 'drill', 'extLabel', 'extTooltip']
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'x-axis-selector',
     'dual-y-axis-selector',
@@ -62,6 +63,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView<
   ]
   propertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'gradient', 'layout'],
     'x-axis-selector': ['position', 'axisLabel', 'axisLine', 'splitLine'],
     'y-axis-selector': [

core/core-frontend/src/views/chart/components/js/panel/charts/bar/common.ts

@@ -1,5 +1,6 @@
 export const BAR_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'basic-style-selector',
   'label-selector',
   'tooltip-selector',
@@ -14,6 +15,7 @@ export const BAR_EDITOR_PROPERTY: EditorProperty[] = [
 ]
 export const BAR_RANGE_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'basic-style-selector',
   'label-selector',
   'tooltip-selector',
@@ -28,6 +30,7 @@ export const BAR_RANGE_EDITOR_PROPERTY: EditorProperty[] = [
 
 export const BAR_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
   'background-overall-component': ['all'],
+  'border-style': ['all'],
   'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar'],
   'label-selector': ['fontSize', 'color', 'labelFormatter'],
   'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show'],

core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts

@@ -34,6 +34,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
   }
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'label-selector',
     'tooltip-selector',
@@ -47,6 +48,7 @@ export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
     ...BAR_EDITOR_PROPERTY_INNER,
     'legend-selector': null,
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'gradient'],
     'label-selector': ['hPosition', 'color', 'fontSize'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],

core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts

@@ -11,6 +11,7 @@ import { isEmpty } from 'lodash-es'
 export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'label-selector',
     'tooltip-selector',
@@ -21,6 +22,7 @@ export class Waterfall extends G2PlotChartView<WaterfallOptions, G2Waterfall> {
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'gradient'],
     'label-selector': ['fontSize', 'color', 'vPosition', 'labelFormatter'],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],

core/core-frontend/src/views/chart/components/js/panel/charts/line/common.ts

@@ -1,5 +1,6 @@
 export const LINE_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'basic-style-selector',
   'x-axis-selector',
   'y-axis-selector',
@@ -14,6 +15,7 @@ export const LINE_EDITOR_PROPERTY: EditorProperty[] = [
 ]
 export const LINE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
   'background-overall-component': ['all'],
+  'border-style': ['all'],
   'label-selector': ['fontSize', 'color'],
   'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'],
   'basic-style-selector': [

core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts

@@ -17,6 +17,7 @@ const DEFAULT_DATA = []
 export class StockLine extends G2PlotChartView<MixOptions, Mix> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'x-axis-selector',
     'y-axis-selector',

core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts

@@ -16,6 +16,7 @@ const DEFAULT_LIQUID_DATA = []
 export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'label-selector',
     'misc-selector',
@@ -24,6 +25,7 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha'],
     'label-selector': ['fontSize', 'color', 'labelFormatter'],
     'misc-selector': ['liquidShape', 'liquidSize', 'liquidMaxType', 'liquidMaxField'],

core/core-frontend/src/views/chart/components/js/panel/charts/map/common.ts

@@ -1,5 +1,6 @@
 export const MAP_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'basic-style-selector',
   'title-selector',
   'label-selector',
@@ -12,6 +13,7 @@ export const MAP_EDITOR_PROPERTY: EditorProperty[] = [
 
 export const MAP_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
   'background-overall-component': ['all'],
+  'border-style': ['all'],
   'basic-style-selector': ['colors', 'alpha', 'areaBorderColor', 'zoom'],
   'title-selector': [
     'title',

core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts

@@ -21,6 +21,7 @@ const { t } = useI18n()
 export class FlowMap extends L7ChartView<Scene, L7Config> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'title-selector',
     'flow-map-line-selector',

core/core-frontend/src/views/chart/components/js/panel/charts/map/heat-map.ts

@@ -21,6 +21,7 @@ const { t } = useI18n()
 export class HeatMap extends L7ChartView<Scene, L7Config> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'title-selector'
   ]

core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts

@@ -22,6 +22,7 @@ const { t } = useI18n()
 export class SymbolicMap extends L7ChartView<Scene, L7Config> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'title-selector',
     'label-selector',

core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix-common.ts

@@ -2,6 +2,7 @@ import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
 
 export const CHART_MIX_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'dual-basic-style-selector',
   'x-axis-selector',
   'dual-y-axis-selector',
@@ -16,6 +17,7 @@ export const CHART_MIX_EDITOR_PROPERTY: EditorProperty[] = [
 ]
 export const CHART_MIX_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
   'background-overall-component': ['all'],
+  'border-style': ['all'],
   'label-selector': ['fontSize', 'color'],
   'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'],
   'dual-basic-style-selector': [

core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts

@@ -14,6 +14,7 @@ const { t } = useI18n()
 export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'label-selector',
     'tooltip-selector',
@@ -24,6 +25,7 @@ export class Funnel extends G2PlotChartView<FunnelOptions, G2Funnel> {
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'seriesColor'],
     'label-selector': ['fontSize', 'color', 'hPosition', 'showQuota', 'conversionTag'],
     'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'],

core/core-frontend/src/views/chart/components/js/panel/charts/others/gauge.ts

@@ -21,6 +21,7 @@ const DEFAULT_DATA = []
 export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'label-selector',
     'misc-selector',
@@ -29,6 +30,7 @@ export class Gauge extends G2PlotChartView<GaugeOptions, G2Gauge> {
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'gradient', 'gaugeAxisLine', 'gaugePercentLabel'],
     'label-selector': ['fontSize', 'color', 'labelFormatter'],
     'title-selector': [

core/core-frontend/src/views/chart/components/js/panel/charts/others/indicator.ts

@@ -8,6 +8,7 @@ const { t } = useI18n()
 export class IndicatorChartView extends AbstractChartView {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'title-selector',
     'indicator-value-selector',
     'indicator-name-selector',
@@ -16,6 +17,7 @@ export class IndicatorChartView extends AbstractChartView {
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'title-selector': [
       'title',
       'fontSize',

core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts

@@ -16,6 +16,7 @@ const { t } = useI18n()
 export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'x-axis-selector',
     'y-axis-selector',

core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts

@@ -13,6 +13,7 @@ const { t } = useI18n()
 export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'label-selector',
     'tooltip-selector',

core/core-frontend/src/views/chart/components/js/panel/charts/others/rich-text.ts

@@ -6,9 +6,10 @@ const { t } = useI18n()
  * 富文本图表
  */
 export class RichTextChartView extends AbstractChartView {
-  properties: EditorProperty[] = ['background-overall-component', 'threshold']
+  properties: EditorProperty[] = ['background-overall-component', 'border-style', 'threshold']
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     threshold: ['tableThreshold']
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter']

core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey-common.ts

@@ -1,5 +1,6 @@
 export const SANKEY_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'basic-style-selector',
   'label-selector',
   'tooltip-selector',
@@ -10,6 +11,7 @@ export const SANKEY_EDITOR_PROPERTY: EditorProperty[] = [
 
 export const SANKEY_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
   'background-overall-component': ['all'],
+  'border-style': ['all'],
   'basic-style-selector': ['colors', 'alpha', 'gradient'],
   'label-selector': ['fontSize', 'color', 'labelFormatter'],
   'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter'],

core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts

@@ -16,6 +16,7 @@ const { t } = useI18n()
 export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'x-axis-selector',
     'y-axis-selector',

core/core-frontend/src/views/chart/components/js/panel/charts/others/treemap.ts

@@ -16,6 +16,7 @@ const { t } = useI18n()
 export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
   properties: EditorProperty[] = [
     'background-overall-component',
+    'border-style',
     'basic-style-selector',
     'title-selector',
     'legend-selector',
@@ -26,6 +27,7 @@ export class Treemap extends G2PlotChartView<TreemapOptions, G2Treemap> {
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha', 'seriesColor'],
     'label-selector': ['fontSize', 'color', 'showDimension', 'showQuota', 'showProportion'],
     'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],

core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts

@@ -19,6 +19,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
   properties: EditorProperty[] = [
     'basic-style-selector',
     'background-overall-component',
+    'border-style',
     'title-selector',
     'tooltip-selector',
     'misc-selector',
@@ -27,6 +28,7 @@ export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
+    'border-style': ['all'],
     'basic-style-selector': ['colors', 'alpha'],
     'title-selector': [
       'title',

core/core-frontend/src/views/chart/components/js/panel/charts/pie/common.ts

@@ -4,6 +4,7 @@ const { t } = useI18n()
 
 export const PIE_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'basic-style-selector',
   'title-selector',
   'legend-selector',
@@ -14,6 +15,7 @@ export const PIE_EDITOR_PROPERTY: EditorProperty[] = [
 ]
 export const PIE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
   'background-overall-component': ['all'],
+  'border-style': ['all'],
   'label-selector': [
     'fontSize',
     'color',

core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts

@@ -1,5 +1,6 @@
 export const TABLE_EDITOR_PROPERTY: EditorProperty[] = [
   'background-overall-component',
+  'border-style',
   'basic-style-selector',
   'table-header-selector',
   'table-cell-selector',
@@ -12,6 +13,7 @@ export const TABLE_EDITOR_PROPERTY: EditorProperty[] = [
   'linkage'
 ]
 export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
+  'border-style': ['all'],
   'background-overall-component': ['all'],
   'basic-style-selector': ['tableColumnMode', 'tableBorderColor', 'tableScrollBarColor', 'alpha'],
   'table-header-selector': [

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts

@@ -14,6 +14,7 @@ const { t } = useI18n()
  */
 export class TablePivot extends S2ChartView<PivotSheet> {
   properties: EditorProperty[] = [
+    'border-style',
     'background-overall-component',
     'basic-style-selector',
     'table-header-selector',