refactor(demo): demo 更新

antvis · Nov 19, 2020 · c3effad · c3effad
1 parent ab953b9
commit c3effad
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 282 deletions.
diff --git a/examples/case/customize/demo/customize-tooltip.ts b/examples/case/customize/demo/customize-tooltip.ts
@@ -1,4 +1,7 @@
 import { Line, Pie } from '@antv/g2plot';
+import { last } from '@antv/util';
+
+const colors = ['#5B8FF9', '#5AD8A6', '#5D7092'];
 
 const createPie = (container, data) => {
   const piePlot = new Pie(container, {
@@ -12,6 +15,11 @@ const createPie = (container, data) => {
     legend: false,
     tooltip: false,
     animation: false,
+    label: {
+      type: 'inner',
+      offset: '-10%',
+      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+    },
   });
   piePlot.render();
 };
@@ -29,37 +37,32 @@ const setStyles = (container, styles) => {
   }
 };
 
-fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
-  .then((res) => res.json())
+fetch('https://gw.alipayobjects.com/os/bmw-prod/5a209bb2-ee85-412f-a689-cdb16159a459.json')
+  .then((data) => data.json())
+  .then((data) =>
+    data.filter((d) => ['United States', 'France', 'Germany', 'Austria', 'Japan', 'Sweden'].includes(d.country))
+  )
   .then((data) => {
     const line = new Line('container', {
+      padding: 'auto',
+      appendPadding: [8, 10, 0, 10],
       data,
       xField: 'year',
       yField: 'value',
-      seriesField: 'category',
-      yAxis: {
-        label: {
-          // 数值格式化为千分位
-          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
-        },
-      },
-      point: {
-        shape: ({ category }) => {
-          return category === 'Gas fuel' ? 'square' : 'circle';
-        },
-        style: ({ year }) => {
-          return {
-            r: Number(year) % 4 ? 0 : 3, // 4 个数据示一个点标记
-          };
-        },
-      },
-      legend: {
-        position: 'bottom',
+      seriesField: 'country',
+      smooth: true,
+      lineStyle: ({ country }) => {
+        const importantCountries = ['United States', 'France', 'Germany'];
+        const idx = importantCountries.indexOf(country);
+        return { stroke: colors[idx] || '#8C8C8C', lineWidth: idx !== -1 ? 2 : 1 };
       },
+      interactions: [{ type: 'brush' }],
       tooltip: {
         follow: true,
         enterable: true,
-        offset: 5,
+        offset: 18,
+        shared: true,
+        marker: { lineWidth: 0.5, r: 3 },
         customContent: (value, items) => {
           const pieData = items.map((item) => ({
             type: item.name,
@@ -76,4 +79,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac
     });
 
     line.render();
+    // 初始化，默认激活
+    const point = line.chart.getXY(last(data.filter((d) => !!d.value)));
+    line.chart.showTooltip(point);
   });
diff --git a/examples/case/customize/demo/line-marker.ts b/examples/case/customize/demo/line-marker.ts
diff --git a/examples/case/customize/demo/line-style.ts b/examples/case/customize/demo/line-style.ts
diff --git a/...ples/case/statistical-charts/demo/line.ts → examples/case/customize/demo/line.ts b/...ples/case/statistical-charts/demo/line.ts → examples/case/customize/demo/line.ts
diff --git a/examples/case/customize/demo/meta.json b/examples/case/customize/demo/meta.json
@@ -5,20 +5,12 @@
   },
   "demos": [
     {
-      "filename": "line-marker.ts",
+      "filename": "line.ts",
       "title": {
-        "zh": "自定义折线图 marker",
-        "en": "Custom Line marker point"
+        "zh": "自定义折线图",
+        "en": "Custom line"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*U2mPQLoxIR4AAAAAAAAAAAAAARQnAQ"
-    },
-    {
-      "filename": "line-style.ts",
-      "title": {
-        "zh": "自定义折线图样式",
-        "en": "Custom Line style"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*NSq2SJgS3lEAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*MikuQoOtm1cAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "customize-tooltip.ts",
@@ -27,14 +19,6 @@
         "en": "Custom tooltip"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*5bPrQK5F-toAAAAAAAAAAAAAARQnAQ"
-    },
-    {
-      "filename": "pie/basic/basic.ts",
-      "title": {
-        "zh": "自定义 Tooltip",
-        "en": "Custom tooltip"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*5bPrQK5F-toAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }