Merge pull request #265 from antvis/fix-line-area-x-date

Fix line area x date
antvis · Nov 19, 2019 · aeb57ad · aeb57ad
2 parents 3efeac4 + 46130a1
commit aeb57ad
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 18 deletions.
diff --git a/examples/area/basic/demo/slider.js b/examples/area/basic/demo/slider.js
@@ -1,26 +1,36 @@
 import { Area } from '@antv/g2plot';
 
-fetch('../data/sales.json')
+fetch('../data/fireworks-sales.json')
   .then((res) => res.json())
   .then((data) => {
     const areaPlot = new Area(document.getElementById('container'), {
       title: {
         visible: true,
         text: '基础面积图 - 缩略轴',
       },
+      description: {
+        visible: true,
+        text: '缩略轴 (slider) 交互适用于数据较多，用户希望关注数据集中某个特殊区间的场景。',
+      },
       data,
-      xField: '城市',
+      xField: 'Date',
       xAxis: {
-        visible: true,
-        autoHideLabel: true,
+        type: 'dateTime',
+        tickCount: 5,
+      },
+      yField: 'scales',
+      yAxis: {
+        label: {
+          // 数值格式化为千分位
+          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
+        },
       },
-      yField: '销售额',
       interactions: [
         {
           type: 'slider',
           cfg: {
-            start: 0.5,
-            end: 0.55,
+            start: 0.2,
+            end: 0.7,
           },
         },
       ],

diff --git a/examples/line/basic/demo/line-point-style.js b/examples/line/basic/demo/line-point-style.js
@@ -17,6 +17,10 @@ const linePlot = new Line(document.getElementById('container'), {
     visible: true,
     text: '配置折线数据点样式',
   },
+  description: {
+    visible: true,
+    text: '自定义配置趋势线上数据点的样式',
+  },
   padding: 'auto',
   forceFit: true,
   data,

diff --git a/examples/line/basic/demo/line-slider.js b/examples/line/basic/demo/line-slider.js
@@ -1,6 +1,6 @@
 import { Line } from '@antv/g2plot';
 
-fetch('../data/sales.json')
+fetch('../data/fireworks-sales.json')
   .then((res) => res.json())
   .then((data) => {
     const linePlot = new Line(document.getElementById('container'), {
@@ -15,18 +15,24 @@ fetch('../data/sales.json')
       forceFit: true,
       padding: 'auto',
       data,
-      xField: '城市',
+      xField: 'Date',
       xAxis: {
-        visible: true,
-        autoHideLabel: true,
+        type: 'dateTime',
+        tickCount: 5,
+      },
+      yField: 'scales',
+      yAxis: {
+        label: {
+          // 数值格式化为千分位
+          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
+        },
       },
-      yField: '销售额',
       interactions: [
         {
           type: 'slider',
           cfg: {
-            start: 0.1,
-            end: 0.2,
+            start: 0.2,
+            end: 0.7,
           },
         },
       ],

diff --git a/examples/line/basic/demo/line.js b/examples/line/basic/demo/line.js
@@ -8,6 +8,10 @@ fetch('../data/fireworks-sales.json')
         visible: true,
         text: '单折线图的基础用法',
       },
+      description: {
+        visible: true,
+        text: '最基础简单的折线图使用方式，显示一个指标的趋势',
+      },
       forceFit: true,
       data,
       padding: 'auto',

diff --git a/src/plots/stack-column/layer.ts b/src/plots/stack-column/layer.ts
@@ -42,7 +42,6 @@ export default class StackColumnLayer<
   public init() {
     if (this.options.connectedArea.visible) {
       this.options.tooltip.crosshairs = null;
-      console.log(this.options);
     }
     super.init();
   }

diff --git a/src/theme/default.ts b/src/theme/default.ts
@@ -97,7 +97,7 @@ export const DEFAULT_GLOBAL_THEME = {
         visible: false,
         offset: 12,
         style: {
-          fill: 'rgba(0, 0, 0, 0.95)',
+          fill: 'rgba(0, 0, 0, 0.65)',
           fontSize: 12,
           textBaseline: 'bottom',
         },
@@ -143,7 +143,7 @@ export const DEFAULT_GLOBAL_THEME = {
       title: {
         visible: false,
         offset: 12,
-        style: { fill: 'rgba(0, 0, 0, 0.95)', fontSize: 12 },
+        style: { fill: 'rgba(0, 0, 0, 0.65)', fontSize: 12 },
       },
     },
     circle: {
@@ -194,7 +194,7 @@ export const DEFAULT_GLOBAL_THEME = {
   label: {
     offset: 12,
     style: {
-      fill: 'rgba(0, 0, 0, 0.95)',
+      fill: 'rgba(0, 0, 0, 0.65)',
       stroke: '#ffffff',
       lineWidth: 2,
     },