解决ECharts图表不能重复渲染问题

最新推荐文章于 2023-07-24 08:45:00 发布

爱蹦哒的咸鱼

最新推荐文章于 2023-07-24 08:45:00 发布

阅读量491

点赞数 2

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/m0_68393821/article/details/130101625

版权

图表只能显示一次是因为通过id获取标签，一个html中id只能有一个，所以每次获取的是同一个标签

代码：

import React, { Component } from "react";
import * as echarts from 'echarts';
export default class EchartsColumnar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total1: '',
      //自定义一个id
      elemetnId:(Date.now() + "")
    }
  }
 
  //通过动态id获取图表
  var chartDom = document.getElementById(this.state.elemetnId);

 render() {
    return (
      <div>
        <div style={{ paddingLeft: "20px", paddingTop: "10px" }}>您好，查询到有<span className="total"> {this.state.total1} </span>个案件信息。</div>
        <div id={this.state.elemetnId}  className="myChart" style={{ width: "450px", height: "300px" }} />
      </div>
    )
  }