「AntV」基于 AntV G2Plot 来实现一个 堆叠柱状图 加 折线图 的多图层案例

前言

最近研究了一下antv/g2的组合图例，并尝试做了一个不算太难的组合图，下面介绍一下整个图里的实现过程。

最终效果图

先来看一下最终的效果图

该图表有两部分组成，一部分是柱状图，准确说是堆叠的柱状图，一个柱体有多部分组成，没部分占据一定的高度。这样可以看出每部分在整体的大致比例。第二个图表是在堆叠的柱状图上有一个折线图，折线图与柱状图共用X轴，与Y轴。 X轴上每个具体的类目，Y轴是0-100的数值。

实现步骤

在看到需求后，一般人的做法就是寻找最合适的案例，在案例的基础上 稍稍修改。正所谓他山之石，可以攻玉。站在巨人的肩膀。这个时候就体现了一个图表库案例的丰富性。
我是基于该案例做的开发，https://g2plot.antv.antgroup.com/zh/examples/plugin/multi-view/#combo-plot。与我要做的案例很类似。

首先要实现一个多图层图表，就要使用Mix这个类。

在该类里，配置多个图表，有一些公用的配置被提取出来啦。如tooltip,legend,annotations。

多图层的配置api 文档 https://g2plot.antv.antgroup.com/api/advanced-plots/mix

在配置参数中， plots是一个很重要的配置参数，它是一个数组，每个元素，都代表一个图表。使用type表明图表的类型，使用options来配置该图表的配置参数。

完整代码

将一些代码复制到 案例的编辑器中，即可看到效果

import { Mix } from '@antv/g2plot';
const data = [
  { xCategory: '识记', type: '5-10%', value: [20, 52] },
  { xCategory: '识记', type: '25-50%', value: [52, 60] },
  { xCategory: '识记', type: '50-75%', value: [60, 62] },
  { xCategory: '识记', type: '75-90%', value: [62, 65] },
  { xCategory: '识记', type: '90-95%', value: [65, 87] },

  { xCategory: '理解', type: '5-10%', value: [30, 52] },
  { xCategory: '理解', type: '25-50%', value: [52, 60] },
  { xCategory: '理解', type: '50-75%', value: [60, 62] },
  { xCategory: '理解', type: '75-90%', value: [62, 65] },
  { xCategory: '理解', type: '90-95%', value: [65, 80] },

  { xCategory: '分析综合', type: '5-10%', value: [10, 52] },
  { xCategory: '分析综合', type: '25-50%', value: [52, 60] },
  { xCategory: '分析综合', type: '50-75%', value: [60, 62] },
  { xCategory: '分析综合', type: '75-90%', value: [62, 65] },
  { xCategory: '分析综合', type: '90-95%', value: [65, 99] },

  { xCategory: '鉴赏评价', type: '5-10%', value: [20, 52] },
  { xCategory: '鉴赏评价', type: '25-50%', value: [52, 60] },
  { xCategory: '鉴赏评价', type: '50-75%', value: [60, 62] },
  { xCategory: '鉴赏评价', type: '75-90%', value: [62, 65] },
  { xCategory: '鉴赏评价', type: '90-95%', value: [65, 95] },

  { xCategory: '表达应用', type: '5-10%', value: [15, 52] },
  { xCategory: '表达应用', type: '25-50%', value: [52, 60] },
  { xCategory: '表达应用', type: '50-75%', value: [60, 62] },
  { xCategory: '表达应用', type: '75-90%', value: [62, 65] },
  { xCategory: '表达应用', type: '90-95%', value: [65, 98] },
]

const cateMap = {
  '5-10%': { color: 'rgb(152,149,225)' },
  '25-50%': { color: 'rgb(165,193,225)' },
  '50-75%': { color: 'rgb(179,231,247)' },
  '75-90%': { color: 'rgb(155,232,220)' },
  '90-95%': { color: 'rgb(205,232,155)' },
}

const plot = new Mix('container', {
  appendPadding: 8,
  tooltip: { shared: true },
  syncViewPadding: true,
  legend: {
    layout: 'horizontal',
    position: 'top',
    marker: {
      style: {
        r: 7,
      },
    },
  },
  plots: [
    {
      type: 'column',
      options: {
        data,
        xField: 'xCategory',
        yField: 'value',
        isRange: true,
        seriesField: 'type',
        yAxis: {
          grid: null,
          nice: true,
          line: {
            style: {
              stroke: '#aaa',
            },
          },
        },
        color: ({ type }) => {
          return cateMap[type].color
        },
        meta: {
          value: {
            min: 0,
            max: 100,
            formatter(val) {
              return val + '%'
            },
          },
        },
        tooltip: true,
      },
    },
    {
      type: 'line',
      options: {
        data: [
          { date: '识记', ctype: '本校', value: 20 },
          { date: '理解', ctype: '本校', value: 30 },
          { date: '分析综合', ctype: '本校', value: 50 },
          { date: '鉴赏评价', ctype: '本校', value: 80 },
          { date: '表达应用', ctype: '本校', value: 95 },
        ],
        seriesField: 'ctype',
        point: {
          size: 5,
          shape: 'circle',
          style: {
            fill: 'white',
            stroke: '#5B8FF9',
            lineWidth: 2,
          },
        },
        lineStyle: {
          lineDash: [5, 5],
        },
        xField: 'date',
        yField: 'value',
        xAxis: false,
        yAxis: false,
        smooth: true,
        color: '#dddddd',
      },
    },
  ],
})

plot.render() 

踩的坑

• 第二个图表的legend 与第一个图表的 legend不能放到一列
  如下图
  
  这是两列。

• 尽量不要使用nice 属性，并且设置y轴的 min max值
  由于第一个图表 和第二个图表是共用Y轴，为了保证值的统一，两个图例的单位和起点，终点必须一致。
  否则可能会出现这样的情况，折线的点为64，但点却高于75。
  

• 第三个坑点就 两个图例的tooltip可能会遮挡，如下图
  

后记

基于最近使用antv g2的体验，稍微谈一下自己的感觉。

• 相比echarts，配置更加具有简单、易用
• 相比echarts，文档质量算不得优秀
• 案例只能说刚刚够用，并不算丰富

相对应的解决办法就是 ，开展一些活动，调动广大开发者的参与积极性，优化，完善文档。
提交更加丰富多彩的案例。