@antv/gpt-vis 1.0.0 → 1.0.2

package/dist/esm/vis/dual-axes/index.js

@@ -11,7 +11,7 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_STYLE_DEFAULTS, bindCrosshairAxisLabels, getCartesianAxis, getCartesianLayout, getChartAnimation, getLineHighlightState, getSeriesHighlightByColorInteraction, getSharedTooltipInteraction, getThemeObject, normalizePalette } from "../../util";
 
 /**
  * DualAxesSeriesItem defines a single series in the dual-axes chart.
@@ -29,14 +29,16 @@ import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util
  * Transform series data to G2 format.
  * Combines multiple series into a single data array with categories.
  */
+var getSeriesField = function getSeriesField(index) {
+  return "value_".concat(index + 1);
+};
 function transformData(series, categories) {
   return categories.map(function (category, index) {
     var dataPoint = {
       category: category
     };
-    series.forEach(function (s, i) {
-      var yField = s.axisYTitle || "value_".concat(i + 1);
-      dataPoint[yField] = s.data[index];
+    series.forEach(function (item, seriesIndex) {
+      dataPoint[getSeriesField(seriesIndex)] = item.data[index];
     });
     return dataPoint;
   });
@@ -80,6 +82,8 @@ export var DualAxes = function DualAxes(options) {
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
+  var hasRendered = false;
+  var cleanupCrosshairAxisLabels = null;
 
   /**
    * Render the dual-axes chart with the given configuration.
@@ -96,12 +100,18 @@ export var DualAxes = function DualAxes(options) {
 
     // Clean up previous chart if exists
     if (chart) {
+      var _cleanupCrosshairAxis;
+      (_cleanupCrosshairAxis = cleanupCrosshairAxisLabels) === null || _cleanupCrosshairAxis === void 0 || _cleanupCrosshairAxis();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
     }
     var _style$startAtZero = style.startAtZero,
       startAtZero = _style$startAtZero === void 0 ? false : _style$startAtZero;
-    var colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
+    var requestedColors = style.palette ? normalizePalette(style.palette, theme) : [];
+    var defaultColors = normalizePalette(undefined, theme);
+    var colors = [].concat(_toConsumableArray(requestedColors), _toConsumableArray(defaultColors.filter(function (color) {
+      return !requestedColors.includes(color);
+    })));
 
     // Transform data
     var data = transformData(series, categories);
@@ -115,15 +125,55 @@ export var DualAxes = function DualAxes(options) {
     });
 
     // Sort series: column first, then line (line rendered last appears on top)
-    var sortedSeries = _toConsumableArray(series).sort(function (a, b) {
+    var sortedSeries = series.map(function (item, originalIndex) {
+      return {
+        item: item,
+        originalIndex: originalIndex
+      };
+    }).sort(function (a, b) {
       var order = ['column', 'line'];
-      return order.indexOf(a.type) - order.indexOf(b.type);
+      return order.indexOf(a.item.type) - order.indexOf(b.item.type);
     });
+    var seriesMeta = sortedSeries.map(function (_ref, index) {
+      var item = _ref.item,
+        originalIndex = _ref.originalIndex;
+      return {
+        item: item,
+        yField: getSeriesField(originalIndex),
+        displayName: item.axisYTitle || getSeriesField(originalIndex),
+        color: colors[index % colors.length]
+      };
+    });
+    var seriesByField = new Map(seriesMeta.map(function (_ref2) {
+      var item = _ref2.item,
+        yField = _ref2.yField,
+        displayName = _ref2.displayName;
+      return [yField, {
+        type: item.type,
+        displayName: displayName
+      }];
+    }));
+    var cartesianAxisOptions = {
+      axisXTitle: axisXTitle,
+      xLabels: categories,
+      chartWidth: width
+    };
+    var cartesianAxis = getCartesianAxis(cartesianAxisOptions);
 
     // Create children configurations for each series
-    var children = sortedSeries.map(function (item, index) {
-      var yField = item.axisYTitle || "value_".concat(index + 1);
-      var color = colors[index % colors.length];
+    var children = seriesMeta.map(function (_ref3) {
+      var item = _ref3.item,
+        yField = _ref3.yField,
+        displayName = _ref3.displayName,
+        color = _ref3.color;
+      var tooltip = {
+        items: [function (datum) {
+          return {
+            name: displayName,
+            value: datum[yField]
+          };
+        }]
+      };
       if (item.type === 'column') {
         return {
           type: 'interval',
@@ -138,22 +188,25 @@ export var DualAxes = function DualAxes(options) {
             y: {
               nice: true,
               zero: startAtZero
-            },
-            color: {
-              range: [color]
             }
           },
+          tooltip: tooltip,
           axis: {
-            y: {
-              title: item.axisYTitle || ''
-            }
+            y: _objectSpread(_objectSpread({}, cartesianAxis.y), {}, {
+              title: item.axisYTitle || '',
+              titleFill: color,
+              titleFontWeight: 500
+            })
           },
           style: _objectSpread({
-            columnWidthRatio: 0.8
+            fill: color,
+            fillOpacity: 0.86,
+            columnWidthRatio: CHART_STYLE_DEFAULTS.intervalWidthRatio
           }, theme !== 'academy' ? {
             radiusTopLeft: 4,
             radiusTopRight: 4
-          } : {})
+          } : {}),
+          animate: getChartAnimation(hasRendered, 'growInY')
         };
       } else {
         // line type
@@ -171,20 +224,26 @@ export var DualAxes = function DualAxes(options) {
             y: {
               independent: true,
               zero: startAtZero
-            },
-            color: {
-              range: [color]
             }
           },
+          tooltip: tooltip,
           axis: {
-            y: {
+            y: _objectSpread(_objectSpread({}, cartesianAxis.y), {}, {
               position: 'right',
-              title: item.axisYTitle || ''
-            }
+              title: item.axisYTitle || '',
+              titleFill: color,
+              titleFontWeight: 500,
+              grid: false
+            })
           },
           style: {
-            lineWidth: 2
-          }
+            stroke: color,
+            lineWidth: CHART_STYLE_DEFAULTS.lineWidth,
+            lineCap: 'round',
+            lineJoin: 'round'
+          },
+          state: getLineHighlightState(CHART_STYLE_DEFAULTS.lineWidth),
+          animate: getChartAnimation(hasRendered, 'pathIn')
         };
       }
     });
@@ -192,38 +251,78 @@ export var DualAxes = function DualAxes(options) {
     // Configure chart options
     // Note: Using 'any' type due to G2's complex type system with transformations
     // This is consistent with how G2 5.0 is used elsewhere in the codebase
-    var chartOptions = {
-      animate: false,
+    var chartOptions = _objectSpread(_objectSpread({
       type: 'view',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
-      children: children,
+      title: title || '',
+      children: children
+    }, getCartesianLayout(cartesianAxisOptions)), {}, {
       axis: {
-        x: {
-          title: axisXTitle || false
-        }
+        x: cartesianAxis.x
       },
       scale: {
         y: {
           nice: true
+        },
+        color: {
+          domain: seriesMeta.map(function (_ref4) {
+            var yField = _ref4.yField;
+            return yField;
+          }),
+          range: seriesMeta.map(function (_ref5) {
+            var color = _ref5.color;
+            return color;
+          })
         }
       },
       legend: {
         color: {
-          position: 'top',
-          itemMarker: function itemMarker(v, index) {
-            var seriesItem = series[index];
-            return (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.type) === 'line' ? 'smooth' : 'rect';
+          labelFormatter: function labelFormatter(value) {
+            var _seriesByField$get;
+            return ((_seriesByField$get = seriesByField.get(value)) === null || _seriesByField$get === void 0 ? void 0 : _seriesByField$get.displayName) || value;
+          },
+          itemMarker: function itemMarker(value) {
+            var _seriesByField$get2;
+            return ((_seriesByField$get2 = seriesByField.get(value)) === null || _seriesByField$get2 === void 0 ? void 0 : _seriesByField$get2.type) === 'line' ? 'smooth' : 'rect';
           }
         }
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      interaction: _objectSpread({
+        tooltip: getSharedTooltipInteraction({
+          crosshairs: true
+        })
+      }, getSeriesHighlightByColorInteraction()),
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
-    };
+    });
     chart.options(chartOptions);
+    var lineYFields = seriesMeta.filter(function (_ref6) {
+      var item = _ref6.item;
+      return item.type === 'line';
+    }).map(function (_ref7) {
+      var yField = _ref7.yField;
+      return yField;
+    });
+    if (lineYFields.length) {
+      var currentChart = chart;
+      var cleanups = lineYFields.map(function (yField, index) {
+        return bindCrosshairAxisLabels(currentChart, theme, {
+          showXLabel: index === 0,
+          useStandaloneYLabel: true,
+          yAxisPosition: 'right',
+          yField: yField
+        });
+      });
+      cleanupCrosshairAxisLabels = function cleanupCrosshairAxisLabels() {
+        return cleanups.forEach(function (cleanup) {
+          return cleanup();
+        });
+      };
+    }
     chart.render();
+    hasRendered = true;
   };
 
   /**
@@ -231,9 +330,13 @@ export var DualAxes = function DualAxes(options) {
    */
   var destroy = function destroy() {
     if (chart) {
+      var _cleanupCrosshairAxis2;
+      (_cleanupCrosshairAxis2 = cleanupCrosshairAxisLabels) === null || _cleanupCrosshairAxis2 === void 0 || _cleanupCrosshairAxis2();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render: render,

package/dist/esm/vis/funnel/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * FunnelDataItem is the type for each data item in the funnel chart.
  */
@@ -12,8 +12,9 @@ export type FunnelDataItem = {
 export interface FunnelConfig {
     type?: 'funnel';
     data: FunnelDataItem[];
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
+    conversionRateLabel?: string;
     style?: {
         backgroundColor?: string;
         palette?: string[];

package/dist/esm/vis/funnel/index.js

@@ -1,5 +1,17 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { CHART_FONT_FAMILY, getBackgroundColor, getChartVisualTokens, getThemeObject, normalizePalette, resolveChartLocale } from "../../util";
 
 /**
  * FunnelDataItem is the type for each data item in the funnel chart.
@@ -13,6 +25,32 @@ import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util
  * FunnelInstance represents a funnel chart instance with render and destroy methods.
  */
 
+var FUNNEL_LABELS = {
+  'en-US': {
+    baseline: 'Baseline',
+    conversionRate: 'Conversion Rate',
+    currentValue: 'Current value',
+    dropOff: 'Drop-off from previous',
+    overallConversionRate: 'Overall conversion',
+    stageConversion: 'Stage conversion'
+  },
+  'zh-CN': {
+    baseline: '基准',
+    conversionRate: '转化率',
+    currentValue: '当前值',
+    dropOff: '较上一步流失',
+    overallConversionRate: '整体转化率',
+    stageConversion: '阶段转化率'
+  }
+};
+var formatConversionRate = function formatConversionRate(start, end) {
+  if (!Number.isFinite(start) || !Number.isFinite(end) || start === 0) return '—';
+  return "".concat((end / start * 100).toFixed(1), "%");
+};
+var formatMetricLabel = function formatMetricLabel(label, value, locale) {
+  return locale === 'zh-CN' ? "".concat(label, "\uFF1A").concat(value) : "".concat(label, ": ").concat(value);
+};
+
 /**
  * Funnel chart component using G2 5.0.
  *
@@ -42,6 +80,7 @@ export var Funnel = function Funnel(options) {
   var container = options.container,
     width = options.width,
     height = options.height,
+    locale = options.locale,
     _options$theme = options.theme,
     chartTheme = _options$theme === void 0 ? 'default' : _options$theme;
   var chart = null;
@@ -50,14 +89,19 @@ export var Funnel = function Funnel(options) {
    * Render the funnel chart with the given configuration.
    */
   var render = function render(config) {
-    var _data$, _data, _data$2, _data2, _data$3, _data3;
     var _config$data = config.data,
       data = _config$data === void 0 ? [] : _config$data,
       _config$theme = config.theme,
       theme = _config$theme === void 0 ? chartTheme : _config$theme,
       title = config.title,
+      conversionRateLabel = config.conversionRateLabel,
       _config$style = config.style,
       style = _config$style === void 0 ? {} : _config$style;
+    var chartLocale = resolveChartLocale(locale);
+    var labels = FUNNEL_LABELS[chartLocale];
+    var numberFormatter = new Intl.NumberFormat(chartLocale);
+    var stageConversionRateLabel = conversionRateLabel !== null && conversionRateLabel !== void 0 ? conversionRateLabel : labels.conversionRate;
+    var overallConversionRateLabel = conversionRateLabel !== null && conversionRateLabel !== void 0 ? conversionRateLabel : labels.overallConversionRate;
 
     // Clean up previous chart if exists
     if (chart) {
@@ -67,10 +111,38 @@ export var Funnel = function Funnel(options) {
     // Get colors from style.palette or theme defaults
     var colors = normalizePalette(style.palette, theme);
     var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
-
-    // Helper function to calculate conversion rate
-    var conversionRate = function conversionRate(start, end) {
-      return "".concat((end / start * 100).toFixed(2), " %");
+    var tokens = getChartVisualTokens(theme);
+    var formatValue = function formatValue(value) {
+      return Number.isFinite(value) ? numberFormatter.format(value) : '—';
+    };
+    var isInverted = data.length > 1 && data[0].value < data[data.length - 1].value;
+    var metricsByCategory = new Map(data.map(function (item, index) {
+      var previous = data[index - 1];
+      return [item.category, {
+        conversion: previous ? formatConversionRate(previous.value, item.value) : labels.baseline,
+        dropOff: previous ? Math.max(0, previous.value - item.value) : null
+      }];
+    }));
+    var funnelTooltip = {
+      title: 'category',
+      items: [function (d) {
+        return {
+          name: labels.currentValue,
+          value: formatValue(d.value)
+        };
+      }, function (d) {
+        var _metricsByCategory$ge, _metricsByCategory$ge2;
+        return {
+          name: labels.stageConversion,
+          value: (_metricsByCategory$ge = (_metricsByCategory$ge2 = metricsByCategory.get(d.category)) === null || _metricsByCategory$ge2 === void 0 ? void 0 : _metricsByCategory$ge2.conversion) !== null && _metricsByCategory$ge !== void 0 ? _metricsByCategory$ge : '—'
+        };
+      }, function (d) {
+        var _metricsByCategory$ge3, _metricsByCategory$ge4, _metricsByCategory$ge5;
+        return {
+          name: labels.dropOff,
+          value: ((_metricsByCategory$ge3 = metricsByCategory.get(d.category)) === null || _metricsByCategory$ge3 === void 0 ? void 0 : _metricsByCategory$ge3.dropOff) === null ? '—' : formatValue((_metricsByCategory$ge4 = (_metricsByCategory$ge5 = metricsByCategory.get(d.category)) === null || _metricsByCategory$ge5 === void 0 ? void 0 : _metricsByCategory$ge5.dropOff) !== null && _metricsByCategory$ge4 !== void 0 ? _metricsByCategory$ge4 : Number.NaN)
+        };
+      }]
     };
 
     // Create chart
@@ -79,8 +151,8 @@ export var Funnel = function Funnel(options) {
       width: width,
       height: height,
       autoFit: true,
-      paddingLeft: 40,
-      paddingRight: 68
+      paddingLeft: 56,
+      paddingRight: 118
     });
 
     // Configure chart options
@@ -90,7 +162,7 @@ export var Funnel = function Funnel(options) {
       animate: false,
       type: 'view',
       data: data,
-      title: title !== null && title !== void 0 ? title : '',
+      title: title || '',
       children: [{
         type: 'interval',
         data: data,
@@ -116,73 +188,80 @@ export var Funnel = function Funnel(options) {
             range: colors
           }
         },
-        legend: {
-          color: {
-            position: 'top',
-            layout: {
-              justifyContent: 'center'
-            }
-          }
-        },
-        labels: [
-        // Inside label showing category and value
-        {
+        legend: false,
+        tooltip: funnelTooltip,
+        labels: [{
           text: function text(d) {
-            return "".concat(d.category, "\n").concat(d.value);
+            return "".concat(d.category, "\n").concat(formatValue(d.value));
           },
           position: 'inside',
           transform: [{
             type: 'contrastReverse'
-          }]
-        },
-        // Connecting line for conversion rate
-        {
-          text: function text(d, i) {
-            return i !== 0 ? '———' : '';
-          },
+          }, {
+            type: 'overflowStroke'
+          }],
           style: {
-            'font-size': '1px',
-            color: '#666',
-            'letter-spacing': '0px'
-          },
-          position: 'top-right',
-          fill: '#666',
-          dx: 35,
-          dy: -8
-        },
-        // Conversion rate label text
-        {
-          text: function text(d, i) {
-            return i !== 0 ? '转化率' : '';
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 12,
+            fontWeight: 500,
+            lineHeight: 17
+          }
+        }, {
+          text: function text(_d, index, items) {
+            return (isInverted ? index < items.length - 1 : index > 0) ? '———' : '';
           },
-          position: 'top-right',
-          textAlign: 'left',
-          textBaseline: 'middle',
-          fill: '#666',
-          dx: 40
-        },
-        // Conversion rate percentage
-        {
-          text: function text(d, i, dataArray) {
-            return i !== 0 ? conversionRate(dataArray[i - 1].value, dataArray[i].value) : '';
+          position: isInverted ? 'bottom-right' : 'top-right',
+          fill: tokens.textSecondary,
+          fillOpacity: 0.72,
+          dx: 8,
+          dy: isInverted ? 6 : -6,
+          style: {
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 8,
+            fontWeight: 400,
+            letterSpacing: -2
+          }
+        }, {
+          text: function text(_d, index, items) {
+            var from = isInverted ? items[index] : items[index - 1];
+            var to = isInverted ? items[index + 1] : items[index];
+            return from && to ? formatMetricLabel(stageConversionRateLabel, formatConversionRate(from.value, to.value), chartLocale) : '';
           },
-          position: 'top-right',
+          position: isInverted ? 'bottom-right' : 'top-right',
           textAlign: 'left',
           textBaseline: 'middle',
-          dx: 80
+          fill: tokens.textPrimary,
+          dx: 26,
+          style: {
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 11,
+            fontWeight: 500
+          }
         }],
-        viewStyle: {
+        style: _objectSpread({
+          fillOpacity: 0.94,
+          stroke: tokens.separator,
+          lineWidth: 2
+        }, theme === 'academy' ? {} : {
+          radius: 4
+        }),
+        state: {
+          active: {
+            fillOpacity: 1,
+            stroke: tokens.separator,
+            lineWidth: 3
+          }
+        },
+        viewStyle: style.backgroundColor ? {
           viewFill: backgroundColor
-        }
-      },
-      // Overall conversion rate connector
-      {
+        } : undefined
+      }].concat(_toConsumableArray(data.length > 1 ? [{
         type: 'connector',
         data: [{
-          startX: (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.category,
-          startY: (_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data.category,
+          startX: isInverted ? data[data.length - 1].category : data[0].category,
+          startY: isInverted ? data[0].category : data[data.length - 1].category,
           endX: 0,
-          endY: (((_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.value) - ((_data2 = data[data.length - 1]) === null || _data2 === void 0 ? void 0 : _data2.value)) / 2
+          endY: Math.abs(data[0].value - data[data.length - 1].value) / 2
         }],
         encode: {
           x: 'startX',
@@ -190,41 +269,36 @@ export var Funnel = function Funnel(options) {
           y: 'endX',
           y1: 'endY'
         },
+        tooltip: false,
         style: {
-          stroke: '#666',
+          stroke: tokens.axisLine,
+          strokeOpacity: theme === 'academy' ? 1 : 0.82,
+          lineWidth: theme === 'academy' ? 1 : 0.75,
           markerEnd: false,
-          connectLength1: -12,
-          offset2: -20,
-          connectorStroke: '#0649f2',
-          lineDash: [12, 2]
+          connectLength1: -12
         },
         labels: [{
-          text: '转化率',
+          text: formatMetricLabel(overallConversionRateLabel, formatConversionRate(data[0].value, data[data.length - 1].value), chartLocale),
           position: 'left',
           textAlign: 'start',
           textBaseline: 'middle',
-          fill: '#666',
-          dx: 10
-        }, {
-          text: conversionRate((_data$3 = data[0]) === null || _data$3 === void 0 ? void 0 : _data$3.value, (_data3 = data[data.length - 1]) === null || _data3 === void 0 ? void 0 : _data3.value),
-          position: 'left',
-          textAlign: 'start',
-          dx: 50,
-          fill: '#000'
+          fill: tokens.textPrimary,
+          dx: 8,
+          style: {
+            fontFamily: CHART_FONT_FAMILY,
+            fontSize: 11,
+            fontWeight: 500
+          }
         }]
-      }],
+      }] : [])),
       axis: false,
-      tooltip: {
-        items: [function (d) {
-          return {
-            name: d.category,
-            value: d.value
-          };
-        }]
+      interaction: {
+        tooltip: true,
+        elementHighlight: true
       },
-      viewStyle: {
+      viewStyle: style.backgroundColor ? {
         viewFill: backgroundColor
-      },
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);

package/dist/esm/vis/histogram/index.js

@@ -1,5 +1,5 @@
 import { Chart } from '@antv/g2';
-import { getBackgroundColor, getThemeObject, normalizePalette } from "../../util/theme";
+import { getThemeObject, normalizePalette } from "../../util/theme";
 
 /**
  * HistogramConfig defines the configuration for rendering the histogram chart.
@@ -61,7 +61,6 @@ export var Histogram = function Histogram(options) {
 
     // Get colors from style.palette or theme defaults
     var colors = normalizePalette(style.palette, theme);
-    var backgroundColor = style.backgroundColor || getBackgroundColor(theme);
 
     // Create chart
     chart = new Chart({
@@ -122,9 +121,9 @@ export var Histogram = function Histogram(options) {
           name: '频数'
         }]
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? {
+        viewFill: style.backgroundColor
+      } : undefined,
       theme: getThemeObject(theme)
     };
     chart.options(chartOptions);