实现 ECharts 图表自适应

数据可视化的需求越来越多,图表自动生成技术也日渐成熟

ECharts

ECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制
官方文档: https://www.echartsjs.com/examples/

但是ECharts绘制图表时无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度为100px

所以设置width:100%对echarts是不起作用的

解决方法

思路：mounted时获取window对象的宽高，结合实际需要对window的宽高进行计算，然后将宽高经过计算赋给需要渲染图表的DOM节点，这样一来echarts节点渲染之前就获得了具体的宽高，大小就可以适应不同的屏幕了。

具体实现函数如下：

这样做有一个缺点，页面大小改变之后需要刷新，刷新之后图表自适应，不过实际使用中页面适配屏幕后大小改变的应用场景不多。

进阶版

echarts官方提供了获取图表宽高的API函数 getWidth() getHeight()，可以对其进行操作，在自适应的前提下，设置图表最小宽高

loadSheetChart() {
      var domSheetChart = this.$refs.sheetChart;
      this.sheetChart = echarts.init(domSheetChart);
      let width =
        this.sheetChart.getWidth() < 250 ? 250 : this.sheetChart.getWidth();
      let height = this.sheetChart.getHeight();
    },