"Leafletjs" 7. Display information in conjunction with Echart charts

Add chart information in 1.popup

                  
Define Marker
varMarker =L.marker (val.location). AddTo (map); varContent = ' <div style= ' width:220px; height:220px, "id=" marker ' + val.id + ' "></div>";                  Marker.bindpopup (content, {}); Marker.on (' Popupopen ',function(e) {//Initializes a Echarts instance based on the prepared Dom                      varMyChart = Echarts.init (document.getElementById (' marker ' +val.id)); //Specify the configuration items and data for the chartoption ={tooltip: {trigger:' Axis '}, Xaxis: [{type:' Category ', data: [' January ', ' February ', ' March ', ' April ']}], YAxis: [{type:' Value ', Name:Water, min:0, Max:50, Interval:50, AxisLabel: {formatter:' {value} ml '}}, {type:' Value ', Name:Temperature, min:0, Max:10, Interval:5, AxisLabel: {formatter:' {value}°c '}}], series: [{ Name:Evaporation, type:' Bar ', data: [2.0, 4.9, 7.0, 23.2]}, {name:Precipitation, type:' Bar ', data: [2.6, 5.9, 9.0, 26.4]}, {name:' Average temperature ', type:' Line ', Yaxisindex:1, data: [2.0, 2.2, 3.3, 4.5]                          }]                      }; //displays the chart using the configuration item and data you just specified. mychart.setoption (option); });

2.echat added as a control in map

  {    width: 500px;     height: 300px;     background-color: White;}

1          varChart = L.control ({position: ' bottomright ')});2Chart.onadd =function(map) {3               vardiv = l.domutil.create (' div ', ' info chart ');4Div.id= "Chatrdemo";5               returnDiv;6           };7 chart.addto (map);8           //Initializes a Echarts instance based on the prepared Dom9                   varMyChart = Echarts.init (document.getElementById (' Chatrdemo '));Ten                   //Specify the configuration items and data for the chart Oneoption = { A tooltip: { -Trigger: ' axis ' -                       }, the Xaxis: [{ -Type: ' Category ', -Data: [' January ', ' February ', ' March ', ' April '] -                       }], + YAxis: [{ -Type: ' Value ', +Name: ' Water ', Amin:0, atMax:50, -Interval:50, - AxisLabel: { -Formatter: ' {value} ml ' -                           } -                       }, { inType: ' Value ', -Name: ' Temperature ', tomin:0, +Max:10, -Interval:5, the AxisLabel: { *Formatter: ' {value}°c ' $                           }Panax Notoginseng                       }], - series: [{ theName: ' Evaporation ', +Type: ' Bar ', AData: [2.0, 4.9, 7.0, 23.2] the                       }, { +Name: ' Precipitation ', -Type: ' Bar ', $Data: [2.6, 5.9, 9.0, 26.4] $                       }, { -Name: ' Average temperature ', -Type: ' line ', theYaxisindex:1, -Data: [2.0, 2.2, 3.3, 4.5]Wuyi                       }] the                   }; -                    Wu                   //displays the chart using the configuration item and data you just specified.  -mychart.setoption (option);

3. Add to map in marker form

 varPictures =L.marker (val.location, {Icon:l.divicon ({className:' Leaflet-echart-icon ', iconsize: [160, 160], HTML:' <div id= ' marker ' + val.id + ' "style=" width:160px; height:160px; position:relative; background-color:transparent; " >asd</div> '}). AddTo (map); //Initializes a Echarts instance based on the prepared Dom                  varMyChart = Echarts.init (document.getElementById (' marker ' +val.id)); //Specify the configuration items and data for the chartoption ={tooltip: {trigger:' Item ', Formatter:' {A} <br/>{b}: {C} ({d}%) '}, Series: [{name:' Access source ', type:' Pie ', Radius: [' 20 ', ' 50 '], Avoidlabeloverlap:false, Label: {normal: {show: false, Position:' Center '}, emphasis: {show:true, TextStyle: {fontSize:' 18 ', FontWeight:' Bold '                                  }                              }                          }, Labelline: {normal: {show:false}}, data: [{ Value:val.value1, Name:' Direct access '}, {value:val.value2, Name: ' Email marketing '}, {value:val.value3, Name: ' Affiliate ADS '}, {value:val.value4, Name: ' Video ads '}, {value:20, Name:Search engine                          }]                      }]                  }; //displays the chart using the configuration item and data you just specified. mychart.setoption (option);

Demo Source Address: Https://github.com/shitao1988/leaflet-echartmarker

"Leafletjs" 7. Display information in conjunction with Echart charts