docs:文档改造

site/examples/component/legend/demo/item-style.ts

@@ -0,0 +1,33 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({ container: 'container', height: 350 });
+const shapeList = ['bowtie', 'smooth', 'hv', 'rect', 'hollowPoint'];
+const data = [
+  { genre: 'Sports', sold: 50 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+chart.options({
+  type: 'interval',
+  data,
+  encode: { x: 'genre', y: 'sold', color: 'genre' },
+  legend: {
+    color: {
+      size: 100,
+      itemWidth: 120,
+      // itemMarker
+      itemMarker: (d, index) => shapeList[index],
+      // itemLabel
+      itemLabelFill: 'red',
+      // itemValue
+      itemValueText: (d, index) => data[index]['sold'],
+      // itemBackground
+      itemBackgroundFill: (d) => d.color,
+      itemBackgroundFillOpacity: 0.2,
+    },
+  },
+});
+
+chart.render();

site/examples/component/legend/demo/meta.json

@@ -35,6 +35,38 @@
         "en": "Custom Symbol"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*UM2yQKYXczEAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "position.ts",
+      "title": {
+        "zh": "图例位置",
+        "en": "Legend Position"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*E0n9Qpri2hYAAAAAAAAAAAAAemJ7AQ/original"
+    },
+    {
+      "filename": "title.ts",
+      "title": {
+        "zh": "图例标题",
+        "en": "Legend Title"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VlifQbrB6EEAAAAAAAAAAAAAemJ7AQ/original"
+    },
+    {
+      "filename": "item-style.ts",
+      "title": {
+        "zh": "图例项样式",
+        "en": "Legend Item Style"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Bcp7Q73qwUcAAAAAAAAAAAAAemJ7AQ/original"
+    },
+    {
+      "filename": "nav-style.ts",
+      "title": {
+        "zh": "分页器样式",
+        "en": "Legend Nav Style"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6i-kR6WVcfcAAAAAAAAAAAAAemJ7AQ/original"
     }
   ]
 }

site/examples/component/legend/demo/nav-style.ts

@@ -0,0 +1,63 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({ container: 'container', height: 350 });
+
+chart.options({
+  type: 'interval',
+  data: [
+    { genre: 'Sports', sold: 50 },
+    { genre: 'Strategy', sold: 115 },
+    { genre: 'Action', sold: 120 },
+    { genre: 'Shooter', sold: 350 },
+    { genre: 'Other', sold: 150 },
+  ],
+  encode: { x: 'genre', y: 'sold', color: 'genre' },
+  legend: {
+    color: {
+      itemWidth: 160,
+      navEffect: 'cubic-bezier',
+      navDuration: 400,
+      navOrientation: 'vertical',
+      navDefaultPage: 2,
+      navLoop: true,
+
+      //配置navPageNum的绘图属性
+      navPageNumFontSize: 16,
+      navPageNumFontFamily: 'sans-serif',
+      navPageNumFontWeight: 500,
+      navPageNumLineHeight: 20,
+      navPageNumTextAlign: 'center',
+      navPageNumTextBaseline: 'middle',
+      navPageNumFill: '#2989FF',
+      navPageNumFillOpacity: 0.9,
+      navPageNumStroke: '#DAF5EC',
+      navPageNumStrokeOpacity: 0.9,
+      navPageNumLineWidth: 2,
+      navPageNumLineDash: [4, 8],
+      navPageNumOpacity: 1,
+      navPageNumShadowColor: '#d3d3d3',
+      navPageNumShadowBlur: 10,
+      navPageNumShadowOffsetX: 10,
+      navPageNumShadowOffsetY: 10,
+      navPageNumCursor: 'pointer',
+
+      // 配置navButton的绘图属性
+      navButtonFill: '#2989FF',
+      navButtonFillOpacity: 0.7,
+      navButtonStroke: '#DAF5EC',
+      navButtonStrokeOpacity: 0.9,
+      navButtonLineWidth: 2,
+      navButtonLineDash: [4, 8],
+      navButtonOpacity: 0.9,
+      navButtonShadowColor: '#d3d3d3',
+      navButtonShadowBlur: 10,
+      navButtonShadowOffsetX: 10,
+      navButtonShadowOffsetY: 10,
+      navButtonCursor: 'pointer',
+
+      navFormatter: (current, total) => `第${current}页/共${total}页`,
+    },
+  },
+});
+
+chart.render();

site/examples/component/legend/demo/position.ts

@@ -0,0 +1,34 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  height: 350,
+});
+
+chart.options({
+  type: 'interval',
+  data: [
+    { genre: 'Sports', sold: 50 },
+    { genre: 'Strategy', sold: 115 },
+    { genre: 'Action', sold: 120 },
+    { genre: 'Shooter', sold: 350 },
+    { genre: 'Other', sold: 150 },
+  ],
+  encode: { x: 'genre', y: 'sold', color: 'genre' },
+  legend: {
+    color: {
+      // 图例显示位置 可选 top ｜ bottom | right | left
+      position: 'top',
+      layout: {
+        // 主轴对齐方式 可选 flex-start | flex-end | center
+        justifyContent: 'flex-start',
+        // 交叉轴对齐方式 可选 flex-start | flex-end | center
+        alignItems: 'flex-start',
+        // 主轴方向 可选 row | column
+        flexDirection: 'row',
+      },
+    },
+  },
+});
+
+chart.render();

site/examples/component/legend/demo/title.ts

@@ -0,0 +1,38 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({ container: 'container', height: 300 });
+
+chart.options({
+  type: 'legends',
+  title: '图例标题',
+  titleSpacing: 0,
+  titleInset: 0,
+  titlePosition: 't',
+  titleFontSize: 16,
+  titleFontFamily: 'sans-serif',
+  titleFontWeight: 500,
+  titleLineHeight: 20,
+  titleTextAlign: 'center',
+  titleTextBaseline: 'middle',
+  titleFill: '#000',
+  titleFillOpacity: 0.9,
+  titleStroke: '#DAF5EC',
+  titleStrokeOpacity: 0.9,
+  titleLineWidth: 2,
+  titleLineDash: [4, 8],
+  titleOpacity: 1,
+  titleShadowColor: '#d3d3d3',
+  titleShadowBlur: 10,
+  titleShadowOffsetX: 10,
+  titleShadowOffsetY: 10,
+  titleCursor: 'pointer',
+  scale: {
+    size: {
+      type: 'linear',
+      domain: [0, 10],
+      range: [0, 100],
+    },
+  },
+});
+
+chart.render();

site/examples/general/area/demo/meta.json

@@ -34,7 +34,7 @@
         "zh": "数据缺失面积图",
         "en": "Missing Data Area Chart"
       },
