这个函数对布局有特别大好处啊，比如左边容器 width:calc(50%-2rpx) 右侧元素 width:50%,中间元素flex:1

[代码]initChart_cate(canvas, width, height) { [代码][代码]// 使用 F2 绘制图表[代码][代码]    [代码][代码]let cur_cate_order = [代码][代码]this[代码][代码].data.cur_cate_order;[代码][代码]    [代码][代码]let data = [];[代码][代码]    [代码][代码]for[代码][代码](let i = 0; i < cur_cate_order.length; i++){[代码][代码]      [代码][代码]let name = cur_cate_order[i].cate;[代码][代码]      [代码][代码]if[代码][代码](name.length > 4){[代码][代码]        [代码][代码]name = name.slice(0,4) + [代码][代码]'...'[代码][代码];[代码][代码]      [代码][代码]}[代码][代码]      [代码][代码]data.push({[代码][代码]        [代码][代码]label:name,[代码][代码]        [代码][代码]type:[代码][代码]'销售额'[代码][代码],[代码][代码]        [代码][代码]value:cur_cate_order[i].total_price[代码][代码]      [代码][代码]},{[代码][代码]        [代码][代码]label:name,[代码][代码]        [代码][代码]type:[代码][代码]'成本'[代码][代码],[代码][代码]        [代码][代码]value:cur_cate_order[i].total_cost[代码][代码]      [代码][代码]})[代码][代码]     [代码] [代码]    [代码][代码]};[代码][代码]  [代码] [代码]    [代码][代码]var[代码] [代码]chart_cate = [代码][代码]new[代码] [代码]F2.Chart({[代码][代码]      [代码][代码]el: canvas,[代码][代码]      [代码][代码]width,[代码][代码]      [代码][代码]height[代码][代码]    [代码][代码]});[代码][代码]  [代码] [代码]    [代码][代码]chart_cate.source(data.reverse(), {[代码][代码]      [代码][代码]value: {[代码][代码]        [代码][代码]tickCount: 5[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]chart_cate.coord({[代码][代码]      [代码][代码]transposed: [代码][代码]true[代码][代码]    [代码][代码]});[代码][代码]  [代码] [代码]    [代码][代码]chart_cate.tooltip({[代码][代码]      [代码][代码]custom: [代码][代码]true[代码][代码], [代码][代码]// 自定义 tooltip 内容框[代码][代码]      [代码][代码]onChange: [代码][代码]function[代码] [代码]onChange(obj) {[代码][代码]        [代码][代码]var[代码] [代码]legend = chart_cate.get([代码][代码]'legendController'[代码][代码]).legends.top[0];[代码][代码]        [代码][代码]var[代码] [代码]tooltipItems = obj.items;[代码][代码]        [代码][代码]var[代码] [代码]legendItems = legend.items;[代码][代码]        [代码][代码]var[代码] [代码]map = {};[代码][代码]        [代码][代码]legendItems.map([代码][代码]function[代码][代码](item) {[代码][代码]          [代码][代码]map[item.name] = F2.Util.mix({}, item);[代码][代码]        [代码][代码]});[代码][代码]        [代码][代码]tooltipItems.map([代码][代码]function[代码][代码](item) {[代码][代码]          [代码][代码]var[代码] [代码]name = item.name;[代码][代码]          [代码][代码]var[代码] [代码]value = item.value;[代码][代码]          [代码][代码]if[代码] [代码](map[name]) {[代码][代码]            [代码][代码]map[name].value = value;[代码][代码]          [代码][代码]}[代码][代码]        [代码][代码]});[代码][代码]        [代码][代码]legend.setItems(Object.values(map));[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]onHide: [代码][代码]function[代码] [代码]onHide() {[代码][代码]        [代码][代码]var[代码] [代码]legend = chart_cate.get([代码][代码]'legendController'[代码][代码]).legends.top[0];[代码][代码]        [代码][代码]legend.setItems(chart_cate.getLegendItems().country);[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]chart_cate.axis([代码][代码]'label'[代码][代码], {[代码][代码]      [代码][代码]line: F2.Global._defaultAxis.line,[代码][代码]      [代码][代码]grid: [代码][代码]null[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]chart_cate.axis([代码][代码]'value'[代码][代码], {[代码][代码]      [代码][代码]line: [代码][代码]null[代码][代码],[代码][代码]      [代码][代码]grid: F2.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_cate.interval().position([代码][代码]'label*value'[代码][代码]).color([代码][代码]'type'[代码][代码]).adjust({[代码][代码]      [代码][代码]type: [代码][代码]'dodge'[代码][代码],[代码][代码]      [代码][代码]marginRatio: 1 / 32[代码][代码]    [代码][代码]});[代码][代码]    [代码][代码]chart_cate.render();[代码][代码]  [代码][代码]},[代码][图片] 是我用了延迟加载的关系？ [图片] [图片]