通过map方式循环渲染多张F2图表图表不显示

[rover95]

问题描述
使用f2图表插件,通过map循环渲染的方式无法渲染出图表,直接渲染正常;
已确认不是F2的问题,通过原生wxml方式循环渲染再引入,显示正常

复现步骤
[复现问题的步骤]

1. 项目中通过微信原生组件方式引入F2图表插件
2. 使用map循环渲染多张图表

//state
opts: [
        {
          opt: {
            onInit: pieChart
          }
        },
        {
          opt: {
            onInit: pieChart
          }
        }
      ]
//jsx
{this.state.opts.map((val,idx)=>{
        return <View key={idx} style='width:100vw;height:300px;background-color:#999'>
          <ff-canvas canvas-id={idx + 'p'} opts={val.opt}></ff-canvas>
        </View>;
      })}

下面是循环渲染组件lineChart.jsx完整代码

import Taro, { Component } from '@tarojs/taro';
import { View, Button, Text } from '@tarojs/components';
import F2 from '../../static/f2-canvas/lib/f2';


const map = {
  '芳华': '40%',
  '妖猫传': '20%',
  '机器之血': '18%',
  '心理罪': '15%',
  '寻梦环游记': '5%',
  '其他': '2%'
};
const data = [{
  name: '芳华',
  percent: 0.4,
  a: '1'
}, {
  name: '妖猫传',
  percent: 0.2,
  a: '1'
}, {
  name: '机器之血',
  percent: 0.18,
  a: '1'
}, {
  name: '心理罪',
  percent: 0.15,
  a: '1'
}, {
  name: '寻梦环游记',
  percent: 0.05,
  a: '1'
}, {
  name: '其他',
  percent: 0.02,
  a: '1'
}
];
let chart = null;
function pieChart(canvas, width, height) {
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });
  chart.source(data, {
    percent: {
      formatter: function formatter(val) {
        return val * 100 + '%';
      }
    }
  });
  chart.legend({
    position: 'right',
    itemFormatter: function itemFormatter(val) {
      return val + '  ' + map[val];
    }
  });
  chart.tooltip(false);
  chart.coord('polar', {
    transposed: true,
    radius: 0.85
  });
  chart.axis(false);
  chart.interval().position('a*percent').color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0']).adjust('stack').style({
    lineWidth: 1,
    stroke: '#fff',
    lineJoin: 'round',
    lineCap: 'round'
  }).animate({
    appear: {
      duration: 1200,
      easing: 'bounceOut'
    }
  });
  chart.render();
};


class LineChart extends Component {
  
  constructor(props) {
    super(props);
    this.state = { 
      opt0: {
        onInit: pieChart
      },
      opt2: {
        onInit: pieChart
      },
      opts: [
        {
          opt: {
            onInit: pieChart
          }
        },
        {
          opt: {
            onInit: pieChart
          }
        }
      ]
    };
    
  }
  
  componentWillMount(){}
  componentDidMount() {}
  componentWillReceiveProps (nextProps) {}
  componentWillUnmount () {}
  componentDidShow () {}
  componentDidHide () {}
  config = {
    usingComponents: {
      'ff-canvas': '../../static/f2-canvas/f2-canvas'
    }
  }
  render() {
    console.log(this.state.opt);
    
    return <View>
      <View  style='width:100vw;height:300px;background-color:#999'>
        <ff-canvas canvas-id='1p' opts={this.state.opts[0].opt}></ff-canvas>
      </View>
      {this.state.opts.map((val,idx)=>{
        return <View key={idx} style='width:100vw;height:300px;background-color:#999'>
          <ff-canvas canvas-id={idx + 'p'} opts={val.opt}></ff-canvas>
        </View>;
      })}
    </View>; 
  }
}

export default LineChart;

期望行为
正常渲染出两张图表

报错信息
无

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。
👽 Taro v1.3.13
Taro CLI 1.3.13 environment info:
System:
OS: Windows 10
Binaries:
Node: 8.9.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.5.1 - C:\Program Files\nodejs\npm.CMD

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.1.3.13]
• Node.js 版本 [e.g. v8.9.3]
• 报错平台 [weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @Chen-jj

[Chen-jj]

@rover95 提供一个完整的 demo 咯。

[rover95]

@Chen-jj 包太大传不了代码片段, 建了个分支
编译模式选择到 pages/demo/demo 页面下
图表封装到了 lineChart 组件下