var svg = 'https://echarts.ipkd.cn/svg/map-svg.txt'; //下载过来赋值

echarts.registerMap('organ_diagram', { svg: svg });

const random = (lower, upper) => {
  lower = +lower || 0
  upper = +upper || 0
  return Math.random() * (upper - lower) + lower
}

const provinces = [
    { city: true, name: "太原", coord: [1383.6, 759.1] },
    { name: "古交市", coord: [1287.7, 755.4] },
    { name: "清徐县", coord: [1322.5, 855] },
    { name: "娄烦县", coord: [1165.4, 708.5] },
    { name: "小店县", coord: [1388.5, 804.2] },
    { name: "万柏林区", coord: [1337.3, 783.6] },
    { city: true, name: "忻州", coord: [1544, 638] },
    { name: "保德县", coord: [1120, 436] },
    { name: "河曲县", coord: [1236, 359] },
    { name: "静乐县", coord: [1317, 611] },
    { name: "宁武县", coord: [1546.2, 501.7] },
    { name: "原平市", coord: [1638, 547] },
    { name: "五台县", coord: [1861, 624] },
    { city: true, name: "朔州", coord: [1604, 391] },
    { name: "朔城区", coord: [1612.6, 430.6] },
    { name: "怀仁市", coord: [1898, 334] },
    { name: "应县", coord: [1920, 414] },
    { name: "山阴县", coord: [1732, 361] },
    { name: "右玉县", coord: [1711, 218] },
    { name: "平鲁区", coord: [1538.6, 332.6] },
    { city: true, name: "大同", coord: [2102, 256] },
    { name: "左云县", coord: [1826.7, 262.3] },
    { name: "浑源县", coord: [2140.5, 436.7] },
    { name: "新荣区", coord: [2028.5, 215.6] },
    { name: "云冈区", coord: [2015.9, 281] },
    { name: "云州区", coord: [2195.8, 316.2] },
    { city: true, name: "阳泉", coord: [1769.6, 861.7] },
    { name: "盂县", coord: [1759.3, 766.8] },
    { name: "平定县", coord: [1808, 881.4] },
    { name: "郊区", coord: [1760.2, 825.6] },
    { name: "矿区", coord: [1728, 844.8] },
    { city: true, name: "吕梁", coord: [943, 804] },
    { name: "孝义市", coord: [1013.2, 910.5] },
    { name: "临县", coord: [876.3, 625] },
    { name: "岚县", coord: [1115.2, 608.6] },
    { name: "兴县", coord: [990.9, 561.8] },
    { name: "方山县", coord: [997.1, 707.3] },
    { name: "中阳县", coord: [883, 862.8] },
    { name: "柳林县", coord: [791.7, 766.8] },
    { name: "文水县", coord: [1191, 864.9] },
    { name: "交城县", coord: [1171.1, 821] },
    { name: "交口县", coord: [818.5, 927.2] },
    { name: "离石县", coord: [942.5, 876.7] },
    { city: true, name: "晋中", coord: [1459, 905] },
    { name: "介休市", coord: [1063.3, 975.5] },
    { name: "寿阳县", coord: [1620.6, 839.3] },
    { name: "昔阳县", coord: [1760.1, 966] },
    { name: "平遥县", coord: [1177.5, 954.1] },
    { name: "灵石县", coord: [967, 1010.2] },
    { name: "左权县", coord: [1598.3, 1051.3] },
    { name: "和顺县", coord: [1686.1, 1019] },
    { name: "榆次区", coord: [1482.7, 922.4] },
    { city: true, name: "临汾", coord: [808, 1162] },
    { name: "霍州市", coord: [946.3, 1095.4] },
    { name: "古县", coord: [988.5, 1161.9] },
    { name: "吉县", coord: [496.5, 1113] },
    { name: "隰县", coord: [725.3, 1025.3] },
    { name: "蒲县", coord: [666.3, 1136.4] },
    { name: "翼城县", coord: [825.2, 1269.7] },
    { name: "洪洞县", coord: [871.2, 1137.9] },
    { name: "安泽县", coord: [1060.5, 1210.3] },
    { name: "乡宁县", coord: [537.8, 1165.9] },
    { name: "尧都县", coord: [815.1, 1202.5] },
    { city: true, name: "长治", coord: [1336.6, 1222.4] },
    { name: "长子县", coord: [1251, 1256.2] },
    { name: "沁源县", coord: [1133.1, 1121.2] },
    { name: "武乡县", coord: [1353, 1094.8] },
    { name: "襄垣县", coord: [1398.1, 1142.4] },
    { name: "壶关县", coord: [1435.8, 1282.8] },
    { name: "屯留县", coord: [1258.3, 1155.4] },
    { name: "潞州区", coord: [1371.2, 1212.7] },
    { name: "潞城区", coord: [1405.4, 1197.7] },
    { name: "上党区", coord: [1303.9, 1310.6] },
    { city: true, name: "运城", coord: [492, 1367] },
    { name: "河津市", coord: [410.9, 1249.3] },
    { city: true, name: "晋城", coord: [1137, 1376] },
    { name: "高平市", coord: [1186.7, 1326.3] },
    { name: "泽州县", coord: [1185.2, 1390.3] },
    { name: "沁水县", coord: [917.3, 1348.7] },
    { name: "阳城县", coord: [986.3, 1394.9] },
    { name: "陵川县", coord: [1346.6, 1407.8] }
    ]

