*注:单纯觉得自己该记录一下

  /**hlj.json地址**/
https://gitee.com/hyyyhuoyang/hlj.-geo-json-multi-polygon/raw/master/hlj.json
  
const myChart = echarts.init(document.getElementById('map'));
  const uploadedDataURL = /hlj.json";
  const center = {
    "哈尔滨市": [126.642464, 45.756967],
    "齐齐哈尔市": [123.95792, 47.342081],
    "牡丹江市": [129.618602, 44.582962],
    "佳木斯市": [130.361634, 46.809606],
    "大庆市": [125.11272, 46.590734],
    "鸡西市": [130.975966, 45.300046],
    "伊春市": [128.899396, 47.724775],
    "双鸭山市": [131.157304, 46.643442],
    "七台河市": [131.015584, 45.771266],
    "绥化市": [126.99293, 46.637393],
    "鹤岗市": [130.277487, 47.332085],
    "黑河市": [127.499023, 50.249585],
    "大兴安岭地区": [124.711526, 52.335262]
  }
  const option = null;
  $.get(uploadedDataURL, function (json) {
    echarts.registerMap('js', json);
    option = {
      visualMap: {
        show: false,
        max: 100,
        seriesIndex: [1],
      },
      geo: [{
        map: 'js',
        roam: false, //是否允许缩放
        zoom: 1, //默认显示级别
        top: '5%',
        left: '7%',
        bottom: '3%',
        scaleLimit: {
          min: 0,
          max: 3
        }, //缩放级别
        itemStyle: {
          normal: {
            areaColor: '#d35442',
            // shadowColor: '#fefcf9',
            // shadowBlur: 20,
            // shadowOffsetX: -5,
            // shadowOffsetY: 15,
          }
        },
        tooltip: {
          show: false
        }
      }],
      series: [
        //地图
        {
          type: 'map',
          mapType: 'js',
          geoIndex: -1,
          zoom: 1, //默认显示级别
          top: '5%',
          left: '7%',
          bottom: '3%',
          label: {
            show: true,
            color: '#313131',
            emphasis: {
              color: '#fef0e4',
              show: false
            },
            fontSize: 16,
          },
          itemStyle: {
            normal: {
              borderColor: '#d35442',
              borderWidth: 1,
              areaColor: '#fefcf9'
            },
            emphasis: {
              areaColor: 'rgba(254,240,228, 0.2)',
              borderWidth: 0,
            }
          },
          data: Object.keys(center).map(name => {
            return {
              name: name,
              value: Math.random() * 100
            }
          })
        }
      ]
    };
    myChart.setOption(option);
    //绑定点击事件,这里是新窗口打开地址
    myChart.on('click', function (param) {
      let url = {
        哈尔滨市: "",
        齐齐哈尔市: "",
        牡丹江市: "",
        佳木斯市: "",
        大庆市: "",
        鸡西市: "",
        双鸭山市: "",
        七台河市: "",
        伊春市: "",
        绥化市: "",
        鹤岗市: "",
        黑河市: "",
        大兴安岭地区: ""
      };
      if (param.name === '') {
        return false;
      }
      window.open(url[param.name]);
    });
    // 地图双击方法
    myChart.on('dblclick', function (param) {
      let url = {
        哈尔滨市: "",
        齐齐哈尔市: "",
        牡丹江市: "",
        佳木斯市: "",
        大庆市: "",
        鸡西市: "",
        双鸭山市: "",
        七台河市: "",
        伊春市: "",
        绥化市: "",
        鹤岗市: "",
        黑河市: "",
        大兴安岭地区: ""
      };
      window.open(url[param.name]);
    });
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  });

火阳
1 声望0 粉丝

择其善者而从之,其不善者而改之


« 上一篇
九九乘法表