echarts_chart_collection
/
map_1.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #map {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <div id="map">123</div>
  <script src="./js/rem.js"></script>
  <script src="./js/jquery-1.8.3.min.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/map-xihu.js"></script>
  <script>
    $(function () {
      //获取随机范围内的整数
      function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
      }

      function chart_map() {
        var myChart = echarts.init(document.getElementById('map'));
        var data_map = [];
        for (key in mapData.features) {
          var item_name = mapData.features[key].properties.name;
          //隐藏这几个街道的名称显示 文字太靠近比较拥挤
          if (item_name == '北山街道' || item_name == '西溪街道' || item_name == "翠苑街道" || item_name == "古荡街道") {
            data_map.push({
              name: item_name,
              value: getRandomIntInclusive(500, 1000),
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: '#333',
                    fontSize: '12'
                  }
                }
              }
            })
          } else {
            data_map.push({
              name: mapData.features[key].properties.name,
              value: getRandomIntInclusive(500, 1000)
            })
          }
        }
        var max = 0;
        var min = 10000;
        console.log(data_map)
        data_map.forEach(function (item) {
          max = item.value > max ? item.value : max;
          min = item.value < min ? item.value : min;
        });

        // 基于准备好的dom，初始化echarts实例
        echarts.registerMap('xihu', mapData);

        // 指定图表的配置项和数据
        option = {
          visualMap: {
            min: min,
            max: max,
            right: '15%',
            bottom: '1%',
            itemWidth: 25,
            itemHeight: 100,
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            textStyle: {
              color: '#fff',
              fontSize: '20'
            },
            inRange: {
              color: ['#0559AE', '#02EDFF']
            }
          },
          tooltip: {
            trigger: 'item',
          },
          geo: {
            map: 'xihu',
            label: {
              show: false
            },
            top: 'center',
            left: 'center',
            // roam: false,
            // width: '85%',
            // height: '85%',
            zoom: 1.2,
            itemStyle: {
              areaColor: '#3196fa',
              borderColor: '#3196fa',
              shadowColor: '#3196fa',
              shadowBlur: 10,
              borderWidth: 2,
            }
          },
          series: [{
            name: '西湖区',
            type: 'map',
            mapType: 'xihu',
            zoom: 1.2,
            left: 'center',
            label: {
              normal: {
                show: true,
                // formatter: '{b}: 120人',
                textStyle: {
                  color: '#333',
                  fontSize: '12'
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: '16'
                }
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                return params.name + "：" + params.value + '人';
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'rgba(7,157,233,0.4)',
                borderColor: '#ddd',
                // shadowColor: '#ccc',
                // shadowBlur: 5,
                // borderWidth: 2,
              },
              emphasis: {
                areaColor: '#3093d8'
              }
            },
            data: data_map,
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

      }
      chart_map();
    })
  </script>
</body>

</html>