ECharts 响应式（自适应）

ECharts 默认会 自动适应容器大小，但在不同设备、窗口大小变化时，我们可以通过特定方法 优化图表的响应式表现。

1. ECharts 默认自适应

ECharts 默认 会随容器大小变化进行自适应调整，因此只需确保：

  • 容器具有动态大小（如 width: 100%, height: auto）
  • 不手动固定 canvas 尺寸

示例：

<div id="chart-container" style="width: 100%; height: 400px;"></div>
<script>
    var chart = echarts.init(document.getElementById('chart-container'));

    var option = {
        title: { text: 'ECharts 自适应示例' },
        xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: {},
        series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
    };

    chart.setOption(option);
    window.addEventListener('resize', function () {
        chart.resize(); // 监听窗口变化，重绘图表
    });
</script>

📌 关键点

  • window.addEventListener('resize', chart.resize); 监听窗口变化，调整图表尺寸
  • 确保 div 具有宽度和高度
  • 不建议使用固定 px 宽度，使用 % 或 vh/vw 适配

2. CSS 控制自适应

可以使用 flexbox 或 grid 让 ECharts 自适应布局。

2.1 父容器 flex 适配

<style>
    .chart-container {
        display: flex;
        width: 100%;
        height: 50vh; /* 高度随屏幕变化 */
    }
</style>
<div id="chart-container" class="chart-container"></div>

📌 适用于：

  • 多个图表自适应排列
  • 宽高比例随屏幕调整

2.2 grid 布局

.chart-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 50vh;
}

📌 适用于：

  • 多个图表均匀排列
  • 移动端自适应

3. 动态调整字体大小

在 小屏幕 设备上，需要调整 字体大小、间距，避免拥挤。

方法：getOption() 读取图表尺寸，并调整字体

window.addEventListener('resize', function () {
    var width = chart.getWidth();
    var newFontSize = width < 500 ? 12 : 16; // 小屏幕减小字体

    chart.setOption({
        title: { textStyle: { fontSize: newFontSize } },
        xAxis: { axisLabel: { fontSize: newFontSize - 2 } },
        yAxis: { axisLabel: { fontSize: newFontSize - 2 } }
    });
});

📌 效果

  • 小屏幕 自动缩小字体
  • 大屏幕 保持清晰度

4. 适配不同设备

4.1 判断移动端

在 移动端 可能需要不同的 option 配置：

var isMobile = window.innerWidth < 768; // 判断是否是移动端

var option = {
    title: { text: '自适应图表', textStyle: { fontSize: isMobile ? 14 : 18 } },
    tooltip: { trigger: 'axis' },
    legend: { show: !isMobile },  // 移动端隐藏图例
    xAxis: { axisLabel: { fontSize: isMobile ? 10 : 14 } },
    yAxis: { axisLabel: { fontSize: isMobile ? 10 : 14 } },
    series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }]
};
chart.setOption(option);

📌 适用场景

  • 移动端适配字体大小
  • 隐藏多余元素（如 legend 图例）

5. 在 flex 容器中保持等比缩放

当 ECharts 需要在 flex 布局 中 等比缩放，可以使用 aspectRatio（宽高比）：

.chart-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例 */
    position: relative;
}
.chart-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

📌 效果

  • 确保 ECharts 始终按比例缩放
  • 不会因 flex 影响变形

6. 结合 mediaQuery 适配

ECharts 支持 mediaQuery 动态调整配置：

var option = {
    title: { text: '自适应 ECharts' },
    grid: { bottom: '10%' },
    series: [{ type: 'line', data: [1, 2, 3, 4, 5] }],
    media: [
        { // 小屏幕（< 600px）
            query: { maxWidth: 600 },
            option: { grid: { bottom: '20%' }, series: [{ lineStyle: { width: 1 } }] }
        },
        { // 大屏幕（> 1200px）
            query: { minWidth: 1200 },
            option: { grid: { bottom: '5%' }, series: [{ lineStyle: { width: 3 } }] }
        }
    ]
};
chart.setOption(option);

📌 作用

  • 不同设备动态调整样式
  • 适用于 PC、移动端适配

7. Vue/React 中 ECharts 自适应

在 Vue 或 React 中，ECharts 必须在 mounted/useEffect 中初始化。

Vue 版

<template>
    <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    mounted() {
        this.chart = echarts.init(this.$refs.chartContainer);
        this.chart.setOption({ /* 配置项 */ });
        window.addEventListener('resize', () => this.chart.resize());
    }
};
</script>

React 版

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const ResponsiveChart = () => {
    const chartRef = useRef(null);

    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        chart.setOption({ /* 配置项 */ });
        window.addEventListener('resize', () => chart.resize());

        return () => window.removeEventListener('resize', () => chart.resize());
    }, []);

    return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};
export default ResponsiveChart;

8. 响应式优化总结

方法作用适用场景
chart.resize()窗口变化时调整大小所有场景
CSS width: 100%确保容器自适应网页自适应
getOption() 动态调整字体根据屏幕调整大小移动端优化
mediaQuery适配不同设备复杂适配
Vue/React 监听 resize保证组件响应式前端框架

🚀 你在哪种场景下需要优化 ECharts 响应式？