react适应echarts需要注意的点，1.多个echarts图表自适应，2.echarts y轴处理 y轴只显示名字 高亮需要更多信息,3.echarts 自定义高亮弹框

1.自适应处理

问题: 多个echarts图表自适应

1.获取图表id
2.生成图表
let myChar = echarts.init(document.getElementById(‘char’));
myChar.setOption(option, true);
3.监听窗口变化(自适应)
componentDidMount(){
window.addEventListener(‘resize’, this.handleResize);
}
3.使用onresize 不同的echarts
handleResize = () => {
window.onresize = function() {
docTypeMyChart?.resize();
docStaticMyChart?.resize();
docContentMyChart?.resize();
};
};
//卸载
componentWillUnmount() {
window.removeEventListener(‘resize’, this.handleResize);
}

2.echarts y轴处理 y轴只显示名字 高亮需要更多信息

//处理y轴数据
let yData =
res?.map((v) => {
return ${v?.userName}(${v?.email ? v.email : v.mobile});
}) || [];

//在表格配置Y轴时使用axisLabel和formatter 进行改变
let option ={
yAxis: {
type: ‘category’,
data: yData || [],
axisLabel: {
formatter: function(value) {
let before = value.split(‘(’)[0];
return before;
},
},
},
}

3.echarts 自定义高亮弹框 tooltip下formatter

(trigger 判断高亮是否用节点一个一个显示) item–‘节点’

let option = {
tooltip: {
trigger: ‘item’,
formatter: function(param) {
let text = param.data.name;
if (text.length < 8) {
return text + ‘\n’ + param.data.value;
} else {
return text.substring(0, 8) + ‘…’ + ‘\n’ + param.data.value;
}
},
},
}

4.关于图表上下左右间距 在option下配置–grid

grid: {
top: ‘5%’,
left: ‘3%’,
right: ‘8%’,
bottom: ‘7%’,
containLabel: true,
},