echarts图表自适应,容器宽度设置为百分数,但是图表显示不全,缩到一起

本文探讨了ECharts图表在不同Tab间切换时显示不全的问题,并提供了具体的解决方案。通过分析ECharts源码,揭示了图表宽度计算错误的原因,并给出了设置图表固定宽度的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文章转载:https://blog.youkuaiyun.com/liuminyi1987/article/details/79653737

 

问题如下:在tab切换的时候发现第二个tab页面的图表显示不全,缩到了一起。

添加window自适应方法不管用,如下:

 
  1. mychart.setOption(option);

  2. $(window).resize(function() { //重置容器高宽 mychart.resize(); });

各种搜索这个问题,找到了方法。

先借鉴大牛解释出现这个问题的原因:

 

查了一下echarts源码,发现了这个

Painter.prototype._getWidth = function() {
        var root = this.root;
        var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
        return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };

echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px。

我实际按F12看的时候也看到上面图的宽度是100px。

基于以上原因,参考大牛的解决方法,是要给这个图固定宽度。下面贴部分代码:

 


PS:根据实际需要选取其他div宽度进行设置。

    还可同时设置宽度、高度

var width = $("参考图ID").width();
var height = $("参考图ID").height();
$("#目标图ID").css("width", width).css("height", height);

 

 

例子:

var conTrendWidth = $('.dashboardTotal1').width()*0.98
$("#conTrendChart").css('width',conTrendWidth);

### 使用 `useResizeObserver` 实现 ECharts 图表自适应 以下是基于 React 和 Vue 的两种方式,展示如何通过 `useResizeObserver` 来实现 ECharts 图表自适应。 #### React 示例代码 在 React 中可以利用 `useEffect` 和 `useResizeObserver` 定制化一个图表组件: ```javascript import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; import useResizeObserver from './useResizeObserver'; const Chart = ({ data }) => { const chartRef = useRef(null); const dimensions = useResizeObserver(chartRef); useEffect(() => { if (chartRef.current) { const chartInstance = echarts.init(chartRef.current); const options = { xAxis: {}, yAxis: {}, series: [{ type: 'bar', data, }], }; chartInstance.setOption(options); return () => { chartInstance.dispose(); }; } }, [data, dimensions]); return ( <div ref={chartRef} style={{ width: '100%', height: '400px', border: '1px solid #ccc' }} /> ); }; export default Chart; ``` 此代码片段展示了如何使用 `useResizeObserver` 动态调整容器尺寸并触发 ECharts 更新[^1]。 --- #### Vue 示例代码 对于 Vue 用户,可以通过组合式 API 结合 `@vueuse/core` 提供的工具函数完成相同功能: ```javascript <template> <div ref="ecartRef" class="chart-container"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; import { useResizeObserver } from '@vueuse/core'; import * as echarts from 'echarts'; const ecartRef = ref(null); let chart; onMounted(() => { if (ecartRef.value) { chart = echarts.init(ecartRef.value); const option = { tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "跟鞋", "袜子"] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; chart.setOption(option); } // 设置 ResizeObserver useResizeObserver(ecartRef.value, () => { if (chart && chart.resize) { chart.resize(); } }); }); onBeforeUnmount(() => { if (chart && chart.dispose) { chart.dispose(); } }); </script> <style scoped> .chart-container { width: 100%; height: 400px; border: 1px solid #ddd; } </style> ``` 这段代码实现了当父级 DOM 尺寸发生变化时自动调用 `chart.resize()` 方法更新图表显示[^2]。 --- ### 关键点说明 - **动态监听**:无论是 React 还是 Vue 版本,核心逻辑均依赖于 `ResizeObserver` 对目标节点的变化进行实时监控。 - **资源释放**:为了防止内存泄漏,在组件卸载前需销毁对应的 ECharts 实例以及取消必要的观察器绑定。 - **样式适配**:确保图表容器具有明确的度和宽度定义(如固定度或百分比),以便正确计算布局。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值