feat(图表-K线图): 支持配置图例的文字样式，包括颜色及大小

core/core-frontend/src/views/chart/components/editor/drag-item/DragPlaceholder.vue

@@ -8,6 +8,10 @@ const props = defineProps({
     type: Array,
     required: true
   },
+  marginTop: {
+    type: String,
+    default: '0'
+  },
   themes: {
     type: String as PropType<EditorTheme>,
     default: 'dark'
@@ -17,7 +21,11 @@ const props = defineProps({
 
 <template>
   <div>
-    <div v-if="!props.dragList || props.dragList.length === 0" class="drag-placeholder-style">
+    <div
+      v-if="!props.dragList || props.dragList.length === 0"
+      :style="'margin-top:' + props.marginTop"
+      class="drag-placeholder-style"
+    >
       <span
         class="drag-placeholder-style-span"
         :class="{ 'drag-placeholder-style-span--dark': themes === 'dark' }"

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

@@ -2264,7 +2264,10 @@ const deleteChartFieldItem = id => {
                                 />
                               </template>
                             </draggable>
-                            <drag-placeholder :drag-list="view.yAxis" />
+                            <drag-placeholder
+                              :margin-top="view.type === 'stock-line' ? '9px' : '0'"
+                              :drag-list="view.yAxis"
+                            />
                           </div>
                         </el-row>
                         <!-- xAxisExtRight -->

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

@@ -8,6 +8,7 @@ import { LINE_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/ch
 import { useI18n } from '@/hooks/web/useI18n'
 import { valueFormatter } from '@/views/chart/components/js/formatter'
 import type { Options } from '@antv/g2plot/esm'
+import { MixOptions } from '@antv/g2plot'
 
 const { t } = useI18n()
 const DEFAULT_DATA = []
@@ -19,6 +20,7 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
     'background-overall-component',
     'border-style',
     'basic-style-selector',
+    'legend-selector',
     'x-axis-selector',
     'y-axis-selector',
     'title-selector',
@@ -39,7 +41,8 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
       'axisLine',
       'splitLine',
       'axisLabelFormatter'
-    ]
+    ],
+    'legend-selector': ['fontSize', 'color', 'show']
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'extLabel', 'extTooltip']
   axisConfig = {
@@ -244,8 +247,8 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
               ['L', x - width - 1 / 2, y + height / 2],
               ['Z'],
               // 中线
-              ['M', x, y + width + 2],
-              ['L', x, x - width - 1]
+              ['M', x, y + 10 / 2],
+              ['L', x, y - 10 / 2]
             ]
           },
           style: { fill: 'red', stroke: 'red', lineWidth: 2 }
@@ -613,6 +616,41 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
     }
     return options
   }
+  protected configLegend(chart: Chart, options: MixOptions): MixOptions {
+    let legend = {}
+    let customStyle: CustomStyle
+    const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
+    if (chart.customStyle) {
+      customStyle = parseJson(chart.customStyle)
+      // legend
+      if (customStyle.legend) {
+        const l = JSON.parse(JSON.stringify(customStyle.legend))
+        if (l.show) {
+          legend = {
+            ...stockPlot.options.legend,
+            itemName: {
+              style: {
+                fill: l.color,
+                fontSize: l.fontSize
+              }
+            }
+          }
+        } else {
+          legend = false
+        }
+      }
+    }
+    const newPlots = []
+    const stockOption = {
+      ...stockPlot.options,
+      legend: legend
+    }
+    newPlots.push({ ...stockPlot, options: stockOption })
+    return {
+      ...options,
+      plots: newPlots
+    }
+  }
 
   protected setupOptions(chart: Chart, options: MixOptions): MixOptions {
     return flow(
@@ -621,6 +659,7 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
       this.configXAxis,
       this.configYAxis,
       this.configTooltip,
+      this.configLegend,
       this.customConfigEmptyDataStrategy
     )(chart, options)
   }