[Pref 0000] 可配置首页图表功能改进

src/components/Configurable/detail/CustomChart.vue

@@ -4,7 +4,7 @@
 <script lang="ts" setup>
   import { ref, Ref, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-  import { get } from 'lodash-es';
+  import { get, merge } from 'lodash-es';
   import { ModuleDataChart } from '../types';
   import { EChartsOption, graphic } from 'echarts';
   import { getData, getFormattedText } from '../hooks/helper';
@@ -33,10 +33,6 @@
     const domWidth = inst ? inst.getWidth() : 500;
     // 依据每一个图表配置生成图表选项
     const { yAxis = [], xAxis = [], legend, order, type, sortBy, series, dataZoom = [] } = props.chartConfig;
-    const textStyle = get(props.chartOption, 'textStyle', {
-      color: '#fff',
-      // color: '#fff',
-    });
 
     let sorttedData: any[] = [];
     if (Array.isArray(props.chartData)) {
@@ -86,7 +82,6 @@
 
     if (type === 'scatter') {
       return {
-        textStyle,
         legend: {
           show: legend.show,
           top: 0,
@@ -253,9 +248,7 @@
 
     if (type === 'pie') {
       return {
-        textStyle,
         legend: {
-          textStyle,
           show: legend.show,
         },
         tooltip: {
@@ -354,9 +347,7 @@
       const color = ['#70F081', '#EEE780', '#F07070', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
 
       return {
-        textStyle,
         legend: {
-          textStyle,
           show: legend.show,
         },
         tooltip: {
@@ -507,7 +498,6 @@
     // 柱状图
     if (type === 'bar') {
       return {
-        textStyle,
         grid: {
           top: 50,
           bottom: dataZoom.length ? 70 : 30,
@@ -515,7 +505,6 @@
           right: 30, // 缩小右侧边距
         },
         legend: {
-          textStyle,
           show: legend.show,
         },
         tooltip: {
@@ -571,7 +560,6 @@
             barGap: '100%',
             label: {
               show: true,
-              textStyle,
               position: 'top',
             },
             itemStyle: {
@@ -592,12 +580,10 @@
     // 折线图和上面的柱状图类似
     if (type === 'line') {
       return {
-        textStyle,
         legend: {
           show: legend.show,
           top: 10,
           right: 10,
-          textStyle,
         },
         grid: {
           left: 60,
@@ -637,12 +623,10 @@
 
     if (type === 'line_enhance') {
       return {
-        textStyle,
         legend: {
           show: legend.show,
           top: 10,
           right: 10,
-          textStyle,
         },
         tooltip: {
           trigger: 'item',
@@ -692,11 +676,9 @@
     // 平滑曲线图
     if (type === 'line_smooth') {
       return {
-        textStyle,
         legend: {
           show: legend.show,
           top: 10,
-          textStyle,
         },
         grid: {
           left: 60,
@@ -746,9 +728,7 @@
     // 折线区域图，即折线下面的区域填满
     if (type === 'line_area') {
       return {
-        textStyle,
         legend: {
-          textStyle,
           show: legend.show,
         },
         grid: {
@@ -809,9 +789,7 @@
 
     if (type === 'line_bar') {
       return {
-        textStyle,
         legend: {
-          textStyle,
           show: legend.show,
           top: 10,
           right: 10,
@@ -849,7 +827,6 @@
     // 堆叠柱状图
     if (type === 'bar_stack') {
       return {
-        textStyle,
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -861,7 +838,6 @@
           bottom: 30,
         },
         legend: {
-          textStyle,
           show: legend.show,
         },
         xAxis: xAxis.map((e) => {
@@ -908,13 +884,11 @@
     // 柱状图，圆柱形样式
     if (type === 'bar_cylinder') {
       return {
-        textStyle,
         grid: {
           top: 40,
           bottom: 30,
         },
         legend: {
-          textStyle,
           show: legend.show,
         },
         tooltip: {
@@ -1010,13 +984,11 @@
     // 柱状图，圆柱形样式
     if (type === 'bar_cylinder_wide') {
       return {
-        textStyle,
         grid: {
           top: 40,
           bottom: 30,
         },
         legend: {
-          textStyle,
           show: legend.show,
         },
         tooltip: {
@@ -1123,7 +1095,8 @@
   );
 
   function initCharts() {
-    const o = genChartOption();
-    setOptions(o as EChartsOption, Boolean(props.chartConfig.clear));
+    const generatedOption = genChartOption();
+    const mergedOption = props.chartOption ? merge({}, generatedOption, props.chartOption) : generatedOption;
+    setOptions(mergedOption as EChartsOption, Boolean(props.chartConfig.clear));
   }
 </script>