技术栈：React框架下，引入echarts-for-react作图
需求内容：在浏览器窗口调整的时候图表跟随当前窗口的大小发生变化，参考下面的图片
正常情况下的图表.png
当浏览器窗口被缩放时.png
基本思路：
监听窗口的
resize事件，当图表小于一定值的时候设置xAxis.axisLabel.rotate属性。参考代码如下：
import ReactEcharts from 'echarts-for-react';
import React, { Component } from 'react';
// 在这个组件中resize不需要进行去抖动处理，echarts-for-react中已经封装好了
class Charts extends Component {
constructor(props) {
super(props);
this.handeleResize = this.handeleResize.bind(this);
}
componentDidMount() {
this.handeleResize();
window.addEventListener('resize', this.handeleResize);
}
handeleResize() {
let width = this.charts.echartsElement.clientWidth;
let { xAxis } = this.props.option;
if (xAxis) {
let { option } = this.props;
let { rotate } = xAxis.axisLabel;
if (width <= 317 && !rotate) {
option.xAxis.axisLabel = {
...xAxis.axisLabel,
rotate: 45,
}
this.charts.getEchartsInstance().clear();
this.charts.getEchartsInstance().setOption(option);
} else if (width > 317 && rotate) {
let { show, textStyle, interval } = option.xAxis.axisLabel;
option.xAxis.axisLabel = { show, textStyle, interval };
this.charts.getEchartsInstance().clear();
this.charts.getEchartsInstance().setOption(option);
}
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.handeleResize);
}
render() {
let { option } = this.props;
// width和height必须写在style中，否则不生效
return (
<ReactEcharts option={option} style={{ width: '100%', height: '100%' }}
ref={(node) => { this.charts = node }} />
)
}
}
export default Charts
关于我踩过的坑
- 一开始的想法是将
option放在state中存放，在resize的时候触发this.setState函数，更新option即可，但是事实证明他并不能生效。原因猜想是因为，上一个的option没有被清除，Echarts绘制出的canvas被React 的V-DOM当成相同的节点，所以即使在生命周期shouldComponentUpdate中进行判定，将其设置为true，图表也不会进行更新。 - 情况参考下图：原图缩小后横坐标展示不完全，参见变小.png，恢复正常尺寸，横坐标仍然不能完全展示，参见bug.png。
[图片上传中...(变小.png-3bf612-1545207813976-0)]
变小.png
bug.png
这时，在axisLabel属性中增加配置interval: 0强制显示所有标签。
参见官方文档
export const axisLabel = { // 坐标轴文本标签，详见axis.axisLabel
show: true,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#616471'
},
interval: 0
};
- 关于上面代码中注释提到的此组件不需要去抖动函数
是因为echarts-for-react本身依赖size-sensor插件，而该插件本身包含去抖动的相关函数
size-sensor.png
参看echarts-for-react的官方文档。
