几何元素

Interval

条形图

image.png

  1. // https://g2.antv.vision/zh/examples/column/basic#basic
  3. const data = [
  4.   { year: '1951 年', sales: 38 },
  5.   { year: '1952 年', sales: 52 },
  6.   { year: '1956 年', sales: 61 },
  7.   { year: '1957 年', sales: 145 },
  8.   { year: '1958 年', sales: 48 },
  9.   { year: '1959 年', sales: 38 },
  10.   { year: '1960 年', sales: 38 },
  11.   { year: '1962 年', sales: 38 },
  12. ];
  14. const options = {
  15.   type: 'interval',
  16.   data,
  17.   encode: {
  18.     x: 'year',
  19.     y: 'scales'
  20.   }
  21. };

区间条形图

image.png

  1. // https://g2.antv.vision/zh/examples/column/basic#ranged
  3. const data = [
  4.   { x: '分类一', y1: 76, y2: 100 },
  5.   { x: '分类二', y1: 56, y2: 108 },
  6.   { x: '分类三', y1: 38, y2: 129 },
  7.   { x: '分类四', y1: 58, y2: 155 },
  8.   { x: '分类五', y1: 45, y2: 120 },
  9.   { x: '分类六', y1: 23, y2: 99 },
  10.   { x: '分类七', y1: 18, y2: 56 },
  11.   { x: '分类八', y1: 18, y2: 34 },
  12. ];
  14. const options = {
  15.   type: 'interval',
  16.   data,
  17.   encode: {
  18.     x: 'x',
  19.     y: ['y1', 'y2']
  20.   }
  21. }

堆积条形图