const datas = {
  from: [1381.1, 766.7],
  to: provinces.filter(item => item.city === true).map((item, index) => {
    item.value = index % 2 === 0 ? 1 : 10
    if (item.coord[0] < 1380) {
      item.lineStyle = {
        curveness: -0.3
      }
    }
    return item
  }),
  other: provinces.filter(item => item.city === undefined)
};

console.log(datas)

option = {
  backgroundColor: "#0B1321",
  tooltip: {
    show: false,
    trigger: 'item',
    backgroundColor: 'rgba(166, 200, 76, 0.82)',
    borderColor: '#FFFFCC',
    showDelay: 0,
    hideDelay: 0,
    enterable: true,
    transitionDuration: 0,
    extraCssText: 'z-index:100',
    formatter: function (params, ticket, callback) {
      console.log(params);
      //根据业务自己拓展要显示的内容
      var res = '';
      var name = params.name;
      var value = params.value[params.seriesIndex + 1] || params.value;
      res = "" + name + '
数据：' + value;
      return res;
    },
  },
  visualMap: {
    //图例值控制
    min: 1,
    max: 10,
    calculable: true,
    show: false,
    color: ['#f44336', '#00eaff'],
    textStyle: {
      color: '#fff',
    },
  },
  geo: {
    left: 10,
    right: 10,
    map: 'organ_diagram',
    itemStyle: {
      borderWidth: 0,
    },
    emphasis: {
      focus: 'none',
      itemStyle: {
        areaColor: '#ffffff',
      },
      label: {
        show: false,
      },
    },
    regions: [
      {
        name: 'map11',
        itemStyle: {
          areaColor: 'red',
          color: 'red',
        },
      },
    ],
  },
  series: [
    {
      type: 'lines',
      coordinateSystem: 'geo',
      z: 1,
      zlevel: 2,
      animation: false,
      effect: {
        show: true,
        period: 6,
        trailLength: 0.6,
        symbolSize: 10,
        symbol: 'pin',
        loop: true,
      },
      lineStyle: {
        width: 1,
        curveness: 0.3,
      },

      data: datas.to.map((item) => {
        return {
          lineStyle: item.lineStyle || {},
          coords: [datas.from, item.coord],
          name: item.name,
          value: item.value,
        };
      }),
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right', //显示位置
        offset: [5, 0], //偏移设置
        formatter: function (params) {
          //圆环显示文字
          return params.data.name;
        },
        fontSize: 13,
      },
      emphasis: {
        show: true,
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5; //圆环大小
      },
      itemStyle: {
        show: false,
        color: '#f00',
      },
      data: datas.to.map(function (item) {
        return {
          name: item.name,
          value: [...item.coord, item.value],
        };
      }),
      tooltip: {
        formatter: (params) => {
          return params.name;
        },
      },
    },
    //被攻击点
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right',
        //offset:[5, 0],
        color: '#0f0',
        formatter: '{b}',
        textStyle: {
          color: '#0f0',
        },
      },
      emphasis: {
        show: true,
        color: '#f60',
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5; //圆环大小
      },
      data: [
        {
          name: '平阳',
          value: [...datas.from, 10],
        },
      ],
      tooltip: {
        formatter: (params) => {
          return params.name;
        },
      },
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 3,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 1, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right',
        //offset:[5, 0],
        color: '#0f0',
        formatter: '{b}',
        textStyle: {
          color: '#0f0',
        },
      },
      emphasis: {
        show: true,
        color: '#f60',
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5; //圆环大小
      },
      data: datas.other.map(function (item, index) {
        const color = index % 2 === 0 ? 'red' : 'yellow'
        return {
          name: item.name,
          value: [...item.coord, 1],
          itemStyle: {
            color
          }
        };
      }),
      tooltip: {
        formatter: (params) => {
          return params.name;
        },
      },
    },
  ],
};

myChart.setOption(option);

myChart.on('click', function (event) {
  console.log(event);
  myChart.dispatchAction({
    type: 'highlight',
    geoIndex: 0,
    name: event.name,
  });
});