如何利用ECharts中使用地图展示数据

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts地图展示数据示例</title>
  <script src="echarts.min.js"></script>
  <script src="china.js"></script>
</head>
<body>
  <div id="map" style="width: 800px; height: 600px;"></div>
  <script>
  // 创建地图实例
  var myChart = echarts.init(document.getElementById('map'));
   
  // 设置地图参数
  var option = {
    title: {
      text: '全国各省份数据分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],       // 文本，默认为数值文本
      calculable: true,
      inRange: {
        color: ['#e0ffff', '#006edd']
      }
    },
    series: [
      {
        name: '数据',
        type: 'map',
        mapType: 'china',
        roam: false,     // 禁止缩放平移
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: [
          {name: '北京', value: 500},
          {name: '上海', value: 300},
          {name: '广东', value: 800},
          // 这里填充自己的数据
        ]
      }
    ]
  };
   
  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
  </script>
</body>
</html>
点击展开全文
如何利用ECharts中使用地图展示数据

相关文章

热门推荐

Echarts栏目
