基于 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可能会遮挡，如下图