react使用echarts折线图问题记录

react项目中使用echarts参考https://blog.csdn.net/weixin_44003190/article/details/90676785

1.控制台报错：TypeError: Cannot read property ‘init‘ of undefined
解决：导入echarts时使用： import * as echarts from 'echarts'代替import echarts from 'echarts'

2.页面同时会展示多张图表的时候，需要给每个图表容器添加唯一ID，否则会导致图表不展示。（通过生UUID来保证唯一性）

3.控制台警告 textStyle hierarchy in name has been removed since 4.0.
解决：方案一：https://blog.csdn.net/weixin_50541501/article/details/114591076
方案二，直接引入echarts提供的主题配置，并按需修改

4. 折线图组件中如果涉及同时获取多张图表数据，通过前端交互切换时，需要在组件中使用componentWillReceiveProps来更新数据。仅用componentDidMount会导致切换时（页面不刷新）图片不更新。

5. 对折线图容器设置宽度可以改变折线图的宽度

 <div ref="chartCantainer" style="width: 100%;height:238px;"></div>

如果希望折线图能够自适应浏览器窗口的宽度，可以监听窗口大小变化，调用echarts提供的resizeAPI来控制图表大小。

    window.onresize = () => {
    //myChart为图表实例
      if (this.myChart) {
        this.myChart.resize()
      }
    }