How to use the echarts/lib/echarts.getInstanceByDom function in echarts

initLine(id) {
    let {intl, data} = this.props;
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    config.txOverviewChart.title.text = intl.formatMessage({id:'TRX_transaction_chart'});
    config.txOverviewChart.xAxis[0].data = [];
    config.txOverviewChart.series[0].data = [];
    config.txOverviewChart.yAxis[0].name = intl.formatMessage({id: 'transactions_per_day'});
    config.txOverviewChart.tooltip.formatter = function (datas) {
      let date = new Date(parseInt(datas[0].data.date)).toLocaleString().split(' ')[0];
      return (
          intl.formatMessage({id: 'date'}) + ' : ' + date + '<br>' +
          intl.formatMessage({id: 'total_transactions'}) + ' : ' + datas[0].data.totalTransaction + '<br>' +
          intl.formatMessage({id: 'avg_blockTime'}) + ' : ' + datas[0].data.avgBlockTime + '<br>' +
          intl.formatMessage({id: 'avg_blockSize'}) + ' : ' + datas[0].data.avgBlockSize + '<br>' +
          intl.formatMessage({id: 'total_BlockCount'}) + ' : ' + datas[0].data.totalBlockCount + '<br>' +
          intl.formatMessage({id: 'new_address_seen'}) + ' : ' + datas[0].data.newAddressSeen + '<br>'

dataPieces.forEach((dp, i) => {
          const chartPiece = chartPieces[i]
          const containerHeight = dp.reduce((sum, line) => {
            const lineHeight = line.height * (dimetionAxis === 'col' ? metrics.length : 1)
            return sum + lineHeight
          }, 0)
          chartPiece.style.height = `${containerHeight}px`
          let instance = echarts.getInstanceByDom(chartPiece)
          if (!instance) {
            instance = echarts.init(chartPiece, 'default')
          } else {
            if (renderType === 'clear') {
              instance.clear()
            }
          }

          const grid = []
          const xAxis = []
          const yAxis = []
          const series = []
          const seriesData = []
          let xSum = 0
          let ySum = 0
          let index = 0

initLine(id) {

    let {intl, data, newCandidates} = this.props;
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    config.multiLineChart.title.text = '';
    config.multiLineChart.xAxis.data = [];
    config.multiLineChart.series = [];
    config.multiLineChart.legend.data=[];
    if (data && data.length > 0) {
      let stats = {};
      let addresses = {};
      for (let row of data) {
        if (!stats[row.timestamp]) {
          stats[row.timestamp] = [];
        }
        stats[row.timestamp].push({
          address: row.address,

initLine(id) {
    let {intl, keysData, data, format, message} = this.props;
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }

    config.lineChart.title.text = intl.formatMessage({id: message.id});
    if(message.href)
      config.lineChart.title.link = '#/blockchain/stats/' + message.href;
    config.lineChart.xAxis.data = [];
    config.lineChart.series[0].data = [];

    if (data && data.length > 0) {
      data.map((val) => {

        if (format && format[keysData[0]]) {
          if (format.date) {
            config.lineChart.xAxis.data.push(intl.formatDate(val[keysData[0]] * 1000));

initPie(id) {
    let {intl, data, message} = this.props;

    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    config.ringPieChart.title.text = intl.formatMessage({id: message.id}) + ' Top 10';

    config.ringPieChart.series[0].data = [];
    config.ringPieChart.series[1].data = [];
    config.ringPieChart.legend.data = [];

    function compare(property) {
      return function (obj1, obj2) {

        if (obj1[property] > obj2[property]) {
          return 1;
        } else if (obj1[property] < obj2[property]) {
          return -1;

initBar(id) {
    let {intl, data} = this.props;

    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    config.barChart.title.text = '';
    config.barChart.yAxis.data = [];
    config.barChart.series[0].data = [];
    config.barChart.series[0].itemStyle = {
      normal: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              {offset: 0, color: '#ed213a'},
              {offset: 1, color: '#93291e'}
            ]
        )
      },

getEchartsInstance = () =>
    echarts.getInstanceByDom(this.echartsElement) ||
    echarts.init(this.echartsElement, this.props.theme, this.props.opts);

initPie(id) {
    let {intl, data} = this.props;
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    let length = data !== null ? data.length : 0;
    config.pieChart.title.text = intl.formatMessage({id: 'Top'}) + length + intl.formatMessage({id: 'addresses'});
    config.pieChart.title.link = '#/blockchain/stats/accounts';
    config.pieChart.series[0].data = [];

    if (data && data.length > 0) {
      config.pieChart.series[0].data = data;
    }
    if (data && data.length === 0) {
      config.pieChart.title.text = "No data";
    }
    myChart.setOption(config.pieChart);
  }