echarts封装的思考点

  1. echarts的事件处理
  2. 监听窗口变动事件，DOM尺寸发生变化时，图表能够自适应
  3. 延迟 echarts 渲染，resize-detector
  4. ResizeObserver - 元素resize监听API
  5. 离开销毁组件实例，防止内存泄漏
  6. id重复带来的 bug，用 uuid优化
  1. import echarts from 'echarts/lib/echarts'
  2. import debounce from 'lodash/debounce'
  3. import { addListener, removeListener } from 'resize-detector'

Echarts.jsx按需引入封装

Echarts.jsx

  1. import React, {useCallback, useEffect, useRef} from 'react';
  2. import {object, number, array, oneOf, bool} from 'prop-types';
  3. import debounce from 'lodash.debounce';
  5. // 引入核心模块 echarts必须要的接口
  6. import * as echarts from 'echarts/core';
  7. // 必须引入渲染器 CanvasRenderer & SVGRenderer
  8. import {CanvasRenderer, SVGRenderer} from 'echarts/renderers';
  10. // const dpr = window.devicePixelRatio; // 设备分辨率
  11. const RenderEngine = {
  12.   canvas: CanvasRenderer,
  13.   svg: SVGRenderer
  14. }
  16. Echarts.propTypes = {
  17.   options: object.isRequired,
  18.   height: number,
  19.   renderType: oneOf(['canvas', 'svg']),
  20.   components: array,
  21.   style: object,
  22.   loading: bool,
  23. };
  24. Echarts.defaultProps = {
  25.   height: 240,
  26.   renderType: 'canvas',
  27.   components: [],
  28.   style: {},
  29.   loading: false,
  30. };
  32. function Echarts(props) {
  33.   const {renderType, options, style, height, components, loading} = props;
  34.   const chartRef = useRef(null); // DOM节点
  35.   const chartInstance = useRef(null); // Echart实例
  36.   const isEmpty = !Object.keys(options || {}).length; // options是否为空
  38.   const handleResize = debounce(() => {
  39.     const {current} = chartInstance;
  40.     if (!current) return;
  41.     current.resize({animation: {duration: 500}});
  42.   }, 300);
  44.   // 初始化图表配置项
  45.   const renderChart = useCallback(() => {
  46.     if(isEmpty) return
  47.     const {current} = chartRef;
  48.     if (!current) {
  49.       return console.error('init echarts DOM error');
  50.     }
  52.     // 单例模式，获取 dom容器上的实例
  53.     const render = echarts.getInstanceByDom(current);
  54.     chartInstance.current = render ?? echarts.init(current, null, {
  55.       renderer: renderType,
  56.     });
  58.     showLoading(chartInstance.current)
  59.     chartInstance.current.setOption(options);
  60.   }, [options, renderType, loading]);
  62.   useEffect(init, []);
  64.   // 注册必须的组件
  65.   function init() {
  66.     const MapRender = RenderEngine[renderType] || CanvasRenderer;
  67.     // 必须在echarts.init之前使用
  68.     echarts.use([MapRender, ...components]);
  69.     // 监听 resize屏幕变化
  70.     window.addEventListener('resize', handleResize);
  71.     return () => {
  72.       window.removeEventListener('resize', handleResize);
  73.     };
  74.   }
  76.   useEffect(() => {
  77.     renderChart();
  78.     return () => {
  79.       const {current} = chartInstance;
  80.       if (!current) return;
  81.       current.dispose();
  82.     }
  83.   }, [chartInstance, renderChart]);
  85.   function showLoading(chartInstance) {
  86.     if(!loading) {
  87.       return chartInstance.hideLoading()
  88.     }
  89.     chartInstance.showLoading("default", {
  90.       text: "加载中...",
  91.       color: "rgb(244, 148, 148)",
  92.       textColor: "rgb(112,112, 121)",
  93.       maskColor: "rgba(255, 255, 255, 0.8)",
  94.       zlevel: 0,
  95.       showSpinner: true,
  96.     });
  97.   }
  99.   if(!Object.keys(options).length) {
  100.     return null
  101.   }
  103.   const attrs = {
  104.     ref: chartRef,
  105.     style: {
  106.       height,
  107.       ...style,
  108.     }
  109.   }
  111.   return (
  112.     <div {...attrs}/>
  113.   );
  114. }
  116. export default Echarts;

