fix(tiny): tiny 图的 tooltip 默认给一个格式化,修改 demo 和单测

__tests__/unit/plots/tiny-area/index-spec.ts

@@ -149,7 +149,7 @@ describe('tiny-area', () => {
       tooltip: {
         showCrosshairs: true,
         customContent: (...arg) => {
-          return `<div class="g2-tooltip">有${arg[1][0]?.value / 1000}千</div>`;
+          return `有${arg[1][0]?.value / 1000}千`;
         },
         position: 'bottom',
         offset: 0,

__tests__/unit/plots/tiny-column/index-spec.ts

@@ -117,7 +117,7 @@ describe('tiny-column', () => {
       tooltip: {
         showCrosshairs: true,
         customContent: (...arg) => {
-          return `<div class="g2-tooltip">有${arg[1][0]?.value / 1000}千</div>`;
+          return `有${arg[1][0]?.value / 1000}千`;
         },
         position: 'bottom',
         offset: 0,

__tests__/unit/plots/tiny-line/index-spec.ts

@@ -121,7 +121,7 @@ describe('tiny-line', () => {
       tooltip: {
         showCrosshairs: true,
         customContent: (...arg) => {
-          return `<div class="g2-tooltip">有${arg[1][0]?.value / 1000}千</div>`;
+          return `有${arg[1][0]?.value / 1000}千`;
         },
         position: 'bottom',
         offset: 0,

examples/tiny-area/basic/demo/area-style.ts

@@ -6,9 +6,12 @@ const tinyArea = new TinyArea('container', {
   autoFit: false,
   data: new Array(100).fill(0).map(() => Math.random() * 100),
   smooth: true,
-  lineStyle: {
-    lineDash: [2, 2],
-    stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
+  line: {
+    size: 1,
+    style: {
+      lineDash: [2, 2],
+      stroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
+    },
   },
   areaStyle: {
     fill: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',

examples/tiny-area/basic/demo/area.ts

@@ -7,7 +7,9 @@ const tinyArea = new TinyArea('container', {
   data: new Array(100).fill(0).map(() => Math.random() * 100),
   smooth: true,
   tooltip: {
-    formatter: (x, y) => `NO.${x}: ${y.toFixed(2)}`,
+    customContent: function (x, data) {
+      return `NO.${x}: ${data[0]?.data?.y.toFixed(2)}`;
+    },
   },
 });
 

examples/tiny-column/basic/demo/column.ts

@@ -6,7 +6,9 @@ const tinyColumn = new TinyColumn('container', {
   autoFit: false,
   data: new Array(100).fill(0).map(() => Math.random() * 100),
   tooltip: {
-    formatter: ({ x, y }) => `NO.${x}: ${y.toFixed(2)}`,
+    customContent: function (x, data) {
+      return `NO.${x}: ${data[0]?.data?.y.toFixed(2)}`;
+    },
   },
 });
 

examples/tiny-line/basic/demo/line.ts

@@ -7,7 +7,9 @@ const tinyLine = new TinyLine('container', {
   data: new Array(100).fill(0).map(() => Math.random() * 100),
   smooth: true,
   tooltip: {
-    formatter: ({ x, y }) => `NO.${x}: ${y.toFixed(2)}`,
+    customContent: function (x, data) {
+      return `NO.${x}: ${data[0]?.data?.y.toFixed(2)}`;
+    },
   },
 });
 

gatsby-config.js

@@ -152,6 +152,14 @@ module.exports = {
           en: 'Funnel Charts',
         },
       },
+      {
+        slug: 'liquid',
+        icon: 'other',
+        title: {
+          zh: '水波图',
+          en: 'Liquid Charts',
+        },
+      },
       {
         slug: 'tiny-line',
         icon: 'line',
@@ -168,14 +176,6 @@ module.exports = {
           en: 'Tiny Area',
         },
       },
-      {
-        slug: 'liquid',
-        icon: 'other',
-        title: {
-          zh: '水波图',
-          en: 'Liquid Charts',
-        },
-      },
       {
         slug: 'tiny-column',
         icon: 'column',

src/plots/tiny-line/constants.ts

@@ -1,7 +1,11 @@
+import { get } from '@antv/util';
+import { Data } from '../../types';
+
 export const DEFAULT_TOOLTIP_OPTIONS = {
   showTitle: false,
   shared: true,
   showMarkers: false,
+  customContent: (x: string, data: any[]) => `${get(data, [0, 'data', 'y'], 0).toFixed(1)}`, // 默认给个格式化
   containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
   itemTpl: '<span>{value}</span>',
   domStyles: {