示例中只有静态赋值，这个问题困扰了很久，最终结果
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方法内
