antV遇到的坑

项目中多多少少会遇到需要画图画表

echarts用的比较多，最近接触的antV，实现上和echarts差不多，但是原理和配置还是相差挺大的

1. antV 的横纵坐标不支持同名

解决办法就是：用id做区分，在label的格式化中做处理，不然只会显示一个同名的坐标轴

<canvas id="mountNode"></canvas>

var Global = F2.Global;

var map = {

'1': '印尼',

'2': '美国',

'3': '中国',

'4': '中国'

}

  var data = [{

    country: '印尼',

    id: '1',

    population: 23489

  }, {

    country: '美国',

    id: '2',

    population: 29034

  }, {

    country: '中国',

    id: '3',

    population: 104970

  }, {

    country: '中国',

    id: '4',

    population: 131744

  }];

  var chart = new F2.Chart({

    id: 'mountNode',

    pixelRatio: window.devicePixelRatio

  });

  chart.source(data, {

    population: {

      tickCount: 5

    }

  });

  chart.coord({

    transposed: true

  });

  chart.axis('country', {

    line: Global._defaultAxis.line,

    grid: null,

    label: function label(text){

        var c  = {}

        c.text = map[text]

        return c

    }

  });

  chart.axis('population', {

    line: null,

    grid: Global._defaultAxis.grid,

    label: function label(text, index, total) {

      var textCfg = {};

      if (index === 0) {

        textCfg.textAlign = 'left';

      } else if (index === total - 1) {

        textCfg.textAlign = 'right';

      }

      return textCfg;

    }

  });

  chart.interval().position('id*population');

  chart.render();