How to use @antv/my-f2 - 10 common examples
To help you get started, we’ve selected a few @antv/my-f2 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
antvis / mini-program-f2-demos / pages / charts / selection-for-bar-chart / index.js View on Github 
.exec((res) => {
// // 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// // 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('intervalSelect');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
//console.log(res[0].width, res[0].height);
drawChart(canvas, res[0].width, res[0].height);
});
},.exec((res) => {
// // 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// // 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('panBar');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
//console.log(res[0].width, res[0].height);
drawChart(canvas, res[0].width, res[0].height);
});
},.exec((res) => {
// // 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// // 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('pieSelect');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
//console.log(res[0].width, res[0].height);
drawChart(canvas, res[0].width, res[0].height);
});
},function drawChart(canvas, width, height) {
var data = [
{ label: 'Mon.', type: 'series1', value: 2800 },
{ label: 'Mon.', type: 'series2', value: 2260 },
{ label: 'Tue.', type: 'series1', value: 1800 },
{ label: 'Tue.', type: 'series2', value: 1300 },
{ label: 'Wed.', type: 'series1', value: 950 },
{ label: 'Wed.', type: 'series2', value: 900 },
{ label: 'Thu.', type: 'series1', value: 500 },
{ label: 'Thu.', type: 'series2', value: 390 },
{ label: 'Fri.', type: 'series1', value: 170 },
{ label: 'Fri.', type: 'series2', value: 100 }
];
var chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data.reverse(), {
value: {
tickInterval: 750
}
});
chart.coord({
transposed: true
});
chart.tooltip({
custom: true, // 自定义 tooltip 内容框{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May.', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May.', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data);
chart.tooltip({
custom: true, // 自定义 tooltip 内容框
onChange(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.map(item => {
map[item.name] = Object.assign({}, item);
});
tooltipItems.map(item => {.exec((res) => {
// 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('rose');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
drawChart(canvas, res[0].width, res[0].height);
});
},.exec((res) => {
// 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('bar');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
drawChart(canvas, res[0].width, res[0].height);
});
},.exec((res) => {
// 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('dodgeBar');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
drawChart(canvas, res[0].width, res[0].height);
});
},.exec((res) => {
// 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('column');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
drawChart(canvas, res[0].width, res[0].height);
});
},.exec((res) => {
// 获取分辨率
const pixelRatio = my.getSystemInfoSync().pixelRatio;
// 获取画布实际宽高
const canvasWidth = res[0].width;
const canvasHeight = res[0].height;
this.setData({
width: canvasWidth * pixelRatio,
height: canvasHeight * pixelRatio
});
const myCtx = my.createCanvasContext('dbl');
myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大
const canvas = new F2.Renderer(myCtx);
this.canvas = canvas;
drawChart(canvas, res[0].width, res[0].height);
});
},
