react项目之Echarts封装

最新推荐文章于 2025-10-10 15:23:27 发布

原创

最新推荐文章于 2025-10-10 15:23:27 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #react.js

react中封装Echarts组件三种写法

第一种：使用类组件

import React, {
   
    Component } from 'react';
import echarts from 'echarts';
import {
   
    Map } from 'immutable'

class Echart extends Component {
   
   
  myChart = null;

  resizeEcharts = () => {
   
   
    this.myChart && this.myChart.resize();
  };
  
  setEchartOptions = () => {
   
   
    this.myChart.setOption(this.props.options);
  };

  componentDidMount() {
   
   
    this.myChart = echarts.init(this.chartRef);
    window.addEventListener('resize', this.resizeEcharts);
  }

  componentDidUpdate(preProps){
   
   
    const isEqual = Map(this.props.options<