fix: 优化散点图 demos (#1608)

Co-authored-by: liufu.lf <[email protected]>

Author: lxfu1

examples/scatter/basic/demo/basic.ts

@@ -10,7 +10,11 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
       yField: 'Rating',
       shape: 'circle',
       yAxis: {
-        grid: {},
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
       },
       xAxis: {
         min: -100,
@@ -22,6 +26,11 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
             },
           },
         },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
       },
       pointStyle: {
         stroke: '#fff',

examples/scatter/basic/demo/color-mapping.ts

@@ -10,10 +10,15 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
       yField: 'Rating',
       shape: 'circle',
       colorField: 'Genre',
-      sizeField: 'Rating',
-      size: [2, 5],
+      color: ['#d62728', '#2ca02c', '#000000', '#9467bd', '#ffd500', '#1f77b4', '#00518a', '#ffbc69', '#9bd646'],
+      size: 4,
       yAxis: {
         nice: true,
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
       },
       xAxis: {
         min: -100,
@@ -24,6 +29,11 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
             },
           },
         },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
       },
       pointStyle: {
         stroke: '#fff',

examples/scatter/basic/demo/label.ts

@@ -15,6 +15,14 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f427
       pointStyle: {
         fillOpacity: 1,
       },
+      yAxis: {
+        nice: true,
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
       xAxis: {
         grid: {
           line: {
@@ -23,6 +31,11 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f427
             },
           },
         },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
       },
       label: {},
     });

examples/scatter/basic/demo/meta.json

@@ -18,14 +18,6 @@
         "zh": "散点图颜色映射",
         "en": "the color mapping of Scatter chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Mds9Q7-zeHMAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "shape-mapping.ts",
-      "title": {
-        "zh": "散点形状色映射",
-        "en": "the shape mapping of Scatter chart"
-      },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kRFIJ2OlFs/FE726B54-2352-47F5-AAF9-B17D281CE513.png"
     },
     {

examples/scatter/basic/demo/quadrant.ts

@@ -15,6 +15,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747
       shape: 'circle',
       pointStyle: {
         fillOpacity: 0.8,
+        stroke: '#bbb',
       },
       xAxis: {
         min: -25,
@@ -26,6 +27,18 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747
             },
           },
         },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
+      yAxis: {
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
       },
       quadrant: {
         xBaseline: 0,

examples/scatter/basic/demo/shape-mapping.ts

@@ -15,6 +15,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747
       shape: 'circle',
       pointStyle: {
         fillOpacity: 0.8,
+        stroke: '#bbb',
       },
       xAxis: {
         min: -25,
@@ -26,6 +27,18 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747
             },
           },
         },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
+      yAxis: {
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
       },
     });
     scatterPlot.render();