leafletjs 地图挂饼图

来源：互联网发布：薪酬优化密件工资单编辑：程序博客网时间：2024/05/01 17:59
<!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>
1 0