一、antv/f2

antv/f2是一个开箱即用的移动端可视化插件，支付宝的柱状图、饼状图和线性图部分用它来实现 antv/f2的文档

二、一些烦人的东西

1. 关于柱状图可以左右滑动问题

• 首先，文档的那个例子只能显示第一批次的数据，左右滑动会造成数据的缺失，目前我也不知道原因，知道的可以告知一下，例子可以看官方的codesandbox（如果数据错误，换一下数据请求的地址，或者自己定义一个data试一下）
• github上我看到有人提了相关的issue，文章发布时应该还未解决

---

第一种解决方法：

使用隐藏滑动的方式，把全部数据正常渲染出来，通过外层元素设置overflow属性去滚动显示

优点：很明显的，滑动效果很顺滑

缺点：需要渲染的时候计算canvas的总宽度

<div class="outer">
  <div class="inner">
    <canvas id="chart"></canvas>
  </div>
</div>

第二种解决方法：

官方的柱形图左右滑动有问题，但是折线图没有问题，具体看这 折线图例子，所以我们可以使用折线图的渲染，然后再渲染一遍柱形图的，虽然听来这个做法很有问题，下面给出主要的设置

优点：终于有了文档那样的效果

缺点：因为是折线图变形而来的，第一个和最后一个数据没法显示完全，滑动不流畅

  this.chart.source(this.data, {
    release: {
      min: 2010,
      max: 2015
    }
  });
  this.chart
    .line()
    .position('release*count')
    .style({
      lineWidth: 0   //设置折线的粗细为0
    })
  // 再渲染一次折线图后再渲染一次柱状图
  this.chart
    .interval()
    .position('release*count')
  this.chart.interaction('pan');
  this.chart.render();

2. 关于饼状图的label

饼状图可以用PieLabel去绘制饼状图的线条文本，但是如果数据太多的话就会出现一个很严重的渲染问题，那就是由于label太多导致渲染的图直接崩了，虽然PieLabel可以使用skipOverlapLabels属性不显示重叠的label，但是实际情况是，依然会有很多label渲染出问题。下图的顶部skipOverlapLabels生效了，左边崩了。

如果能设置线条的样式这个问题就可以解决，但是文档中，对线条的设置只接受对象类型的配置

lineStyle: { Object }, // 连接线的样式

所以这一点我也不知道怎么去解决，如果知道的麻烦告知一下，我看到支付宝确实可以部分绘制的。

那我只能拿刀去和产品商量一下，最终，渲染前n位数据，后面的数据有 ‘其他’ 来代替