leaflet

leafletjs 地图挂饼图

by giser · 2019-04-03

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css"/>
  <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <script src="//cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
  <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>
<div class="am-g">
  <div id="map" class="am-u-sm-4" style="height: 1080px;width: 1920px">8</div>
</div>

<script>
  var map = L.map('map', {
    zoomControl: false,
    center: [39.85, 116.4],
    zoom: 12
  });
  L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?' +
    'lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    {subdomains: ["1", "2", "3", "4"]}).addTo(map);

  function onclick(e) {
    console.log(e.latlng);
    L.popup()
      .setLatLng(e.latlng)
      .setContent("<div id='main' style='height: 200px;width:450px'></div>")
      .openOn(map);
    var myChart = echarts.init(document.getElementById('main'));
    option = {
      title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      toolbox: {
        show: true,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      calculable: true,
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ]
        }
      ]
    };
    myChart.setOption(option);
  }
  L.marker([39.85, 116.4])
    .addTo(map)
    .on('mouseover', onclick)
    .on('mouseout', function (e) {

    });


</script>
</body>
</html>

转载自：https://blog.csdn.net/Sensation_cyq/article/details/51725294

相关推荐

Tags: leaflet leafletjs 地图挂饼图

You may also like...