响应式

  1. import {useCallback, useEffect, useRef} from 'react';
  2. import {
  3.   object, number, string, array, oneOf, bool, oneOfType, func,
  4. } from 'prop-types';
  5. import classnames from 'classnames';
  6. import debounce from 'lodash.debounce';
  7. import { useResizeDetector } from 'react-resize-detector';
  9. // 引入核心模块 echarts必须要的接口
  10. import * as echarts from 'echarts/core';
  11. // 必须引入渲染器 CanvasRenderer & SVGRenderer
  12. import {CanvasRenderer, SVGRenderer} from 'echarts/renderers';
  13. import { UniversalTransition } from 'echarts/features';
  15. // const dpr = window.devicePixelRatio; // 设备分辨率
  16. const RenderEngine = {
  17.   canvas: CanvasRenderer,
  18.   svg: SVGRenderer
  19. }
  21. ECharts.propTypes = {
  22.   options: object.isRequired,
  23.   height: oneOfType([number, string]),
  24.   renderType: oneOf(['canvas', 'svg']),
  25.   components: array,
  26.   style: object,
  27.   loading: bool,
  28.   className: string,
  29.   onClick: func,
  30. };
  31. ECharts.defaultProps = {
  32.   height: 240,
  33.   renderType: 'canvas',
  34.   components: [],
  35.   style: {},
  36.   loading: false,
  37.   onClick: () => {},
  38. };
  40. function ECharts(props) {
  41.   const {
  42.     renderType, options, components, loading,
  43.     className, style, height, onClick,
  44.   } = props;
  45.   // DOM节点
  46.   const { width, ref } = useResizeDetector();
  47.   const chartInstance = useRef(null); // Echart实例
  49.   const handleResize = debounce(() => {
  50.     const {current} = chartInstance;
  51.     if (!current) return;
  52.     current.resize({animation: {duration: 500}});
  53.   }, 300);
  55.   // 初始化图表配置项
  56.   const renderChart = useCallback(() => {
  57.     const isEmpty = !Object.keys(options || {}).length; // options是否为空
  58.     if(isEmpty) {
  59.       return null;
  60.     }
  61.     const {current} = ref;
  62.     if (!current) {
  63.       return console.error('init echarts DOM error');
  64.     }
  66.     // 单例模式，获取 dom容器上的实例
  67.     const render = echarts.getInstanceByDom(current);
  68.     chartInstance.current = render ?? echarts.init(current, null, {
  69.       renderer: renderType,
  70.       locale: 'ZH',
  71.     });
  73.     showLoading(chartInstance.current)
  74.     // chartInstance.current.clear();
  75.     chartInstance.current.setOption(options);
  76.     chartInstance.current.off('click');
  77.     chartInstance.current.on('click', onClick);
  78.   }, [options, renderType, loading]);
  80.   useEffect(init, []);
  82.   useEffect(update, [width, height]);
  84.   useEffect(() => {
  85.     renderChart();
  86.     return () => {
  87.       const {current} = chartInstance;
  88.       if (!current) return;
  89.       current.dispose();
  90.     }
  91.   }, [chartInstance, renderChart]);
  93.   // 注册必须的组件
  94.   function init() {
  95.     const MapRender = RenderEngine[renderType] || CanvasRenderer;
  96.     // 必须在echarts.init之前使用
  97.     echarts.use([
  98.       MapRender,
  99.       UniversalTransition,
  100.       ...components
  101.     ]);
  102.     // 监听 resize屏幕变化
  103.     window.addEventListener('resize', handleResize);
  104.     return () => {
  105.       window.removeEventListener('resize', handleResize);
  106.     };
  107.   }
  109.   function update() {
  110.     if(!width) return;
  111.     handleResize();
  112.   }
  114.   function showLoading(chartInstance) {
  115.     if(!loading) {
  116.       return chartInstance.hideLoading()
  117.     }
  118.     chartInstance.showLoading("default", {
  119.       text: "加载中...",
  120.       color: "rgb(244, 148, 148)",
  121.       textColor: "rgb(112,112, 121)",
  122.       maskColor: "rgba(255, 255, 255, 0.8)",
  123.       zlevel: 0,
  124.       showSpinner: true,
  125.     });
  126.   }
  128.   if(!Object.keys(options).length) {
  129.     return null
  130.   }
  132.   const attrs = {
  133.     className: classnames(className),
  134.     ref,
  135.     style: {
  136.       height,
  137.       ...style,
  138.     }
  139.   }
  141.   return (
  142.     <div {...attrs}/>
  143.   );
  144. }
  146. export default ECharts;

echarts目录规范

image.png