cmanager/public/chengdu/js/map.js

$(function () {
  echarts_3();
  function randomValue() {
    return Math.round(Math.random() * 1000);
  }

  function showCity(zhName, pyName) {
    console.log(zhName, pyName);
    window.location.href = 'area.html?name=' + zhName + '&abbreviation=' + pyName;
  }

  function echarts_3() {
    var myChart = echarts.init(document.getElementById('map_1'));
    var province = [
      {name: '北京', value: randomValue()},
      {name: '天津', value: randomValue()},
      {name: '上海', value: randomValue()},
      {name: '重庆', value: randomValue()},
      {name: '河北', value: randomValue()},
      {name: '河南', value: randomValue()},
      {name: '云南', value: randomValue()},
      {name: '辽宁', value: randomValue()},
      {name: '黑龙江', value: randomValue()},
      {name: '湖南', value: randomValue()},
      {name: '安徽', value: randomValue()},
      {name: '山东', value: randomValue()},
      {name: '新疆', value: randomValue()},
      {name: '江苏', value: randomValue()},
      {name: '浙江', value: randomValue()},
      {name: '江西', value: randomValue()},
      {name: '湖北', value: randomValue()},
      {name: '广西', value: randomValue()},
      {name: '甘肃', value: randomValue()},
      {name: '山西', value: randomValue()},
      {name: '内蒙古', value: randomValue()},
      {name: '陕西', value: randomValue()},
      {name: '吉林', value: randomValue()},
      {name: '福建', value: randomValue()},
      {name: '贵州', value: randomValue()},
      {name: '广东', value: randomValue()},
      {name: '青海', value: randomValue()},
      {name: '西藏', value: randomValue()},
      {name: '四川', value: randomValue()},
      {name: '宁夏', value: randomValue()},
      {name: '海南', value: randomValue()},
      {name: '台湾', value: randomValue()},
      {name: '香港', value: randomValue()},
      {name: '澳门', value: randomValue()}
    ];
    var option = {
      animation: false,
      visualMap: {
        show: true,
        min: 1,
        max: 1000,
        // splitNumber: 5,
        inRange: {
          color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
        },
        textStyle: {color: '#fff'}
      },
      geo: {
        map: 'china',
        type: 'map'
      },
      series: [{
        name: 'china',
        type: 'map',
        aspectScale: 0.75,
        zoom: 1,
        mapType: 'china',
        roam: false,
        //geoIndex: 0,//默认情况下，map series 会自己生成内部专用的 geo 组件
        label: {
          normal: {
            show: true,//显示省份标签
            textStyle: {color: "#fff", fontSize: '9'}//省份标签字体颜色
          },
          emphasis: {//对应的鼠标悬浮效果
            show: true,
            textStyle: {color: "#800080"}
          }
        },
        itemStyle: {
          normal: {
            color: '#ffeb7b',
            areaColor: '#4c60ff',
            borderColor: '#1935e1'
          }
        },
        data: province
      }]
    };
    myChart.setOption(option);
    var cityArr = [
      ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'],
      ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
    ];
    myChart.on('click', function (params) {//点击事件
      console.log(params);
      var cityName = params.name;
      for (var i = 0, len = cityArr[0].length; i < len; i++) {// 查找是否有对应城市有则加载城市
        if (cityName == cityArr[0][i]) {
          showCity(cityArr[0][i], cityArr[1][i]);// 获取得城市拼音
          return;
        }
      }
      //没有找到对应城市的话，那么返回到全国地图
      option.series[0].mapType = 'china';
      myChart.setOption(option);
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
});