leaflet與ECharts的統計圖表

看了網站一位大神的自己復寫了一下

ECharts的寫法我就不贅述了 主要實現三種圖表展現形式，如下圖所示 為三種樣式的demo

 

1、Leaflet Control

主要就是初始一個control，並在並給其中的容器DIV附上class和id，id用於創建圖表時能找到該容器，class用於控制control的樣式

class樣式

.chart{
    width: 600px;
    height: 300px;
    background-color: #fff;
}

js代碼

var chartCtr=L.control({position: 'bottomright'});
    chartCtr.onAdd=function (map) {
        var div=L.DomUtil.create('div','info chart');
        div.id='chartControl';
        return div;
    }
    chartCtr.addTo(map);

    var barChart = echarts.init(document.getElementById('chartControl'));
var barOption={
    //圖表option
    ......
}

barChart.setOption(barOption);

2、Leaflet Marker

通過marker的divIcon來實現，這里特別提一點，其實通過divicon可以實現任意樣式的marker

var cMark1=L.marker([30.66,120.77],
                    {icon:L.divIcon({
                        className:'leaflet-echart-icon',
                        iconSize:[160,160],
                        html:'<div id="cm1" style="width:160px;height:160px;position:relative;background-color:transparent;">asd</div>'
                    })}).addTo(map);

var Chart1=echarts.init(document.getElementById('cm1'));
var cmOption1={
      //圖表option
      ......
}
Chart1.setOption(cmOption1);

3、Leaflet Popup

通過彈出窗口實現Leaflet，這里做了一點修改，原本只要給popup里面的div賦予ID就能找到，但是這里做出了一點修改，在popup的popupopen事件觸發時重載echarts，可以看到初始動畫

var popChartMarker1=L.marker([30.76,120.91]).addTo(map);

//配置彈出框
var content1='<div style="width:260px;height:220px" id="mark1"></div>';
popChartMarker1.bindPopup(content1,{});
popChartMarker1.on('popupopen',function(e){
    var myChart=echarts.init(document.getElementById('mark1'));
    var option={
              //option樣式
        }
    myChart.setOption(option);
});