微信小程序antv-f2的异步记载传值

示例中只有静态赋值，这个问题困扰了很久，最终结果

page外仍然定义initChart

let chart = null;

 

function initChart(canvas, width, height, F2) {

 

var pages = getCurrentPages();

var currPage = pages[pages.length - 1]

var data = currPage.data.myData

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 => {

const { name, value } = item;

if (map[name]) {

map[name].value = value;

}

});

legend.setItems(Object.values(map));

},

onHide() {

const legend = chart.get('legendController').legends.top[0];

legend.setItems(chart.getLegendItems().country);

}

});

 

chart.interval().position('月份*月均降雨量')

.color('name', ['#0079FF', '#D50000'])

.adjust({

type: 'dodge',

marginRatio: 0.05 // 设置分组间柱子的间距

});

chart.render();

return chart;

}

wxml中

<view class="container">

<ff-canvas id="mycanvas" canvas-id="column" opts="{{opts}}"></ff-canvas>

</view>

page内

 

data:{

opts: { lazyLoad: true },

}

onload方法中

异步回调方法内：

that.ecComponent = that.selectComponent('#mycanvas');

that.ecComponent.init(initChart);

 

//为了防止和其他广告渲染重叠，可以放在onready方法内