Echarts在不同屏幕分辨率下不同配置

技术栈：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 (
             { this.charts = node }} />
        )
    }
}

export default Charts

关于我踩过的坑

1. 一开始的想法是将option放在state中存放，在resize的时候触发this.setState函数，更新option即可，但是事实证明他并不能生效。原因猜想是因为，上一个的option没有被清除，Echarts绘制出的canvas被React 的V-DOM当成相同的节点，所以即使在生命周期shouldComponentUpdate中进行判定，将其设置为true，图表也不会进行更新。
2. 情况参考下图：原图缩小后横坐标展示不完全，参见变小.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
};

3. 关于上面代码中注释提到的此组件不需要去抖动函数
   是因为echarts-for-react本身依赖size-sensor插件，而该插件本身包含去抖动的相关函数
   
   size-sensor.png
   
   参看echarts-for-react的官方文档。