Echarts在微信小程序苹果设备环境下渲染问题

# Echarts在微信小程序苹果设备环境下渲染问题

# 先说一下详细问题吧：

一个伸缩列表组件，点击打开item，item内的echarts图渲染显示异常，会缩的很小

TIP

本页面是内嵌在小程序内的web-view的，React + echarts

另外：

WARNING

仅在苹果微信小程序端发现问题，chrome、safari、安卓、苹果微信浏览器没有问题

# 解决办法：

经过排查，怀疑是伸缩列表在display切换的时候，echarts没有正确响应宽度变化导致的渲染异常，看代码：

# render

render(){
  <Accordion className='radarM-stock__menu' as={Menu} vertical>
      {
        items.map((item, index) => (
          <Menu.Item key={index}>
            <Accordion.Title
              index={index}
              active={activeIndex === index}
              content={(
                <span>标题</span>
              )}
              onClick={this.handleClick}/>
            <Accordion.Content
              active={activeIndex === index}
              content={
                this.renderListItemContent(item, index)
              }/>
          </Menu.Item>
        ))
      }
  </Accordion>
}

# renderListItemContent函数

renderListItemContent(item, index) {
  switch (item) {
      case "财务操纵":
        return(
          <React.Fragment>
            <div>财务操纵图</div>
            <ReactEcharts
                className="echarts"
                option={charts['财务操纵']}
                style={{
                  width: '100%',
                  height: '17rem',
                  margin: '2rem auto 0'
                }}/>
          </React.Fragment>
        );
  }
}
// 有很多种switch item ，这里就只写了一个

代码大概就是这样，我们可以看到，以上的逻辑，其实在代码执行时， echarts已经渲染好了，我们要做的就是延迟渲染，在点击列表项时，再让echarts进行渲染。话不多说，看代码：

renderListItemContent(item, index) {
  const { activeIndex } = this.state;
  switch (item) {
      case "财务操纵":
        return(
          <React.Fragment>
            <div>财务操纵图</div>
            {
              // 根据state控制是否渲染加载
              activeIndex === index && 
              <ReactEcharts
                className="echarts"
                option={charts['财务操纵']}
                style={{
                  width: '100%',
                  height: '17rem',
                  margin: '2rem auto 0'
                }}/>
            }
          </React.Fragment>
        );
  }
}

这样echarts就会在激活当前列表项display时才会加载echarts，而且这样每次打开会发现echarts的图都会有动画效果。

OK,fine!