页面中包含多个echarts图例

在项目中循环生成多个echarts图例

{this.state.areaData.map((item,index) => {
    return <div className='main'  style={
  { width: "60%", height: "80%",marginLeft:"20%"}}></div>
</div>

getEnergyTwo(){
      var myCharts = document.getElementsByClassName("main");
      console.log(myCharts);
      //循环元素
      for (var i = 0; i < myCharts.length; i++) {
         var myChart = echarts.init(myCharts[i]);
         var option = {
            color: ['#28A431', '#3e73ff'],
            tooltip: {
               trigger: 'item',
               formatter: function(obj) {
                     let str='';
                     let unit = ' %';
                     let value = Number(obj.data.value).toFixed(2);
                     let subStr = '<div style=\'lineHeight:22px;height:24px;\'>