-      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mrS4RJWkBTIAAAAAAAAAAAAAemJ7AQ/original"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7XNGTZ7WttIAAAAAAAAAAAAAemJ7AQ/original"
     },
     {
       "filename": "area-with-negative.ts",

site/examples/general/area/demo/missing-data-area.ts

@@ -20,8 +20,8 @@ chart.options({
     connectFill: 'grey',
     connectFillOpacity: 0.15,
     // 配置area样式
-    fill: 'skyblue',
-    opacity: 0.5,
+    fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
+    opacity: 0.9,
     stroke: 'yellow',
   },
 });

site/examples/general/interval/demo/interval-style.ts

@@ -0,0 +1,49 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({ container: 'container', height: 350 });
+
+chart.options({
+  type: 'interval',
+  data: [
+    { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+    { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+    { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+    { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
+    { name: 'London', 月份: 'May', 月均降雨量: 47 },
+    { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
+    { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
+    { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
+    { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+    { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+    { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+    { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
+    { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
+    { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
+    { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
+    { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
+  ],
+  encode: { x: '月份', y: '月均降雨量', color: 'name' },
+  transform: [{ type: 'stackY' }],
+  style: {
+    minHeight: 20,
+    columnWidthRatio: 0.5,
+    radiusTopLeft: 20,
+    radiusTopRight: 20,
+    insetBottom: 5,
+    // 绘图属性
+    fill: (d) => (d.name === 'London' ? '#688FD4' : '#55BECC'), // 绘图属性也可以是一个回调函数
+    fillOpacity: 0.9,
+    stroke: '#fff',
+    lineWidth: 1,
+    lineDash: [4, 5],
+    strokeOpacity: 0.5,
+    opacity: 1,
+    shadowColor: '#BABBBD',
+    shadowBlur: 10,
+    shadowOffsetX: 5,
+    shadowOffsetY: 5,
+    cursor: 'pointer',
+  },
+});
+
+chart.render();

site/examples/general/interval/demo/meta.json

@@ -60,6 +60,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*W2SKQJ4i8xQAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "interval-style.ts",
+      "title": {
+        "zh": "interval样式配置",
+        "en": "Interval Style"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HiAnR50lmhIAAAAAAAAAAAAAemJ7AQ/original"
+    },
     {
       "filename": "column-log.ts",
       "title": {