快速开始

这是一个为 ECharts 图表提供自适应功能的插件。它可以监听一个元素的大小变化，并自动调整 ECharts 图表的大小，以确保图表在不同设备和屏幕尺寸下都能正常显示。

特性

• 自适应调整：自动监听容器大小的变化，调整图表尺寸。
• 灵活配置：支持自定义调整参数，以满足特定需求。
• 简单易用：通过简单的配置即可实现图表的自适应功能。

安装模块

npm

npm install echarts-adaptive-plugin

yarn

yarn add echarts-adaptive-plugin

pnpm

pnpm add echarts-adaptive-plugin

使用示例

js

import * as echarts from 'echarts';
import { echartsAdaptive } from 'echarts-adaptive-plugin';

// 初始化 ECharts 实例
const echartsInstance = echarts.init(
  document.getElementById('your-chart-container')
);

// 获取需要监听大小变化的元素
const monitorContent = document.getElementById('your-chart-container');

// 确保 monitorContent 不为空
if (!monitorContent) {
  throw new Error(
    '监视内容的元素未找到，请确保元素ID正确且已经被加载到DOM中。'
  );
}

// 配置自适应插件
const destroyAdaptive = echartsAdaptive({
  echartsInstance,
  monitorContent: document.getElementById('your-chart-container'),
  handle: ({ echartsInstance, monitorContent }) => {
    // 可以在这里返回自定义的调整参数
    return {};
  }
});

// 当不再需要自适应功能时，可以调用返回的函数销毁监听
// destroyAdaptive();

vue

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

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';
import { echartsAdaptive } from 'echarts-adaptive-plugin';

const resizeContainer = ref(null);
const chartContainer = ref(null);
let destroyAdaptive;

onMounted(() => {
  if (chartContainer.value) {
    const echartsInstance = echarts.init(chartContainer.value);
    const option = {
      /* 你的ECharts配置项 */
    };
    echartsInstance.setOption(option);

    // 使用echartsAdaptive来自适应调整大小，并保留返回的销毁函数
    destroyAdaptive = echartsAdaptive({
      echartsInstance,
      monitorContent: resizeContainer.value // 监听 resizeContainer 尺寸变化
    });
  }
});

onBeforeUnmount(() => {
  if (destroyAdaptive) {
    destroyAdaptive(); // 调用返回的函数来停止监听
  }
});
</script>

react

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import { echartsAdaptive } from 'echarts-adaptive-plugin';

const MyEChartsComponent = () => {
  const chartRef = useRef(null); // 用于引用图表容器的DOM元素
  const echartsInstanceRef = useRef(null); // 用于存储ECharts实例

  useEffect(() => {
    // 确保DOM元素已经加载
    if (chartRef.current && !echartsInstanceRef.current) {
      // 初始化ECharts实例
      echartsInstanceRef.current = echarts.init(chartRef.current);
      // 假设你有一些图表的配置
      const option = {
        /* 你的ECharts配置项 */
      };
      echartsInstanceRef.current.setOption(option);

      // 使用echartsAdaptive来自适应调整大小，并保留返回的销毁函数
      const destroyAdaptive = echartsAdaptive({
        echartsInstance: echartsInstanceRef.current,
        monitorContent: chartRef.current
      });

      // 组件卸载时调用销毁函数
      return () => {
        destroyAdaptive();
        echartsInstanceRef.current.dispose(); // 同时销毁ECharts实例
      };
    }
  }, []); // 空依赖数组表示这个effect只在组件挂载时运行

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

export default MyEChartsComponent;

API

echartsAdaptive(options)

• echartsInstance: echarts.ECharts - ECharts 实例。
• monitorContent: HTMLElement - 需要监听大小变化的元素。
• handle?: (options: { echartsInstance: echarts.ECharts; monitorContent: HTMLElement; }) => object - 可选的处理函数，用于返回自定义的调整参数。