项目中多多少少会遇到需要画图画表
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();
