地图的常见配置（2）

Qwe7

发布于 2022-06-16 11:45:47

2520

发布于 2022-06-16 11:45:47

文章被收录于专栏：网络收集

不同城市颜色不同

1.显示基本的中国地图

<body>
  <div style="width: 600px;height:400px;border:1px solid red"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function (chinaJson) {
      echarts.registerMap('chinaMap', chinaJson) var option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam: true,
          label: {
            show: true
          }
        }
      }
      mCharts.setOption(option)
    })
  </script>
</body>

2.准备好城市空气质量的数据, 并且将数据设置给 series

var airData = [{
    name: '北京',
    value: 39.92
  }, {
    name: '天津',
    value: 39.13
  }, {
    name: '上海',
    value: 31.22
  }, {
    name: '重庆',
    value: 66
  }, {
    name: '河北',
    value: 147
  }, {
    name: '河南',
    value: 113
  }, {
    name: '云南',
    value: 25.04
  }, {
    name: '辽宁',
    value: 50
  }, {
    name: '黑龙江',
    value: 114
  }, {
    name: '湖南',
    value: 175
  }, {
    name: '安徽',
    value: 117
  }, {
    name: '山 东',
    value: 92
  }, {
    name: '新疆',
    value: 84
  }, {
    name: '江苏',
    value: 67
  }, {
    name: '浙江',
    value: 84
  }, {
    name: '江西',
    value: 96
  }, {
    name: '湖北',
    value: 273
  }, {
    name: '广西',
    value: 59
  }, {
    name: '甘肃',
    value: 99
  }, {
    name: '山西',
    value: 39
  }, {
    name: '内蒙古',
    value: 58
  }, {
    name: '陕西',
    value: 61
  }, {
    name: '吉林',
    value: 51
  }, {
    name: '福建',
    value: 29
  }, {
    name: '贵州',
    value: 71
  }, {
    name: '广东',
    value: 38
  }, {
    name: '青海',
    value: 57
  }, {
    name: '西藏',
    value: 24
  }, {
    name: '四川',
    value: 58
  }, {
    name: '宁夏',
    value: 52
  }, {
    name: '海南',
    value: 54
  }, {
    name: '台湾',
    value: 88
  }, {
    name: '香港',
    value: 66
  }, {
    name: '澳门',
    value: 77
  }, {
    name: '南海诸岛',
    value: 55
  }]......
  var option = {
    ......
    series: [{
      data: airData
    }]
  }

3.将 series 下的数据和 geo 关联起来

geoIndex: 0

type: ‘map’

var option = {
  series: [{
    data: airData,
    geoIndex: 0,
    type: 'map'
  }]
}

4.结合 visualMap 配合使用

visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

var option = {
  geo: {
    type: 'map',
    map: 'chinaMap',
    roam: true,
    label: {
      show: true
    }
  },
  series: [{
    data: airData,
    geoIndex: 0,
    type: 'map'
  }],
  visualMap: {
    min: 0, // 最小值 
    max: 300, // 最大值 
    inRange: {
      color: ['white', 'red'] // 颜色的范围
    },
    calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
  }
}

（地图不给放，大家自行尝试）

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

geo