leaflet与ECharts的统计图表-白红宇

leaflet与ECharts的统计图表

阅读量：5237 次

发布时间：2019-06-14

本文共 1549 字，大约阅读时间需要 5 分钟。

看了网站一位大神的自己复写了一下

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:'
     
      asd
     
'                    })}).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='
     
';popChartMarker1.bindPopup(content1,{});popChartMarker1.on('popupopen',function(e){    var myChart=echarts.init(document.getElementById('mark1'));    var option={              //option样式        }    myChart.setOption(option);});

转载于:https://www.cnblogs.com/CoffeeEddy/p/8024702.html

你可能感兴趣的文章