最近在用 g2plot 写一个 chart 组件，需要显示一类柱状图、两类折线图，而其中折线图需要做到前半段为实线，而后半段为虚线。

g2plot 默认肯定是不会封装这种奇葩需求的了，只能通过组合图表来实现。具体可以参考 https://g2plot.antv.antgroup.com/examples/plugin/multi-view/#combo-plot 这个链接做多图层图表。下面是各图层的大概写法

        plots: [
          {
            type: 'column',
            options: {
              data: data1,
              isGroup: true,
              xField: 'x',
              yField: 'y',
              seriesField: 'legend'
            }
          },
          {
            type: 'line',
            options: {
              data: data21,
              smooth,
              xField: 'x',
              yField: 'y',
              seriesField: 'legend',
              meta: {
                y: {
                  sync: true
                }
              }
            }
          },
          {
            type: 'line',
            options: {
              data: data22,
              smooth,
              xField: 'x',
              yField: 'y',
              seriesField: 'legend',
              lineStyle: {
                opacity: maskOpacity,
                lineDash: [5, 5]
              },
              point: {
                size: 4
              },
              meta: {
                y: {
                  sync: true
                }
              }
            }
          },
          {
            type: 'line',
            options: {
              data: data31,
              smooth,
              xField: 'x',
              yField: 'y',
              seriesField: 'legend',
              meta: {
                y: {
                  sync: true
                }
              }
            }
          },
          {
            type: 'line',
            options: {
              data: data32,
              smooth,
              xField: 'x',
              yField: 'y',
              seriesField: 'legend',
              lineStyle: {
                opacity: maskOpacity,
                lineDash: [5, 5]
              },
              point: {
                size: 4
              },
              meta: {
                y: {
                  sync: true
                }
              }
            }
          }
        ]

数据大概是这样的：

const data1 = [{ x: '2022-09-01', y: 2351633, legend: 'DAU' }, { x: '2022-10-01', y: 333234, legend: 'DAU' }]
const data21 = [{ x: '2022-09-01', y: 9694006, legend: '流水' }]
const data22 = [{ x: '2022-10-01', y: 5652241, legend: '流水' }]
const data31 = [{ x: '2022-09-01', y: 7345232, legend: '利润' }]
const data32 = [{ x: '2022-10-01', y: 1153434, legend: '利润' }]

然后就遇到一个问题，虚线与实线无法对接上。原因应该是我的 sync 用法不太对。

image.png

解决方案

经过我多次尝试，发现了一种可行的方式。我感觉错位的问题可能是由于所有数据源都去 sync 同步 y，但是第一条线没有很好的同步。那么我就试着将上面的数据源组合起来。

const data = [
  { x: '2022-09-01', DAU: 3241323, 流水: 3252343, 流水预测: 4535435, 利润: 621234, 利润预测: 239433  },
  { x: '2022-10-01', DAU: 765435, 流水: 965900, 流水预测: 33562, 利润: 837645, 利润预测: 1235344},
]

然后修改 meta 的写法：

              meta: {
                流水: {
                  sync: true,
                  nice: true
                },
                流水预测: {
                  sync: '流水',
                  nice: true
                },
                利润: {
                  sync: '流水',
                  nice: true
                },
                利润预测: {
                  sync: '流水',
                  nice: true
                }
              }

如此，就可以做到每个图层都能同步到相同的数据了。