源碼復制成功復制失敗全屏 復制 運行

F2 圖表組件庫 - AntV

var data = [{

amount: 20,

ratio: 0.1,

memo: '學習',

const: 'const'

}, {

amount: 100,

ratio: 0.5,

memo: '睡覺',

const: 'const'

}, {

amount: 10,

ratio: 0.05,

memo: '吃飯',

const: 'const'

}, {

amount: 30,

ratio: 0.15,

memo: '講禮貌',

const: 'const'

}, {

amount: 10,

ratio: 0.05,

memo: '其他',

const: 'const'

}, {

amount: 20,

ratio: 0.1,

memo: '運動',

const: 'const'

}, {

amount: 10,

ratio: 0.05,

memo: '暫無備注',

const: 'const'

}];

var chart = new F2.Chart({

id: 'mountNode',

pixelRatio: window.devicePixelRatio

});

chart.source(data);

chart.coord('polar', {

transposed: true,

innerRadius: 0.4,

radius: 0.75

});

chart.axis(false);

chart.legend({

position: 'bottom',

align: 'center'

});

chart.tooltip(false);

chart.guide().html({

position: ['50%', '50%'],

html: '

});

// 配置文本餅圖

chart.pieLabel({

sidePadding: 75,

label1: function label1(data) {

return {

text: data.memo,

fill: '#808080'

};

},

label2: function label2(data) {

return {

fill: '#000000',

text: '$' + data.amount.toFixed(2),

fontWeight: 500,

fontSize: 10

};

}

});

chart.interval().position('const*ratio').color('memo', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273']).adjust('stack');

chart.render();

// 繪制內陰影

var frontPlot = chart.get('frontPlot');

var coord = chart.get('coord'); // 獲取坐標系對象

frontPlot.addShape('sector', {

attrs: {

x: coord.center.x,

y: coord.center.y,

r: coord.circleRadius * coord.innerRadius * 1.2, // 全半徑

r0: coord.circleRadius * coord.innerRadius,

fill: '#000',

opacity: 0.15

}

});

chart.get('canvas').draw();

總結

以上是生活随笔為你收集整理的antv图例出现分页_带图例、文本的饼图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。