打开modal时echarts部分空白:
解决方法:使用ref绑定div,dom存在时再draw
<divid="quintuple"style={{width: "450px",height: "350px",}}ref={modalRef}/>const modalRef = (obj) => {if (obj) {drawChart(obj, [{value: [info.question || 10,info.theoretical_method || 10,info.practical_method || 10,info.effects || 10,info.conclusion || 10,],},]);}};function drawChart(dom, data) {let myChart = echarts.getInstanceByDom(dom); //有的话就获取已有echarts实例的DOM节点。if (myChart == null) {// 如果不存在,就进行初始化。myChart = echarts.init(dom);}//此处省略数据处理过程let option = {angleAxis: {startAngle: 0,},radiusAxis: {type: "value",min: 0,max: 100,z: 1,},polar: {radius: 100,},radar: {shape: "circle",radius: 100,color: "black",indicator: [{name: "Problem",max: 100,},{name: "Theoretical Method",max: 100,},{name: "Practical Method",max: 100,},{name: "Effects",max: 100,},{name: "Conclusion",max: 100,},],axisName: {color: "black",},axisNameGap: 20,},series: [{// name: "Five-dimensional analysis",type: "radar",data: data,areaStyle: {color: "#0068c9",opacity: 0.2,},label: {show: true,},},],};option && myChart.setOption(option);
}