examples/pie.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="cleartype" content="on">
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Pie | echarts-extension-amap</title>
  <!-- please replace {ak} with your ak & customize your plugins -->
  <!-- Plugin `AMap.CustomLayer` is required if you are using a version of library less than v1.9.0 -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
  <!-- ECharts CDN -->
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <!-- echarts amap extension -->
  <!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-extension-amap@1.12.0/dist/echarts-extension-amap.min.js"></script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body, #echarts-amap {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="echarts-amap"></div>
  <!-- data is only for example -->
  <script type="text/javascript">
    var data = {
      '北京': [10, 20, 30, 40],
      '攀枝花': [15, 20, 36, 42],
      '开封': [17, 42, 15, 31],
      '上海': [46, 50, 59, 80],
      '广州': [90, 45, 36, 15]
    };
    var geoCoords = {
      '北京': [116.46, 39.92],
      '攀枝花': [101.718637, 26.582347],
      '开封': [114.35, 34.79],
      '上海': [121.48, 31.22],
      '广州': [113.23, 23.16]
    };
    var pieDimensions = ['A', 'B', 'C', 'D'];
    var pieSeries = [];
    echarts.util.each(data, function (values, name) {
      pieSeries.push({
        type: 'pie',
        name: name,
        coordinateSystem: 'amap',
        center: geoCoords[name],
        radius: 20,
        data: echarts.util.map(values, function (value, idx) {
          return {
            name: pieDimensions[idx],
            value: value
          }
        }),
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        }
      })
    });

    var option = {
      // amap component option
      amap: {
        // enable 3D mode
        // Note that it's suggested to enable 3D mode to improve echarts rendering.
        viewMode: '3D',
        // initial options of AMap
        // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
        // initial map center [lng, lat]
        center: [102.278269, 35.391011],
        // initial map zoom
        zoom: 4,
        // whether the map and echarts automatically handles browser window resize to update itself.
        resizeEnable: true,
        // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
        mapStyle: 'amap://styles/dark',
        // whether echarts layer should be rendered when the map is moving. Default is true.
        // if false, it will only be re-rendered after the map `moveend`.
        // It's better to set this option to false if data is large.
        renderOnMoving: true,
        // the zIndex of echarts layer for AMap, default value is 2000.
        // deprecated since v1.9.0, use `echartsLayerInteractive` instead.
        echartsLayerZIndex: 2000,
        // whether echarts layer is interactive. Default value is true
        // supported since v1.9.0
        echartsLayerInteractive: true,
        // whether to enable large mode. Default value is false
        // supported since v1.9.0
        largeMode: false
        // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
        // There are some bugs about it, we can use `amap.add` instead.
        // Refer to the codes at the bottom.

        // More initial options...
      },
      tooltip : {
        trigger: 'item'
      },
      animation: true,
      series: pieSeries
    };
    // initialize echarts
    var chart = echarts.init(document.getElementById('echarts-amap'));
    chart.setOption(option);
    // get AMap extension component
    var amapComponent = chart.getModel().getComponent('amap');
    // get the instance of AMap
    var amap = amapComponent.getAMap();
    // operations below are the same as amap
    amap.addControl(new AMap.Scale());
    amap.addControl(new AMap.ToolBar());
    // add layers
    // var satelliteLayer = new AMap.TileLayer.Satellite();
    // var roadNetLayer = new AMap.TileLayer.RoadNet();
    // amap.add([satelliteLayer, roadNetLayer]);
    // Add a marker to map
    // amap.add(new AMap.Marker({
    //   position: [115, 35]
    // }));
    // Make the overlay layer of AMap interactive
    // amapComponent.setEChartsLayerInteractive(false);
  </script>
</body>
</html>