当前位置：首页 > news >正文

实现 ECharts 图表自适应

news 来源：原创 2024/5/6 18:06:14

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

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节点渲染之前就获得了具体的宽高，大小就可以适应不同的屏幕了。

具体实现函数如下：

<template>
 <div id="main" ref="mychart"></div>
</template>
<script>
export default {
 mounted: function () {
            this.loadBugChart();
 },
 methods: {
  loadBugChart() {
                var domBugChart= this.$refs.mychart; //获取DOM节点
                //自适应宽高
                var bugChartContainer = function () {
                    if (domBugChart) {
                        domBugChart.style.width = 66+"vw";
                        domBugChart.style.height = 70+"vh";
                        // 相当于
                        // domBugChart.style.width = window.innerWidth * 0.66 + 'px';
                        // domBugChart.style.height = window.innerHeight * 0.7 + 'px';
                    }

                };
                bugChartContainer();
                var bugChart = echarts.init(domBugChart);
                let option = {...};
                bugChart.setOption(option);
            }
     }
}
</script>

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

进阶版

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();
    },

使用官方API resize ()

    barChartLoad() {
      const barChart = echarts.init(document.getElementById('barChart'));
      barChart.setOption(this.barChartOption);
      window.onresize = function() {
        barChart.resize();
      };
    },

推荐，使用起来方便简洁

转载自https://www.jianshu.com/p/c8e097cda407