Ant-design 的 Chart 分面使用

Ant-design的 Chart 分面使用

主要是通过 facet() 方式来实现, 第一个参数是采取什么样的分面类型
我们这里用 rect , 这种模式下我们需要提供两个维度,组成一个矩阵
笔记中使用的数据如下

[{"periodDesc": "第一季度", "calculationResult": 0.07, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第一季度", "calculationResult": 0.07, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第一季度", "calculationResult": 0.19, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}
,{"periodDesc": "第一季度", "calculationResult": 0.19, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第一季度", "calculationResult": null, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第一季度", "calculationResult": null, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.13, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第二季度", "calculationResult": 0.13, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第二季度", "calculationResult": 0.07, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.13, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.13, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.03, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第三季度", "calculationResult": 0.03, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第三季度", "calculationResult": 0.16, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第三季度", "calculationResult": 0.16, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.03, "taxpayerNumber": "914300001429279950", "chartType": "上年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.03, "taxpayerNumber": "91500000747150503A", "chartType": "上年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.15, "taxpayerNumber": "91500000747150503A", "chartType": "本年上期"}
,{"periodDesc": "第四季度", "calculationResult": 0.15, "taxpayerNumber": "914300001429279950", "chartType": "本年上期"}
,{"periodDesc": "第四季度", "calculationResult": 0.24, "taxpayerNumber": "914300001429279950", "chartType": "本年同期"}
,{"periodDesc": "第四季度", "calculationResult": 0.24, "taxpayerNumber": "91500000747150503A", "chartType": "本年同期"}]

出这张图

我们使用 税号横向展开, 不同的数据表单类型纵向展开
对应的维度通过 fields 参数来配置.
比如使用 fields: ['taxpayerNumber', 'chartType'], 来配置, 结果就如上图所示, 按照这两个维度组成一个矩阵
源代码如下:

     // 这个data 就是上面的数据.这里为了代码简洁不做声明
		 const data = {}; 
		 // 创建一个 newChart, container制定的是一个组件的 ID, 
		 // 这个chart将会渲染到制定组件下面. 例如 <div id="chartDiv"></div>
		 const newChart = new Chart({
        container: 'chartDiv',
        forceFit: true,
        height: 300,
        padding: [80, 80, 80, 80], // 图上的边距
      });
			// 引入data
      newChart.source(data);
			// 设置列别名
      newChart.scale('calculationResult', {
        alias: '指标计算结果',
      });
			// 制定标题的位置
      newChart.axis('calculationResult', {
        title: {
          offset: 50
        }
      });
      // 创建分面
      newChart.facet('rect', {
        fields: ['taxpayerNumber', 'chartType'],
        eachView(view, facet) {
          // 使用柱状图
          view.interval()
            .position('periodDesc*calculationResult')
            .color('periodDesc')
            .label('calculationResult', {
              useHtml: true,
              offset: 5, // 文本距离图形的距离
              htmlTemplate: (text, item) => {
                const a = item.point;
                return '<spin>' + a.calculationResult + '</spin>';
              }
            });
        }
      });
			//  渲染分片
      newChart.render();

其中是实现主要是 eachView(view, facet) 实现的. facet 存储了这个分面的信息, 如果不同分面使用不同的图.
示例:

     newChart.facet('rect', {
        fields: ['taxpayerNumber', 'chartType'],
        eachView(view, facet) {
          if (facet.rowValue === "同比变动率" || facet.rowValue === "环比变动率") {
            // 使用.line() 画折线图
            view.line()
              .position('periodDesc*calculationResult')
              .label('calculationResult', {
                useHtml: true,
                offset: 5, // 文本距离图形的距离
                htmlTemplate: (text, item) => {
                  const a = item.point;
                  return '<spin>' + a.calculationResult + '</spin>';
                }
              });
          } else {
            view.interval()
              .position('periodDesc*calculationResult')
              .color('periodDesc')
              .label('calculationResult', {
                useHtml: true,
                offset: 5, // 文本距离图形的距离
                htmlTemplate: (text, item) => {
                  const a = item.point;
                  return '<spin>' + a.calculationResult + '</spin>';
                }
              });
          }
        }
      });

这里使用 facet.rowValue 来判断你要展示什么样的图, 这个是之前 fields 里面定义的第二个维度的值.
结果如下:

当行上面的维度是 同比变动率 的时候, 图就成了折线图.
更多具体信息可以参考官网:
3.x 版本, https://g2-v3.antv.vision/zh/docs/manual/tutorial/facet
4.x版本, https://g2.antv.vision/zh/docs/manual/tutorial/facet