image.png

  1. // https://g2.antv.vision/zh/examples/column/stack#stacked
  3. const data = [
  4.   { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  5.   { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  6.   { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  7.   { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  8.   { name: 'London', 月份: 'May', 月均降雨量: 47 },
  9.   { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  10.   { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  11.   { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  12.   { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  13.   { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  14.   { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  15.   { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  16.   { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  17.   { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  18.   { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  19.   { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
  20. ];
  22. const options = {
  23.      type: 'interval',
  24.   data,
  25.   statistic: [{type: 'stackY'}],
  26.   encode: {
  27.     x: '月份',
  28.     y: '月均降雨量',
  29.     color: 'name',
  30.   }
  31. }

const data = [ { country: ‘Europe’, year: ‘1750’, value: 163 }, { country: ‘Europe’, year: ‘1800’, value: 203 }, { country: ‘Europe’, year: ‘1850’, value: 276 }, { country: ‘Europe’, year: ‘1900’, value: 408 }, { country: ‘Europe’, year: ‘1950’, value: 547 }, { country: ‘Europe’, year: ‘1999’, value: 729 }, { country: ‘Europe’, year: ‘2050’, value: 628 }, { country: ‘Europe’, year: ‘2100’, value: 828 }, { country: ‘Asia’, year: ‘1750’, value: 502 }, { country: ‘Asia’, year: ‘1800’, value: 635 }, { country: ‘Asia’, year: ‘1850’, value: 809 }, { country: ‘Asia’, year: ‘1900’, value: 947 }, { country: ‘Asia’, year: ‘1950’, value: 1402 }, { country: ‘Asia’, year: ‘1999’, value: 3634 }, { country: ‘Asia’, year: ‘2050’, value: 5268 }, { country: ‘Asia’, year: ‘2100’, value: 7268 }, ];

const options = { type: ‘interval’, data, statistic: [ {type: ‘stackY’}, {type: ‘normalizeY’} ], encode: { x: ‘year’, y: ‘value’, color: ‘country’, } }

  1. <a name="nqFVT"></a>
  2. ### 分组条形图
  3. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/418707/1646391909897-3457544e-0ecf-4d44-98e7-811579afbb25.png#clientId=uf3befbf1-0c05-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=358&id=u483cbcb7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=716&originWidth=1278&originalType=binary&ratio=1&rotation=0&showTitle=false&size=195960&status=done&style=none&taskId=u7bfb448f-cec7-4d64-b2c2-3d16b01a500&title=&width=639)
  4. ```javascript
  5. // https://g2.antv.vision/zh/examples/column/stack#stacked
  7. const data = [
  8.   { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  9.   { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  10.   { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  11.   { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  12.   { name: 'London', 月份: 'May', 月均降雨量: 47 },
  13.   { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  14.   { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  15.   { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  16.   { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  17.   { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  18.   { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  19.   { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  20.   { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  21.   { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  22.   { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  23.   { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
  24. ];
  26. const options = {
  27.   type: 'interval',
  28.   data,
  29.   statistic: [{type: 'dodgeX'}], // dodgeX 推断出 series
  30.   encode: {
  31.     x: '月份',
  32.     y: '月均降雨量',
  33.     color: 'name',
  34.   }
  35. }
  37. // 下面的写法也是可以的
  38. const options = {
  39.   type: 'interval',
  40.   data,
  41.   encode: {
  42.     x: '月份',
  43.     y: '月均降雨量',
  44.     series: 'name',
  45.     color: 'name',
  46.   }
  47. }

饼图

image.png

  1. // https://g2.antv.vision/zh/examples/pie/basic#labelline
  3. const data = [
  4.   { item: '事例一', count: 40},
  5.   { item: '事例二', count: 21},
  6.   { item: '事例三', count: 17},
  7.   { item: '事例四', count: 13},
  8.   { item: '事例五', count: 9},
  9. ];
  11. const options = {
  12.   type: 'interval',
  13.   statistic: [{type: 'percentageY'}, {type: 'stackY'}],
  14.   coordinate: [{type: 'polar'}],
  15.   ecnode: {
  16.     y: 'count',
  17.     color: 'item'
  18.   }
  19. }

漏斗图

image.png image.png

  1. // https://g2.antv.vision/en/examples/funnel/funnel#pyramid
  2. const data = [
  3.   { action: '浏览网站', pv: 50000 },
  4.   { action: '放入购物车', pv: 35000 },
  5.   { action: '生成订单', pv: 25000 },
  6.   { action: '支付订单', pv: 15000 },
  7.   { action: '完成交易', pv: 8000 },
  8. ];
  10. const options = {
  11.   type: 'interval',
  12.   statistic: [{ type: 'symmetryY' }],
  13.   coordinate: [ { type: 'transpose'}, { type: 'reflectY' }],
  14.   ecnode: {
  15.     y: 'count',
  16.     x: 'action',
  17.     color: 'action',
  18.     shape: 'funnel'
  19.   }
  20. }

Area

河流图

image.png

  1. // https://g2.antv.vision/zh/examples/area/streamgraph#streamgraph
  3. const options = {
  4.   type: 'area',
  5.   statistic: [{ type: 'stackY' }, { type: 'symmetryY' }],
  6.   encode: {
  7.     x: 'year',
  8.     y: 'count',
  9.   }
  10. }

雷达图

image.png

  1. // https://g2.antv.vision/zh/examples/radar/radar#basic
  2. const users = [
  3.   { item: 'Design', user: 'a', score: 70 },
  4.   { item: 'Design', user: 'b', score: 30 },
  5.   { item: 'Development', user: 'a', score: 60 },
  6.   { item: 'Development', user: 'b', score: 70 },
  7.   { item: 'Marketing', user: 'a', score: 50 },
  8.   { item: 'Marketing', user: 'b', score: 60 },
  9.   { item: 'Users', user: 'a', score: 40 },
  10.   { item: 'Users', user: 'b', score: 50 },
  11.   { item: 'Test', user: 'a', score: 60 },
  12.   { item: 'Test', user: 'b', score: 70 },
  13.   { item: 'Language', user: 'a', score: 70 },
  14.   { item: 'Language', user: 'b', score: 50 },
  15.   { item: 'Technology', user: 'a', score: 50 },
  16.   { item: 'Technology', user: 'b', score: 40 },
  17.   { item: 'Support', user: 'a', score: 30 },
  18.   { item: 'Support', user: 'b', score: 40 },
  19.   { item: 'Sales', user: 'a', score: 60 },
  20.   { item: 'Sales', user: 'b', score: 40 },
  21.   { item: 'UX', user: 'a', score: 50 },
  22.   { item: 'UX', user: 'b', score: 60 },
  23. ];
  25. const options = {
  26.   type: 'layer',
  27.   data,
  28.   coordinates: [{ type: 'polar' }],
  29.   encode: {
  30.     x: 'item',
  31.     y: 'score',
  32.     color: 'user'
  33.   },
  34.   style: {
  35.     fillOpacity: 0.4,
  36.     strokeOpacity: 0.4,
  37.   },
  38.   children: [
  39.     {type: 'area'},
  40.     {type: 'point'},
  41.   ],
  42. }

Line

平行坐标系

image.png

  1. // https://vega.github.io/vega/examples/parallel-coordinates/
  3. const response = await fetch('https://vega.github.io/vega/data/cars.json');
  4. const data = await response.json();
  6. const options = {
  7.   type: 'line',
  8.   data,
  9.   coordainte: [{type: 'parallel'}],
  10.   component: [
  11.     {type: 'axisY', channel: 'position[0]', title: 'HHH'}
  12.   ],
  13.   scale: {
  14.     'position[0]': { nice: true },
  15.   },
  16.   encode: {
  17.     position: [
  18.       'Cylinders', 
  19.       'Displacement', 
  20.       'Weight_in_Lbs', 
  21.       'Horsepower',
  22.       'Acceleration',
  23.       'Miles_per_Callon',
  24.       'Year',
  25.     ],
  26.   }
  27. }

Text

词云图

  1. // https://vega.github.io/vega/examples/word-cloud/
  3. const options = {
  4.   type: 'text',
  5.   data: '...',
  6.   transform: [
  7.     {type: 'split'},
  8.     {type: 'wordcloud'} // 这是个异步的操作
  9.   ],
  10.   scale: {
  11.     color: {
  12.       range: ["#d5a928", "#652c90", "#939597"]
  13.     }
  14.   },
  15.   encode: {
  16.     text: 'text',
  17.     x: 'x',
  18.     y: 'y',
  19.     fontSize: 'fontSize',
  20.     rotation: 'rotation',
  21.     color: 'text',
  22.   },
  23. };

Annotation

image.png

  1. // https://g2.antv.vision/zh/examples/case/line#line7
  3. const options = {
  4.   type: 'layer',
  5.   data,
  6.   encode: {
  7.     x: 'Date',
  8.     y: 'Close'
  9.   },
  10.   children: [
  11.     {
  12.       type: 'line'
  13.     },
  14.     {
  15.       type: 'text',
  16.       statistic: [
  17.         {type: 'selectMinY'}
  18.       ],
  19.       encode: {
  20.         text: d => `全部谷值：${d.Close}`
  21.       }
  22.     },
  23.     {
  24.       type: 'text',
  25.       statistic: [
  26.         {type: 'selectMaxY'}
  27.       ],
  28.       encode: {
  29.         text: d => `全部峰值：${d.Close}`
  30.       }
  31.     }
  32.   ],
  33. };

外部 Label

image.png

  1. // https://g2.antv.vision/zh/examples/case/column#column2
  3. const data = [
  4.   { type: '未知', value: 654, percent: 0.02 },
  5.   { type: '17 岁以下', value: 654, percent: 0.02 },
  6.   { type: '18-24 岁', value: 4400, percent: 0.2 },
  7.   { type: '25-29 岁', value: 5300, percent: 0.24 },
  8.   { type: '30-39 岁', value: 6200, percent: 0.28 },
  9.   { type: '40-49 岁', value: 3300, percent: 0.14 },
  10.   { type: '50 岁以上', value: 1500, percent: 0.06 },
  11. ];
  13. // 这是其中一种写法，text，interval 是同一层级的东西
  14. const config = {
  15.   type: 'layer',
  16.   encode: {
  17.     x: 'type',
  18.     y: 'value'
  19.   },
  20.   children: [
  21.     { type: 'interval'},
  22.     {
  23.       type: 'text',
  24.       encode: { text: 'value' },
  25.       style: { dy: '-2em' }
  26.     },
  27.     {
  28.       type: 'text',
  29.       encode: { text: 'percent' },
  30.       style: { dy: '-1em' }
  31.     }
  32.   ],
  33. }
  35. // 这是第二种写法，text 是 interval 的一部分
  36. // 这样 text 就可以感知 interval 的 bounding box
  37. const options = {
  38.   type: 'interval',
  39.   data,
  40.   encode: {
  41.     x: 'type',
  42.     y: 'value'
  43.   },
  44.   children: [
  45.     {
  46.       type: 'text', // 默认位置是父亲元素 bounding box 的左上角
  47.       encode: { text: 'value' },
  48.       style: { dy: '-2em' }
  49.     },
  50.     {
  51.       type: 'text',
  52.       encode: { text: 'percent' },
  53.       style: { dy: '-1em' }
  54.     }
  55.   ]
  56. };

内部 Label

image.png

  1. // https://g2.antv.vision/zh/examples/relation/relation#treemap
  3. const options = {
  4.   type: 'polygan',
  5.   data,
  6.   transform: [
  7.     {type: 'treemap'}
  8.   ],
  9.   encode: {
  10.     x: 'x',
  11.     y: 'y'
  12.   },
  13.   children: [
  14.     {
  15.       type: 'text',
  16.       encode: {
  17.         x: 0.5, // 指定为中心
  18.         y: 0.5, // 指定为中心
  19.         text: 'label',
  20.       },
  21.       // scale: {
  22.       //  x: {type: 'identity'},
  23.       //  y: {type: 'identity'}
  24.       // }
  25.     }
  26.   ]
  27. }

Image

散点图

image.png

  1. // https://g2.antv.vision/zh/examples/point/bubble#bubble-image
  3. const data = [
  4.   { name: 'Internet Explorer', value: 26, imageURL: ''},
  5.   { name: 'Chrome', value: 40, imageURL: ''},
  6.   { name: 'Firefox', value: 30, imageURL: ''},
  7.   { name: 'Safari', value: 24, imageURL: ''},
  8.   { name: 'Opera', value: 15, imageURL: ''},
  9.   { name: 'Undetectable', value: 8, imageURL: ''}
  10. ];
  12. const options = {
  13.   type: 'layer',
  14.   children: [
  15.     {
  16.       type: 'edge',
  17.       x: ['name', 'name'],
  18.       y: ['value', 1],
  19.       shape: 'dash'
  20.     },
  21.     {
  22.       type: 'image',
  23.       data,
  24.       scale: {
  25.         size: {type: 'pow'}
  26.       },
  27.       encode: {
  28.         x: 'name',
  29.         y: 'value',
  30.         url: 'imageURL',
  31.         size: 'value'
  32.       }
  33.     }
  34.   ]
  35. };

Mix

桑基图

image.png

  1. // https://g2.antv.vision/zh/examples/case/sankey/#sankey-card
  3. const options = {
  4.   type: 'layer',
  5.   data,
  6.   transform: [
  7.     { type: 'sankey', /** 更多参数 **/ } // 在这里计算
  8.   ],
  9.   children: [
  10.     {
  11.       transform: [{type: 'pick', fields: ['nodes']}],
  12.       type: 'polygon',
  13.       encode: {
  14.         x: 'x',
  15.         y: 'y,
  16.       }
  17.     },
  18.     {
  19.       transform: [{type: 'pick', fields: ['edges']}],
  20.       type: 'edge',
  21.       encode: {
  22.         shape: 'arc',
  23.         x: 'x',
  24.         y: 'y'
  25.       }
  26.     }
  27.   ]
  28. };

双轴柱线图

image.png

  1. // https://g2.antv.vision/zh/examples/other/other#double-axes
  3. const data = [
  4.   { time: '10:10', call: 4, waiting: 2, people: 2 },
  5.   { time: '10:15', call: 2, waiting: 6, people: 3 },
  6.   { time: '10:20', call: 13, waiting: 2, people: 5 },
  7.   { time: '10:25', call: 9, waiting: 9, people: 1 },
  8.   { time: '10:30', call: 5, waiting: 2, people: 3 },
  9.   { time: '10:35', call: 8, waiting: 2, people: 1 },
  10.   { time: '10:40', call: 13, waiting: 1, people: 2 }
  11. ];
  13. const options = {
  14.   type: 'layer',
  15.   data,
  16.   encode: {x: 'time'},
  17.   sync: {
  18.     y: false
  19.   },
  20.   children: [
  21.     {
  22.       type: 'interval',
  23.       encode: {
  24.         y: 'waiting',
  25.         color: '#3182bd',
  26.       }
  27.     },
  28.     {
  29.       type: 'layer',
  30.       encode: {
  31.         y: 'people',
  32.         color: '#fdae6b'
  33.       },
  34.       component: [
  35.         // 没有这条声明轴会都在右边
  36.         // 因为这两者的 scale 没有同步
  37.         {type: 'axisY', position: 'left'}
  38.       ],
  39.       children: [
  40.         {type: 'point'},
  41.         {type: 'line'}
  42.       ]
  43.     }
  44.   ],
  45. };

image.png
这种情况可能需要一种同步两边刻度的算法，但是只能保证一边刻度的可读性。

柱状双轴图

image.png

  1. // https://codesandbox.io/s/dual-axes-of-column-5xk0pg?file=/index.ts
  3. const data = [
  4.   { year: "1991", value: 3, count: 10 },
  5.   { year: "1992", value: 4, count: 4 },
  6.   { year: "1993", value: 3.5, count: 5 },
  7.   { year: "1994", value: 5, count: 5 },
  8.   { year: "1995", value: 4.9, count: 4.9 },
  9.   { year: "1996", value: 6, count: 35 },
  10.   { year: "1997", value: 7, count: 7 },
  11.   { year: "1998", value: 9, count: 1 },
  12.   { year: "1999", value: 13, count: 20 }
  13. ];
  15. const options = {
  16.   type: 'layer',
  17.   data,
  18.   sync: {
  19.     y: false,
  20.   },
  21.   encode: {
  22.     x: 'year',
  23.     y: 'value',
  24.   },
  25.   scale: {
  26.     series: {
  27.       range: ['a', 'b'] // 指定一共有两个序列
  28.     }
  29.   },
  30.   children: [
  31.     {
  32.       type: 'interval',
  33.       encode: {
  34.         series: 'a', // 指定是序列 a
  35.       }
  36.     },
  37.     {
  38.       type: 'interval',
  39.       encode: {
  40.         series: 'b', // 指定是序列 b
  41.       }
  42.     }
  43.   ]
  44. };

比例尺

分段映射

暂时用双轴图代替
image.png

  1. // https://github.com/antvis/G2/issues/2712
  3. const options = {
  4.   type: 'line',
  5.   data,
  6.   scale: {
  7.     y: {
  8.       domain: [0, 80, 100, 105], 
  9.       range: [0, 0.5, 0.5, 1]
  10.     }
  11.   },
  12.   encode: {
  13.     x: 'time',
  14.     y: 'value',
  15.     color: 'type'
  16.   }
  17. };

纹理

image.png

  1. // https://g2plot.antv.vision/zh/examples/plugin/pattern#bar-pattern
  3. const data = [
  4.   { type: '分类一', value: 27 },
  5.   { type: '分类二', value: 25 },
  6.   { type: '分类三', value: 18 },
  7.   { type: '分类四', value: 15 },
  8.   { type: '分类五', value: 10 },
  9. ];
  11. const options = {
  12.   type: 'interval',
  13.   data,
  14.   coordinate: [{type: 'transpose'}],
  15.   scale: {
  16.     color: {
  17.          palette: {type: 'pattern'},
  18.       range: [
  19.         {type: 'dot'},
  20.         {type: 'line'},
  21.         {type: 'square'},
  22.         {
  23.           type: 'line',
  24.           spacing: 6,
  25.           lineWidth: 2,
  26.           rotation: 90,
  27.         },
  28.         {
  29.           type: 'square',
  30.           size: 5,
  31.           padding: 2,
  32.           rotation: 45,
  33.           isStagger: false,
  34.         }
  35.       ]
  36.     }
  37.   },
  38.   encode: {
  39.     x: 'type',
  40.     y: 'value',
  41.     color: 'type' // 纹理也是通过 color 来指定
  42.   }
  43. }

不同颜色方案

可以参考这个里面的颜色方案：https://github.com/antvis/color-schema。这个地方可能就需要人来整理 antv 对颜色方法，沉淀到 color-schema 这个库中，这个库目前完全不能用。
image.png

  1. // https://g2.antv.vision/zh/examples/pie/basic#labelline
  3. const data = [
  4.   { item: '事例一', count: 40},
  5.   { item: '事例二', count: 21},
  6.   { item: '事例三', count: 17},
  7.   { item: '事例四', count: 13},
  8.   { item: '事例五', count: 9},
  9. ];
  11. const options = {
  12.   type: 'interval',
  13.   statistic: [{type: 'percentageY'}, {type: 'stackY'}],
  14.   coordinate: [{type: 'polar'}],
  15.   scale: {
  16.     color: {
  17.       // 换一种配色
  18.         // 等同于修改默认的 range
  19.            // 上面图表理论上会变颜色
  20.       palette: {type: 'monochromatic'}
  21.     }
  22.   },
  23.   ecnode: {
  24.     y: 'count',
  25.     color: 'item'
  26.   }
  27. }

智能颜色

使用这个库：https://github.com/antvis/smart-color，比如下面的从图片提取颜色的能力，但这个能力应该是通过插件的形式透出。

  1. import {createRuntime, createLibrary} from '@antv/g2';
  2. import {extract} from '@antv/smart-color';
  4. // 注册
  5. const ImagePalette = (options) => {
  6.   const { url } = options;
  7.   return () => {
  8.     return extract(url); // 返回一个颜色数组
  9.   }
  10. };
  12. ImagePalette.props = {
  13.   type: 'image',
  14. };
  16. const library = Object.assgin(createLibrary(), {'palette.image': ImagePalette});
  17. const runtime = createRuntime({container},library);
  20. const data = [
  21.   { item: '事例一', count: 40},
  22.   { item: '事例二', count: 21},
  23.   { item: '事例三', count: 17},
  24.   { item: '事例四', count: 13},
  25.   { item: '事例五', count: 9},
  26. ];
  28. const options = {
  29.   type: 'interval',
  30.   statistic: [{type: 'percentageY'}, {type: 'stackY'}],
  31.   coordinate: [{type: 'polar'}],
  32.   scale: {
  33.     color: {
  34.       palette: {type: 'image', url: 'xxx'}
  35.     }
  36.   },
  37.   ecnode: {
  38.     y: 'count',
  39.     color: 'item'
  40.   }
  41. }

视图复合

flex

image.png

  1. const options = {
  2.   type: 'flex',
  3.   direction: 'col',
  4.   data,
  5.   flex: [1, 1],
  6.   encode: {
  7.     x: 'time',
  8.     y: 'value;
  9.   },
  10.   children: [
  11.     {type: 'area'},
  12.     {
  13.       type: 'flex',
  14.       direction: 'col',
  15.       flex: [1, 1],
  16.       axis: false,
  17.       children: [
  18.         {type: 'interval'},
  19.         {type: 'area'}
  20.       ]
  21.     }
  22.   ]
  23. };

分面

矩形分面

默认同步 data domain
image.png

  1. // https://vega.github.io/vega-lite/examples/trellis_bar.html
  3. const options = {
  4.   type: 'rect',
  5.   data,
  6.   encode: {
  7.     y: 'gender',
  8.   },
  9.   // 如果没有下面的注释的话就不同同步 data domain
  10.   // 这样上面 y 轴的范围将是不一样的
  11.   // sync 的时候是给孩子增加一个 statistic 去 filter index
  12.   // 不 sync 的时候是给孩子一个 transform 去 filter data
  14.   // sync: {
  15.   //   data: false
  16.   // },
  17.   children: [
  18.     {
  19.       type: 'interval',
  20.       encode: {
  21.         x: 'age',
  22.         y: 'population'
  23.       }
  24.     }
  25.   ],
  26. };

带背景的矩形分面

image.png

  1. // https://observablehq.com/@observablehq/plot-facets?collection=@observablehq/plot
  3. const options = {
  4.   type: 'rect',
  5.   data,
  6.   encode: {
  7.     x: 'sex',
  8.     y: 'species'
  9.   },
  10.   children: [
  11.     {
  12.       type: 'layer',
  13.       encode: {
  14.         x: 'culmen_depth_mm',
  15.         y: 'culmen_length_mm'
  16.       },
  17.       children: [
  18.         {
  19.           type: 'point',
  20.           // 不过滤数据
  21.           // 实现背景非常的有效
  22.           filter: false 
  23.         },
  24.         {type: 'point'}
  25.       ]
  26.     }
  27.   ]
  28. };

矩阵分面

image.png

  1. // https://vega.github.io/editor/#/examples/vega/brushing-scatter-plots
  3. const response = await fetch('https://vega.github.io/editor/data/penguins.json');
  4. const data = response.json();
  6. // 会自动的生成一系列标准的配置
  7. const options = {
  8.   type: 'matrix',
  9.   data,
  10.   component: [
  11.     {type: 'legendCategory', channel: 'color', position: 'right'}
  12.   ],
  13.   fields: [
  14.     'Break Length (mm)', 
  15.     'Break Depth (mm)', 
  16.     'Flipper Length (mm)', 
  17.     'Body Mass (g)'
  18.   ],
  19.   children: [
  20.     {
  21.       type: 'point',
  22.       encode: {
  23.         // facet 元素会自动的生成该元素的 x 和 y encode
  24.         // 这个地方就不会 filter 了
  25.         color: 'Species'
  26.       }
  27.     }
  28.   ]
  29. };

带回调的矩阵分面

image.png

  1. // https://g2.antv.vision/zh/examples/facet/facet#matrix
  3. const options = {
  4.   type: 'matrix',
  5.   data,
  6.   fields: ['SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth'],
  7.   children: (props) => {
  8.     const {data, rowIndex, columnIndex, rowField, colField} = props;
  9.     if (rowIndex === columnIndex) {
  10.       return {
  11.         type: 'polygon',
  12.         data,
  13.         statistic: [
  14.           {type: 'binX'},
  15.           {type: 'summaryX', aggregate: 'count'}
  16.         ],
  17.         encode: {
  18.           y: 'count',
  19.           x: colField,
  20.           color: 'Species'
  21.         }
  22.       }
  23.     } else {
  24.       return {
  25.         type: 'point',
  26.         data,
  27.         statistic: [{type: 'stackY'}],
  28.         encode: {
  29.           x: rowField,
  30.           y: colField,
  31.           color: 'Species',
  32.         }
  33.       }
  34.     }
  35.   }
  36. };

树状分面

image.png

  1. // https://g2.antv.vision/zh/examples/facet/facet#tree-column
  3. const data = [
  4.   { gender: '男', count: 40, class: '一班', grade: '一年级' },
  5.   { gender: '女', count: 30, class: '一班', grade: '一年级' },
  6.   { gender: '男', count: 35, class: '二班', grade: '一年级' },
  7.   { gender: '女', count: 45, class: '二班', grade: '一年级' },
  8.   { gender: '男', count: 20, class: '三班', grade: '一年级' },
  9.   { gender: '女', count: 35, class: '三班', grade: '一年级' },
  10.   { gender: '男', count: 30, class: '一班', grade: '二年级' },
  11.   { gender: '女', count: 40, class: '一班', grade: '二年级' },
  12.   { gender: '男', count: 25, class: '二班', grade: '二年级' },
  13.   { gender: '女', count: 32, class: '二班', grade: '二年级' },
  14.   { gender: '男', count: 28, class: '三班', grade: '二年级' },
  15.   { gender: '女', count: 36, class: '三班', grade: '二年级' }
  16. ];
  18. const options = {
  19.   type: 'tree',
  20.   data,
  21.   fields: ['grade', 'class'],
  22.   // 会默认生成 edge 和 text geometry
  23.   // 会被包裹成一个 layer container
  24.   children: [
  25.     {
  26.       type: 'interval',
  27.       statistic: [{type: 'stackY'}],
  28.       encode: {
  29.         x: 'percent',
  30.         color: 'gender',
  31.       }
  32.     }
  33.   ]
  34. };

组件

标题

image.png

  1. const options = {
  2.   type: 'interval',
  3.   data,
  4.   encode: {
  5.     x: 'a',
  6.     y: 'b'
  7.   },
  8.   component: [
  9.     {type: 'title', content: 'A Simple Bar Chart'},
  10.   ],
  11. }

合并图例

image.png

  1. const options = {
  2.   type: 'point',
  3.   data,
  4.   encode: {
  5.     x: 'Flipper Lengh (mm)',
  6.     y: 'Body Mass (g)',
  7.     color: 'Species',
  8.     shape: 'Species'
  9.   }
  10. }

统计

选择

image.png

  1. const options = {
  2.     type: 'layer',
  3.   encode: {
  4.     x:'Date',
  5.     y:'Close',
  6.     series: 'Symbol'
  7.   },
  8.   children: [
  9.     {
  10.       type: 'text',
  11.       statistic: [{type: 'selectLast'}], 
  12.     },
  13.     {
  14.       type: 'line',
  15.       encode: {
  16.         color: 'Symbol'
  17.       }
  18.     }
  19.   ]
  20. };

总结

image.png

  1. // https://g2.antv.vision/zh/examples/component/label#line2
  3. const data = [
  4.   {
  5.     "date": "2012-09",
  6.     "buyin": 7228
  7.   },
  8.   // ...
  9. ]
  11. const options = {
  12.   type: 'layer',
  13.   data,
  14.   children: [
  15.     {
  16.       type: 'layer',
  17.       encode: {
  18.         x: 'date',
  19.         y: 'buyin'
  20.       },
  21.       children: [
  22.         { type: 'line' },
  23.         {
  24.           type: 'text',
  25.           encode: {
  26.             text: 'buyin'
  27.           }
  28.         }
  29.       ]
  30.     },
  31.     {
  32.       type: 'annotation.line', // 新的 line
  33.       statistic: [
  34.         {type: 'summaryY', aggregate: 'mean'}
  35.       ],
  36.       encode: {
  37.         y: 'mean'
  38.       }
  39.     }
  40.   ]
  41. }

分箱

image.png

  1. const options = {
  2.     type: 'polygon',
  3.   statistic: [
  4.     {type: 'bin', shape:'rect'},
  5.     {type: 'summary', aggregate: 'count'}
  6.   ],
  7.   encode: {
  8.     x: 'rainfall',
  9.     y: 'degdays',
  10.     // 这是一个 lazy encode
  11.     // 它的值是在 transform 完成之后才提取出来的
  12.     color: 'count'
  13.   }
  14. }

image.png

  1. const options = {
  2.   type: 'rect',
  3.   statistic: [
  4.     {type: 'binX'},
  5.     {type: 'summary', aggregate:'count'} // 可以省略 count
  6.   ],
  7.   encode: {
  8.     x: 'weight',
  9.     y: 'count',
  10.     color: 'sex',
  11.   }
  12. }

动画

更多案例：https://hanabi.data-viz.cn/templates?lang=zh-CN

条竞赛图

image.png
image.png

  1. // https://observablehq.com/@d3/bar-chart-race-explained
  3. const options = {
  4.   type: 'sequnce',
  5.   scale: {
  6.     timming: {
  7.       range: [0, 60 * 1000] // 一共执行时间是 1分钟
  8.     }
  9.   },
  10.   encode: {
  11.     timing: 'date'
  12.   },
  13.   children: [
  14.     {
  15.       type: 'text',
  16.       statistic: [
  17.         {type: 'selectLast'}
  18.       ],
  19.       scale: {
  20.       },
  21.       encode: {
  22.         key: 'date',
  23.         text: d => d.date.getFullYear(),
  24.         x: 1,
  25.         y: 1
  26.       },
  27.       style: {
  28.         textAnchor: 'end',
  29.         fontSize: 50
  30.       }
  31.     },
  32.     {
  33.       type: 'interval',
  34.       coordinate: [{type: 'transpose'}],
  35.       statistic: [
  36.         // 只展示前 12 条数据
  37.         {type: 'sort', by: 'value'},
  38.         {type: 'filterRank', count: 12} 
  39.       ],
  40.       encode: {
  41.         key: 'name',
  42.         x: 'name',
  43.         y: 'value',
  44.         color: 'category'
  45.       }
  46.     }
  47.   ]
  48. };

数据实时更新

https://www.highcharts.com.cn/demo/highcharts/dynamic-update/dark-unica

甘特图动画

Feb-21-2022 13-52-16.gif

  1. // https://canisjs.github.io/canis-editor/index.html?exmp=gantt_1
  3. const data = [
  4.   { eventStartTime: '', eventDurationTime: '', eventName: ''},
  5.   // ...
  6. ];
  8. const config = {
  9.   type: 'interval',
  10.   data,
  11.   encode: {
  12.     x: 'eventName',
  13.     y: ['eventStartTime', d => d.eventStartTime + d.eventDurationTime],
  14.     enterDelay: 'eventStartTime', // 动画属性也和通道绑定
  15.     enterDuration: 'eventDurationTime' // 动画属性也和通道绑定
  16.   },
  17. }

条形图动画（New）

Feb-23-2022 17-23-17.gif

  1. // https://canisjs.github.io/canis-editor/index.html?exmp=groupedBar_1
  3. const data = [
  4.   {year: '', sale: '', type: ''}
  5. ];
  7. const options = {
  8.   data,
  9.   encode: {
  10.     x: 'year',
  11.     y: 'sale',
  12.     color: 'type',
  13.     enterDelay: 'type',
  14.   },
  15.   animte: {
  16.     enterDuration: 100,
  17.     enterType: '',
  18.   }
  19. };

折线图尾随动画

Feb-18-2022 17-40-06.gif

  1. const options = {
  2.   type: 'layer',
  3.   data,
  4.   children: [
  5.     {
  6.       type: 'line',
  7.       encode: {
  8.         x: 'year',
  9.         y: 'value',
  10.         color: 'type'
  11.       },
  12.       animate: {
  13.         enterType: 'path-in',
  14.         enterDuration: 10 * 1000,
  15.       }
  16.     },
  17.     {
  18.       type: 'sequnce',
  19.       scale: {
  20.         timing: {
  21.           range: [0, 10 * 1000]
  22.         }
  23.       },
  24.       encode: {
  25.         timing: 'year'
  26.       },
  28.     }
  29.   ]
  30. };

简单可视化叙事

Feb-21-2022 10-54-50.gif
这个地方应该再加上坐标轴的动画。

  1. // https://echarts.apache.org/examples/zh/editor.html?c=scatter-aggregate-bar
  2. // https://www.w3schools.com/css/css3_animations.asp
  4. const data = [
  5.   { height: '', weight: '', sex: 'male', name: '' },
  6.   // ...
  7. ];
  9. const options = {
  10.   type: 'keyframe',
  11.   data,
  12.   iterationCount: 'infinite',
  13.   direction: 'alternate',
  14.   duration: '3000',
  15.   children: [
  16.     {
  17.       type: 'interval',
  18.       statistic: [
  19.         {type: 'groupX'},
  20.         {type: 'summary', aggregate: 'mean'}
  21.       ],
  22.       encode: {
  23.         x: 'sex',
  24.         y: 'mean',
  25.         color: 'blue',
  26.         key: 'sex'
  27.       }
  28.     },
  29.     {
  30.       type: 'point',
  31.       encode: {
  32.         x: 'height',
  33.         y: 'weight',
  34.         color: 'sex',
  35.         key: 'name',
  36.         groupKey: 'sex'
  37.       }
  38.     }
  39.   ],
  40. };

普通可视化叙事 (Todo)

Feb-18-2022 17-29-50.gif

  1. // https://stackblitz.com/github/pissang/echarts-www-landing-animation

复杂可视化叙事 (Todo)

  1. // https://bl.ocks.org/mbostock/1256572

单元可视化

泰坦尼克（一）

image.png
关键有几点：

  • 分 data domain 和 space domain
  • 兄弟节点是否共享（同步）data domain 和 space domain
  • 防止重叠的算法：pack
    1. const options = {
    2. type: 'rect',
    3. data,
    4. encode: {
    5.   x: 'Class',
    6.   y: 'Gender',
    7. },
    8. children: [
    9.   {
    10.     type: 'point',
    11.     ajust: [
    12.       {type: 'pack'} //  使用默认的大小 uniform 的
    13.     ],
    14.     encode: {
    15.       color: 'Survived',
    16.     },
    17.   }
    18. ]
    19. };

    泰坦尼克（二）

    image.png
    1. const options = {
    2. type: 'rect',
    3. encode: {
    4.   x: 'Class'
    5. },
    6. children: [
    7.   {
    8.     type: 'point',
    9.     adjust: [{type: 'pack'}],
    10.     encode: {
    11.       size: 'ticket',
    12.       color: 'Survived'
    13.     }
    14.   }
    15. ]
    16. };

    泰坦尼克（三）

    image.png
    1. // (b)
    2. const options = {
    3. type: 'rect',
    4. encode: {
    5.   x: 'Class',
    6. },
    7. sync: {
    8.   data: false // 不同步 data domain
    9. },
    10. children: [
    11.   {
    12.     type: 'point',
    13.     adjust: [{type: 'pack'}],
    14.     encode: {
    15.       color: 'Survived',
    16.     }
    17.   }
    18. ]
    19. };

    泰坦尼克（四）

    image.pngimage.png
    1. const options = {
    2. type: 'rect',
    3. encode: {
    4.   x: 'survived',
    5.   y: 'pclass',
    6. },
    7. children: [
    8.   {
    9.     type: 'rect',
    10.     encode: {
    11.       y: 'sex',
    12.     },
    13.     children: [
    14.       {
    15.         type: 'point',
    16.         adjust: [{ type: 'pack' }],
    17.         encode: {
    18.           color: 'survived',
    19.         }
    20.       }
    21.     ]
    22.   }
    23. ]
    24. }

    Sand Dance（Todo）

    交互

    有的交互修改数据，有的交互修改状态。

    框选

    image.png ```javascript // https://g2.antv.vision/zh/examples/interaction/brush#brush-filter-record

function Brush() { return () => ({ showEnable: [ { trigger: ‘plot:mouseenter’, action: ‘cursor:crosshair’ }, { trigger: ‘mask:mouseenter’, action: ‘cursor:move’ }, { trigger: ‘plot:mouseleave’, action: ‘cursor:default’ }, { trigger: ‘mask:mouseleave’, action: ‘cursor:crosshair’ }, ], start: [ { trigger: ‘plot:mousedown’, isEnable(context) { return !context.isInShape(‘mask’); }, action: [‘rect-mask:start’, ‘rect-mask:show’] }, { trigger: ‘mask:dragstart’, action: ‘rect-mask:moveStart’ } ], processing: [ { trigger: ‘plot:mousemove’, action: ‘rect-mask:resize’ }, { trigger: ‘mask:drag’, isEnable(context) { return context.isInPlot(); }, action: ‘rect-mask:move’ }, { trigger: ‘mask:change’, action: ‘element-sibling-filter-record:filter’ } ], end: [ { trigger: ‘plot:mouseup’, action: ‘rect-mask:end’ }, { trigger: ‘mask:dragend’, action: ‘rect-mask:moveEnd’ } ], rollback: [ { trigger: ‘dblclick’, action: [‘rect-mask:hide’, ‘element-sibling-filter-record:reset’] } ] }); }

Brush.props = { name: ‘brush’ };

const options = { type: ‘flex’, data, children: [ { type: ‘point’, encode: { x: ‘carat’, y: ‘price’, }, interaction: [ { type: ‘brush’} ], }, { type: ‘point’, encode: { x: ‘depth’, y: ‘x’ } } ] };

  1. <a name="Oyn2n"></a>
  2. ## 饼图转动
  3. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/418707/1646391932530-0682d41e-a527-49e4-8f46-1d9e370bc871.png#clientId=uf3befbf1-0c05-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=229&id=u6dec7038&margin=%5Bobject%20Object%5D&name=image.png&originHeight=458&originWidth=658&originalType=binary&ratio=1&rotation=0&showTitle=false&size=55102&status=done&style=none&taskId=u1fe6c3b1-4528-4e56-ac05-bf5af62a2df&title=&width=329)
  4. ```javascript
  5. // https://lark-assets-prod-aliyun.oss-accelerate.aliyuncs.com/lark/0/2021/gif/355/1636429547581-2de3143e-7a36-4775-bf2e-4dd6214576aa.gif?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1645519032&Signature=RO9%2F3LPuQkVWsRyCWrcufFtrUvQ%3D&response-content-disposition=inline
  6. // https://intranetproxy.alipay.com/skylark/lark/0/2021/gif/355/1636429547581-2de3143e-7a36-4775-bf2e-4dd6214576aa.gif
  8. // 注册一个新的 Action
  9. function Rotate() {
  10.   // ...
  11. }
  13. // 注册一个新的 Action
  14. function Select(options) {
  15.   const {x, y, eid, sid} = options;
  16.   return (runtime) => {
  17.     const context = runtime.getContext();
  18.     const view = getView(context, id); // 获得对应视图
  19.     const datum = getDatum(context, y); // 获得这个点的数据
  20.     const index = getIndex(context, datum); // 获得数据的索引
  22.     runtime.update([
  23.       sid, {index} // 更新对应的 idnex
  24.     ]);
  25.   }
  26. }
  28. const options = {
  29.   type: 'layer',
  30.   data,
  31.   children: [
  32.     {
  33.       type: 'interval',
  34.       id: '$interval',
  35.       data,
  36.       statistic: [{type: 'stackY'}],
  37.       coordainte: [{type: 'polar', innerRadius: 0.5}],
  38.       encode: {
  39.         y: 'value',
  40.         color: 'type',
  41.       },
  42.       interaction: [{
  43.         type: 'on',
  44.         event: 'element:drag',
  45.         action: [
  46.           {type: 'rotate'},
  47.           {type: 'select', x: '50%',  y: '10',  eid: '$interval', sid: '$index'}
  48.         ],
  49.       }],
  50.     },
  51.     {
  52.       type: 'layer',
  53.       statistic: [{type: 'selectIndex', id: '$index', index: 0}], // 定义一个 id
  54.       children: [
  55.           {
  56.           type: 'text',
  57.           encode: {
  58.             text: d => d.value + '人'
  59.           },
  60.         },
  61.         {
  62.           type: 'text',
  63.           encode: {
  64.             text: d => d.type
  65.           },
  66.           style: {
  67.             dy: '-1em'
  68.           }
  69.         }
  70.       ]
  71.     },
  72.     // 视图树里面也可以有简单的 G 元素
  73.     // 和几何元素的区别在于和数据没有关联
  74.     // 不是数据驱动的
  75.     {
  76.       type: 'lineG',
  77.       style: {
  78.            x1: '50%', y1: 0,
  79.         x2: '50%', y2: 10
  80.       }
  81.     }
  82.   ]
  83. }

鱼眼

68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f6d646e2f726d735f3032363636352f616674732f696d672f412a47356a49514c5251383651414141414141414141414141414152516e4151.gif

  1. // https://g2.antv.vision/zh/examples/point/bubble#bubble
  3. const options = {
  4.   type: 'point',
  5.   coordinate: [{type: 'fisheye', focusX: 0.5, focusY: 0.5, id: '$fisheye'}],
  6.   encode: {
  7.     x: 'GDP',
  8.     y: 'LifeExpectancy',
  9.     color: 'continent',
  10.     size: 'Population',
  11.   },
  12.   interaction: [
  13.     {
  14.       type: 'on', // 监听事件本身就是一个 interaction
  15.       trigger: 'plot:mousemove',
  16.       action: [{
  17.         // 说明返回值是配置的更新函描述
  18.         // 内部会重新调用 update 方法
  19.         type: 'runtime:update', 
  20.         handler: (e) => {
  21.           const {x, y} = e.target;
  22.           // 更新 id 为 $fisheye 的配置
  23.           return [
  24.            '$fisheye', { focusX: x, focusY: y }
  25.           ];
  26.         }
  27.       }]
  28.     }
  29.   ],
  30. };
  32. // on 的内部大概实现
  33. function On(options) {
  34.   const {trigger, action} = options
  35.   return () => {
  36.     return {
  37.       start: [{trigger, action}]
  38.     }
  39.   }
  40. }
  42. On.props = {
  43.   type: 'on'
  44. };

自定义

图形

水波图

image.png

  1. // https://g2plot.antv.vision/zh/examples/progress-plots/liquid#basic
  3. import {createRuntime, createLibrary} from '@antv/g2';
  5. const LiquidShape = (options) => {
  6.   const {shape} = options;
  7.   return (renderer, coordinate, attributes) => {
  8.     // draw liquid
  9.     // animation
  10.   }
  11. };
  13. LiquidShape.props = {
  14.   type: 'liquid',
  15.   metadata: {
  16.     geometry: 'interval',
  17.   },
  18. };
  20. const library = Object.assgin(createLibrary(), {'shape.liquild': LiquidShape});
  21. const runtime = createRuntime({container}, library);
  23. const options = {
  24.   type: 'layer',
  25.   data: [{value: 0.25}],
  26.   children: [
  27.     {
  28.       type: 'text',
  29.       encode: {
  30.         x: 0.5,
  31.         y: 0.5,
  32.         text: d => (d * 100).toFixed(2) + '%',
  33.       }
  34.     },
  35.     {
  36.       type: 'interval',
  37.       scale: {
  38.         y: {domain: [0, 1]}
  39.       },
  40.       encode: {
  41.         y: 'value',
  42.         shape: 'liquid'
  43.       }
  44.     }
  45.   ],
  46. };

连接不同视图

image.png

  1. // https://g2.antv.vision/zh/examples/case/pie#pie2