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(); }, |
是我用了延迟加载的关系？
报这个错是因为外面的盒子没有设置宽高
<view class="box-height4">
<ff-canvas id="column-dom4" canvas-id="column" opts="{{ opts }}"></ff-canvas>
</view>
像我这里，一定要去设置box-height4的宽和高