解决echarts图表自适应宽度问题

907 阅读1分钟

echarts图表设置宽度为400px,但是显示的实际宽度为200px

问题

动态渲染多个echarts图表时候,搜索结果显示图表宽度和设置的宽度不一致

解决

在渲染图表之前提前设置好渲染图表的div的宽度

    import * as echarts from 'echarts';
    let arr = [
       {
        code:'a',
        name:'a'
        },
        {
            code:'b',
            name:'b'
        },
        {
            code:'c',
            name:'c'
        }
    ]
     // 显示错误示例
     {arr.map((item)=>{
      retuen  <div id={`main_${item.code}`} style={{width:400,height:400}}></div>
    })}
    // 解决
      {arr.map((item)=>{
          retuen <div style={{width:400,height:400}} key={item.code}>
          <div id={`main_${item.code}`} style={{width:400,height:400}}></div>
          </div>
    })}