关于echarts的重新加载与渲染

最新推荐文章于 2024-06-05 14:19:00 发布

QiBarbara

最新推荐文章于 2024-06-05 14:19:00 发布

阅读量6k

点赞数

分类专栏：前端 react 文章标签： react echarts

本文链接：https://blog.csdn.net/weixin_41606276/article/details/103082068

版权

本文介绍了在React应用中使用ECharts遇到的挑战，包括根据数据动态加载不同组件，实现定时更新数据并重新渲染图表，以及处理ECharts图表的全屏缩放功能。关键在于正确管理和实例化ECharts，确保图表容器的id唯一，并在更新数据时避免重复实例化。

摘要由CSDN通过智能技术生成

！！！踩了多少的坑我的天呐！！！！echarts催人命！！！！！

坑坑1：

根据返回数据加载不同的echarts组件

import React from 'react';
import {observer} from 'mobx-react';
import intl from 'react-intl-universal';
import echarts from 'echarts/lib/echarts';
import { Modal,Icon, Tooltip } from '../../../components/antd/index';
import MonthGrowthTrend from './MonthGrowthTrend';
import EarlyWarnRanking from './EarlyWarnRanking';
import DistributionLog from './DistributionLog';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
@observer
class monitorDataFlowContainer extends React.Component {
//写入所有的方法、state、构造
    render() {
    return (
        <div store={this.props.store} >。。。</div>
    )
  }
}

@observer
class MonthGrowthTrendComponent extends React.Component {
//或者直接引入组件
  render() {
    return (
        <MonthGrowthTrend store={this.props.store} />
    )
  }
};
@observer
class EarlyWarnRankingComponent extends React.Component {
  render() {
    return (
        <EarlyWarnRanking store={this.props.store} />
    )
  }
};
@observer
class DistributionLogComponent extends React.Component {
  render() {
    return (
        <DistributionLog store={this.props.store}/>
    )
  }
};
@observer
export default class DataFlowMonitor extends React.Component{
    。。。省略。。
    render(){
//写一个对象引入需要的组件
        const list = {
            'sourcesystem': monitorDataFlowContainer,
            'monthdata': MonthGrowthTrendComponent,
            'earlywarning':EarlyWarnRankingComponent,
            'distributelog':DistributionLogComponent,
          }
          let showCardsList = this.props.store.showCardsList;
          var Com1 = null
          var Com2 = null
          var Com3 = null
          var Com4 = null
//倒霉需求，还得排序！&#x