Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

如何利用ECharts中使用地图热力图展示城市热度

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>利用ECharts中使用地图热力图展示城市热度</title>
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="mapContainer" style="width: 800px; height: 600px;"></div>
  <script>
  var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 90},
    {name: '广州', value: 80},
    // 其他城市数据...
  ];
  // 创建ECharts实例
  var myChart = echarts.init(document.getElementById('mapContainer'));
   
  // 配置地图热力图
  var option = {
    // 使用中国地图
    map: 'china',
    // 设置地图的放大与缩小的按钮不可见
    roam: false,
    // 配置地图热力图的数据
    series: [{
      type: 'heatmap',
      coordinateSystem: 'geo',
      data: data
    }]
  };
   
  // 关联数据与地图文件
  myChart.setOption(option);
  </script>
</body>

</html>
点击展开全文

相关文章

  1. 如何利用ECharts中使用地图展示数据
  2. 百度Echarts地图系列之2020-2023年全国旅行路线图
  3. 百度Echarts地图现实定时自动切换tooltip样式调整
  4. 百度Echarts地图现实定时自动切换
  5. 百度echarts地图显示指定标注