Echarts集成省份地圖（散點(diǎn)圖）的兩種方法，以河南省為例

效果圖

Echars省份地圖（河南拾盥怼）.gif

概述

在echarts調(diào)用地圖時(shí)，我們往往會(huì)使用GeoJson格式的數(shù)據(jù)脑溢，根據(jù)網(wǎng)上的資料，會(huì)發(fā)現(xiàn)官網(wǎng)會(huì)提供世界赖欣、中國(guó)以及各省的數(shù)據(jù)屑彻。
但是，訪問(wèn)下載最新的echarts組件時(shí)顶吮，會(huì)發(fā)現(xiàn)echarts暫不提供地圖下載社牲。
所以，我們需要自己找GeoJson數(shù)據(jù)悴了，仔細(xì)一點(diǎn)會(huì)發(fā)現(xiàn)搏恤，其實(shí)在安裝echarts依賴時(shí)违寿，已經(jīng)將數(shù)據(jù)下載到項(xiàng)目中了。你想要的省級(jí)Js熟空、Json文件藤巢，node_modules文件下全都有。

echars提供了兩種格式的地圖數(shù)據(jù)息罗，js和json格式掂咒，可根據(jù)需求自己選擇不同的格式來(lái)進(jìn)行地圖數(shù)據(jù)的可視化操作。
  地圖數(shù)據(jù)文件目錄：
   //js數(shù)據(jù)：
    /node_modules/echarts/map/js/world.js //世界地圖js數(shù)據(jù)

    /node_modules/echarts/map/js/china.js //中國(guó)地圖js數(shù)據(jù)

    /node_modules/echarts/map/js/province/henan.js //河南地圖js數(shù)據(jù)
  //json數(shù)據(jù)：
    /node_modules/echarts/map/json/world.json //世界地圖json數(shù)據(jù)

    /node_modules/echarts/map/json/china.json //中國(guó)地圖json數(shù)據(jù)

    /node_modules/echarts/map/json/province/henan.json //河南省地圖json數(shù)據(jù)

同時(shí)迈喉，我們同樣也可以將外部的json數(shù)據(jù)引入使用绍刮。可以從http://datav.aliyun.com/tools/atlas/進(jìn)行下載需要的json數(shù)據(jù)挨摸。（數(shù)據(jù)只到區(qū)縣級(jí)）如圖：

1629454040(1).jpg

案例

本案例基于nuxt+echarts的項(xiàng)目背景孩革，使用json格式的數(shù)據(jù)，來(lái)展示河南省地圖得运，結(jié)合echarts的API定制嫉戚、開(kāi)發(fā)樣式，監(jiān)聽(tīng)鼠標(biāo)事件澈圈，實(shí)現(xiàn)根據(jù)攜帶參數(shù)展示不同的數(shù)據(jù)彬檀。

這里是實(shí)例展示地址：http://jckqyfw.hnexpo.org.cn/enterprise/exportBase

正文

nuxt項(xiàng)目和vue項(xiàng)目使用echars的用法基本相同。

實(shí)現(xiàn)步驟

1瞬女、安裝echarts依賴包窍帝；

npm install echarts --save

2、在plugins目錄下創(chuàng)建echarts.js文件并在里面引入echarts依賴包诽偷；

import Vue from 'vue'
import echarts from 'echarts' // 引入echarts
Vue.prototype.$echarts = echarts // 引入組件（將echarts注冊(cè)為全局）

3坤学、在nuxt.config.js配置文件中引入我們剛剛創(chuàng)建的echart.js

// 配置插件
 plugins: ['~plugins/iview', '~plugins/echarts'],
//配置多個(gè)插件
// plugins: [{ src: '@/plugins/echarts.js', ssr: true },{src:'@/plugins/element-ui', ssr:true},], 

4、給echarts提供一個(gè)容器

<template lang="pug">
.page_main_map
  .page_map_con 
        //-echarts容器
    .echarts
      div(
        :class="className",
        :id="id",
        :style="{ height: height, width: width }",
        v-if="worldDatas.length > 0 && worldGeoCoordMap",
        ref="myEchart"
      )
      .loading(v-else)
        img(:src="loadingBack", alt="圖片加載失敗")
    //- 右側(cè)彈框
  el-dialog(
    :visible.sync="dialog1Visible",
    width="400px",
    :modal="false",
    :before-close="handle1Close"
  )
    .dialog_show_detail
      .name {{ dialogData.name }}
      .desc {{ dialogData.desc }}
</template>
//nuxt 項(xiàng)目引入了pug模板

5报慕、引入echarts和河南省地圖的json數(shù)據(jù)

import echarts from "echarts"; // 引入echarts
import henan from "../node_modules/echarts/map/json/province/henan.json"; // 引入河南地圖數(shù)據(jù)

6深浮、實(shí)例化echarts對(duì)象

this.chart = echarts.init(this.$refs.myEchart);

PS：nuxt項(xiàng)目中，用 document.getElementById(this.id)獲取DOM元素會(huì)報(bào)錯(cuò)
報(bào)錯(cuò)內(nèi)容：Cannot read property 'getAttribute' of null

報(bào)錯(cuò)展示.jpg

echarts.registerMap("河南", henan); //加載json數(shù)據(jù)，并注冊(cè)到echars中

8蜗顽、監(jiān)聽(tīng)瀏覽器大小變化重渲染組件

window.onresize = echarts.init(this.$refs.myEchart).resize;//監(jiān)聽(tīng)瀏覽器大小變化重渲染組件

9布卡、配置series
series（系列）是指：一組數(shù)值以及他們映射成的圖。

“系列”這個(gè)詞原本可能來(lái)源于“一系列的數(shù)據(jù)”雇盖，而在 echarts 中取其擴(kuò)展的概念忿等，不僅表示數(shù)據(jù)，也表示數(shù)據(jù)映射成為的圖崔挖。

所以贸街，一個(gè) 系列 包含的要素至少有：一組數(shù)值庵寞、圖表類(lèi)型（series.type）、以及其他的關(guān)于這些數(shù)據(jù)如何映射成圖的參數(shù)薛匪。

其中series.type很關(guān)鍵捐川，表示該例是地圖還是餅圖或者是柱狀圖，series.data:圖表所用數(shù)據(jù)蛋辈，實(shí)際項(xiàng)目中可以通過(guò)http獲取數(shù)據(jù)属拾，再賦值給series.data

      var series = [];
      [[["鄭州", [113.63035, 34.79362, 10]], this.worldDatas]].forEach(
        (item, i) => {
          series.push(
            // 國(guó)家級(jí)基地
            {
              type: "effectScatter", //effectScatter 特效散點(diǎn)圖
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                //  漣漪特效定制
                period: 4, //動(dòng)畫(huà)時(shí)間，值越小速度越快
                brushType: "stroke", //波紋繪制方式 stroke, fill
                scale: 2, //波紋圓環(huán)最大限制冷溶，值越大波紋越大 4
              },
              // 標(biāo)簽樣式定制
              label: {
                //   正常樣式定制
                normal: {
                  show: false, //label是否顯示
                  position: "right", //顯示位置
                  offset: [5, 0], //label偏移設(shè)置
                  formatter: function (params) {
                    //   console.log(params) //市 名稱
                    //圓環(huán)顯示文字
                    return params.data.name;
                  },
                  fontSize: 12,
                },
                // 高亮樣式
                emphasis: {
                  show: false, //名稱是否顯示
                },
              },
              symbol: "circle",
              symbolSize: function (val) {
                // return 5 + val[0] * 5; //圓環(huán)大小
                return 10; //圓點(diǎn)的圓心大小
              },
              //   地圖外觀
              itemStyle: {
                //   正常顯示的樣式
                normal: {
                  show: false,
                  color: "#fff", //lv色
                },
              },
              //   市 數(shù)據(jù)詳情
              data: item[1].map(function (dataItem) {
                if (dataItem.type == 1) {
                  return {
                    name: dataItem.name,
                    value: worldGeoCoordMap[dataItem.name],
                    id: dataItem.id,
                    desc: dataItem.desc,
                  };
                }
              }),
            },
            // 省級(jí)
            {
              type: "scatter", //  scatter
              coordinateSystem: "geo",
              zlevel: 4,
              rippleEffect: {
                //漣漪特效
                period: 4, //動(dòng)畫(huà)時(shí)間渐白，值越小速度越快
                brushType: "stroke", //波紋繪制方式 stroke, fill
                scale: 2, //波紋圓環(huán)最大限制，值越大波紋越大 4
              },
              label: {
                normal: {
                  show: false, //名稱是否顯示
                  position: "right", //顯示位置
                  offset: [5, 0], //國(guó)家名稱偏移設(shè)置
                  formatter: function (params) {
                    //   console.log(params) //國(guó)家名稱
                    //圓環(huán)顯示文字
                    return params.data.name;
                  },
                  fontSize: 12,
                },
                // 高亮
                emphasis: {
                  show: false, //名稱是否顯示
                },
              },
              symbol: "circle",
              symbolSize: function (val) {
                console.log(val);
                // return 5 + val[0] * 5; //圓環(huán)大小
                return 10; //圓點(diǎn)的圓心大小
              },
              itemStyle: {
                normal: {
                  show: true,
                  color: "#f00", //紅色
                },
              },
              //   市 數(shù)據(jù)詳情
              data: item[1].map(function (dataItem) {
                if (dataItem.type == 2) {
                  return {
                    name: dataItem.name,
                    value: worldGeoCoordMap[dataItem.name],
                    id: dataItem.id,
                    //   flagUrl: dataItem.flagUrl,
                    desc: dataItem.desc,
                  };
                }
              }),
            },
            // 省會(huì)  紅色五角星
            {
              type: "scatter", //圖表類(lèi)型--散點(diǎn)（氣泡）圖
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                //漣漪特效
                period: 4,
                brushType: "stroke",
                scale: 4,
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  // offset:[5, 0],//圖標(biāo)定位偏移量
                  color: "#0f0",
                  formatter: "逞频",
                  textStyle: {
                    color: "#0f0", //綠色--定位點(diǎn)的字體顏色
                  },
                },
                emphasis: {
                  show: true,
                  color: "#f60", //橘色--定位點(diǎn)被hover的時(shí)候的顏色
                },
              },
              symbol:
                "image://http://going-global.oss-cn-beijing.aliyuncs.com/20201026/dff56578f2ba465cb967b2124dd17f62.png", //圖片
              //   symbol: "pin", //圖元的圖形類(lèi)別
              symbolSize: 15, //圖元的大小纯衍。
              symbolOffset: [0, "-50%"],
              color: "#000",
              // 坐標(biāo)
              data: [
                {
                  name: item[0][0],
                  value: item[0][1],
                },
              ],
            }
          );
        }
      );
     

10、配置option

var option = {
        backgroundColor: "#013954", //地圖背景色
        //顯示懸浮窗口--標(biāo)簽
        tooltip: {
          trigger: "item",
          confine: true,
          // backgroundColor: "rgba(166, 200, 76, 0.82)", //標(biāo)簽背景色
          backgroundColor: "rgba(21, 21, 21, 0.82)", //標(biāo)簽背景色
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true, //鼠標(biāo)是否可進(jìn)入提示框浮層中苗胀，默認(rèn)為false襟诸，如需詳情內(nèi)交互，如添加鏈接基协，按鈕歌亲，可設(shè)置為 true
          transitionDuration: 0, //提示框浮層的移動(dòng)動(dòng)畫(huà)過(guò)渡時(shí)間，單位是 s澜驮，設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)
          extraCssText: "z-index:100;", //修改標(biāo)簽大小樣式等
          //   點(diǎn)擊事件陷揪，點(diǎn)擊圓點(diǎn)，跳轉(zhuǎn)
          formatter: function (params, ticket, callback) {
            //根據(jù)業(yè)務(wù)自己拓展要顯示的內(nèi)容
            // console.log(params);
            var res = "";
            var name = params.name;
            var flag = "'" + params.data.flagUrl + "'";
            res = "<span style='color:#fff;'>" + name + "</span>";
            /* res =
              "<span style='color:#fff;'>" +
              name +
              "</span><br/><img style='width:40px;' src=" +
              flag +
              ">"; */
            return res;
          },
        },
        visualMap: {
          //圖例值控制
          min: 1, // 值域最小值杂穷，必須參數(shù)
          max: 40, // 值域最大值悍缠，必須參數(shù) 1
          calculable: true, // 是否啟用值域漫游
          //   type:'piecewise',
          //   splitNumber: 5, //數(shù)據(jù)的視覺(jué)映射
          show: false,
          // color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],//可根據(jù)高低值來(lái)做顏色區(qū)分
          color: ["#fc9700", "#00eaff"], //這里的顏色可以統(tǒng)一設(shè)置所有的散點(diǎn)的顏色
          textStyle: {
            color: "#fff", // 值域控件的文本顏色
          },
        },
        geo: {
          map: "河南", // 可選 china  world  省份（河南省）
          // 關(guān)于map的值：中國(guó)耐量、世界地圖是英文飞蚓，省份是中文。比如 ‘china’ 廊蜒，'浙江’等趴拧，若填寫(xiě)'zhejiang'是找不到的。引用之前可以查看一下js文件啦劲藐。一定要引對(duì)
          zoom: 1.2, //
          //   center: [113.625351,34.746303, 10],//坐標(biāo)定位和left top  bottom  right沖突八堡，使用一個(gè)就可以啦
          left: "center", //左右居中
          top: "middle", //水平居中
          label: {
            //  是否顯示市區(qū)名字
            // normal: {
            //   show: true,
            //   color: "#000",
            // },
            //   hover高亮的時(shí)候顯示市區(qū)名字
            emphasis: {
              show: true, //地圖中名稱的顯示與否
              color: "#fff",
            },
          },
          roam: true, //是否允許縮放
          scaleLimit: {
            //所屬組件的z分層，z值小的圖形會(huì)被z值大的圖形覆蓋
            min: 1, //最小的縮放值
            max: 40, //最大的縮放值
          },
          //   地圖外觀定制
          itemStyle: {
            //   正常顯示的樣式
            normal: {
              color: "rgba(51, 69, 89, .5)", //地圖顏色
              borderColor: "#516a89", //省市邊界線00fcff 516a89
              borderWidth: 1,
            },
            // 鼠標(biāo)懸浮下樣式
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //高亮背景色
            },
          },
        },
        series: series,
      };

11聘芜、setOptions 設(shè)置option里面的配置信息

      this.chart.setOption(option);

12、右側(cè)的點(diǎn)擊彈出事件

let that = this;
      this.chart.on("click", function (param) {
        console.log(param);
        if (param.data) {
          var id = param.data.id;
          if (id != "00") {
            that.dialogData = {
              name: param.data.name,
              desc: param.data.desc,
            };
            that.dialog1Visible = true;
            console.log(this.dialog1Visible, this.dialogData);
          }
        } else {
          return;
        }
      });

注：注意這里的this指向缝龄，已經(jīng)爬過(guò)坑啦汰现，不要再掉進(jìn)去啦９业！瞎饲！

整體代碼

<template lang="pug">
.page_main_map
  .page_map_con 
    .echarts
      div(
        :class="className",
        :id="id",
        :style="{ height: height, width: width }",
        v-if="worldDatas.length > 0 && worldGeoCoordMap",
        ref="myEchart"
      )
      .loading(v-else)
        img(:src="loadingBack", alt="圖片加載失敗")
  el-dialog(
    :visible.sync="dialog1Visible",
    width="400px",
    :modal="false",
    :before-close="handle1Close"
  )
    .dialog_show_detail
      .name {{ dialogData.name }}
      .desc {{ dialogData.desc }}
</template>
<script>
import http from "~/plugins/axios.js";
import echarts from "echarts";
// import "../node_modules/echarts/map/js/world.js";
import "../node_modules/echarts/map/js/china.js"; // 引入中國(guó)地圖數(shù)據(jù)
import henan from "../node_modules/echarts/map/json/province/henan.json"; // 引入河南地圖數(shù)據(jù)
// import { getCountryInfoSimple, getAllCountryPosition } from "@/api/index.js";
export default {
  name: "echars",
  props: {
    className: {
      type: String,
      default: "yourClassName",
    },
    id: {
      type: String,
      default: "yourID",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "79vh",
    },
  },
  data() {
    return {
      dialogTitle: "標(biāo)題",
      dialog1Visible: false,
      dialogData: {
        title: "",
        content: "",
      },
      loadingBack:
        "https://going-global.oss-cn-beijing.aliyuncs.com/images/loading.gif",
      title: "圖表",
      placeholder: "用戶名/電話",
      find: "2", //1顯示新增按鈕口叙，2顯示導(dǎo)入按鈕，若不顯示這兩個(gè)按鈕可以寫(xiě)0或者不寫(xiě)值
      chart: null,
      //   坐標(biāo)
      worldGeoCoordMap: {
        鄭州: [113.63035, 34.79362, 1],
        鄭州航空港區(qū)智能終端外貿(mào)產(chǎn)業(yè)基地: [113.818422, 34.463303, 2],
        "省級(jí)新型耐火材料出口基地（新密）": [113.769057, 34.727621, 1],
      },
      //   國(guó)家詳情
      worldDatas: [
        {
          name: "鄭州",
          value: 0,
          id: "00",
          flagUrl:
            "https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
          鄭州: [113.63035, 34.79362],
          type: 1, // 1  國(guó)家級(jí)  2  省級(jí)
        },
        {
          name: "鄭州航空港區(qū)智能終端外貿(mào)產(chǎn)業(yè)基地",
          value: 0,
          id: "118",
          flagUrl:
            "https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
          鄭州航空港區(qū)智能終端外貿(mào)產(chǎn)業(yè)基地: [113.818422, 34.463303],
          desc: "鄭州航空港經(jīng)濟(jì)綜合實(shí)驗(yàn)區(qū)已入駐富士康嗅战、中興妄田、vivo等200多家智能終端企業(yè)和超過(guò)100家配套企業(yè)，形成了“整機(jī)+配套+核心零組件”手機(jī)全產(chǎn)業(yè)鏈驮捍，年產(chǎn)值突破3000億元疟呐，進(jìn)出口總額達(dá)3400億元，累計(jì)生產(chǎn)手機(jī)超過(guò)12億部东且，手機(jī)年產(chǎn)量占世界的1/7启具，成為全球最大的高端智能手機(jī)生產(chǎn)基地。",
          type: 2, // 1  國(guó)家級(jí)  2  省級(jí)
        },
        {
          name: "省級(jí)新型耐火材料出口基地（新密）",
          value: 0,
          id: "119",
          flagUrl:
            "https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
          "省級(jí)新型耐火材料出口基地（新密）": [113.769057, 34.727621],
          desc: "新密市外貿(mào)進(jìn)出口企業(yè)53家珊泳，主要出口行業(yè)為耐火材料出口鲁冯，占比重為90%，主要出口國(guó)家為阿根廷色查、澳大利亞薯演、印度、阿曼秧了、比利時(shí)跨扮、伊朗、墨西哥示惊、巴基斯坦等國(guó)家好港，我們的主要出口行業(yè)耐火材料，總體提質(zhì)發(fā)展是關(guān)鍵米罚，隨著節(jié)能钧汹、環(huán)保標(biāo)準(zhǔn)提高及市場(chǎng)競(jìng)爭(zhēng)壓力加大，通過(guò)優(yōu)化布局录择、關(guān)停搬遷拔莱、環(huán)保治理、改造提升隘竭、完善配套等措施塘秦，部分技術(shù)及設(shè)備落后的企業(yè)退出市場(chǎng)，產(chǎn)業(yè)發(fā)展在調(diào)整升級(jí)中蓄勢(shì)賦能动看。截止目前尊剔，我市耐材企業(yè)從上千家清退保留至305家，企業(yè)稅收達(dá)到歷史最高點(diǎn)菱皆，產(chǎn)品附加值须误、畝產(chǎn)經(jīng)濟(jì)效益持續(xù)提升挨稿，“國(guó)家級(jí)綠色工廠”企業(yè)數(shù)量逐步增加，行業(yè)環(huán)保治理成效顯著京痢，多家企業(yè)被被鄭環(huán)攻堅(jiān)辦（2020）1號(hào)文件列為民生保障類(lèi)企業(yè)奶甘，除紅色預(yù)警外，不會(huì)再被限產(chǎn)停產(chǎn)企業(yè)祭椰，行業(yè)發(fā)展質(zhì)量再創(chuàng)佳績(jī)臭家；品牌培育、進(jìn)出口方淤、研發(fā)創(chuàng)新钉赁、人工智能、機(jī)器人臣淤、物聯(lián)網(wǎng)橄霉、大數(shù)據(jù)、區(qū)塊鏈等新技術(shù)新模式在行業(yè)中廣泛運(yùn)用邑蒋，數(shù)字化提升產(chǎn)業(yè)層級(jí)作用明顯姓蜂，行業(yè)發(fā)展步入新的歷史時(shí)期。目前因?yàn)橐咔楸l(fā)医吊，新密市新型耐火材料出口基地出口企業(yè)受影響比較嚴(yán)重钱慢，客戶推遲簽訂訂單和推遲交貨情況較多。進(jìn)出口運(yùn)營(yíng)比較困難卿堂，國(guó)際運(yùn)輸費(fèi)用增加束莫，收款時(shí)間延長(zhǎng)，導(dǎo)致訂單量下降草描，出口額大幅度下滑览绿。隨著疫情穩(wěn)定和國(guó)家、省市政策的不斷推出和落實(shí)穗慕，我們也出臺(tái)政策饿敲，加強(qiáng)宣傳力度、增強(qiáng)企業(yè)信心逛绵，穩(wěn)定和擴(kuò)大貿(mào)易規(guī)模怀各，促進(jìn)產(chǎn)業(yè)發(fā)展。",
          type: 1, // 1  國(guó)家級(jí)  2  省級(jí)
        },
      ],
    };
  },
  mounted() {
    console.log(echarts.init(this.$refs.myEchart));
    this.$nextTick(() => {
      this.initChart(); //世界地圖
    });
  },
  created() {
    // this.getCountryData(); //國(guó)家數(shù)據(jù)
    console.log(henan);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handle1Close() {
      this.dialog1Visible = false;
      console.log(this.dialog1Visible);
      this.dialogData = {
        name: "",
        desc: "",
      };
    },
    // 國(guó)家信息
    getCountryData() {
      //   getCountryInfoSimple().then((res) => {
      http
        .get("http://182.92.149.28:8887/api/countryInfo/simple")
        .then((res) => {
          // console.log(res.success)
          if (res.success) {
            let cur = {
              name: "鄭州",
              value: 0,
              id: "00",
              flagUrl:
                "https://going-global.oss-cn-beijing.aliyuncs.com/countryFlags/%E4%B8%AD%E5%9B%BD.png",
            };
            res.result.unshift(cur);
            this.worldDatas = res.result;
            //   getAllCountryPosition().then((res) => {
            http
              .get("http://182.92.149.28:8887/api/countryInfo/position")
              .then((res) => {
                if (res.success) {
                  res.result.鄭州 = [113.63035, 34.79362, 10];
                  this.worldGeoCoordMap = res.result;
                  this.$nextTick(() => {
                    this.initChart(); //世界地圖
                  });
                } else {
                  this.worldGeoCoordMap = [];
                }
              });
          } else {
            this.worldDatas = [];
          }
        });
    },
    initChart() {
      echarts.registerMap("河南", henan); //加載json數(shù)據(jù)术浪，并注冊(cè)到echars中
      this.chart = echarts.init(this.$refs.myEchart);
      window.onresize = echarts.init(this.$refs.myEchart).resize;//監(jiān)聽(tīng)瀏覽器大小變化重渲染組件
      this.chart.showLoading({
        text: "loading...",
        color: "#4cbbff", //淺藍(lán)色
        textColor: "#4cbbff",
        maskColor: "rgba(0, 0, 0, 0.9)",
        zlevel: 0,
        fontSize: 12, // 字體大小瓢对。從 `v4.8.0` 開(kāi)始支持。
        showSpinner: true, // 是否顯示旋轉(zhuǎn)動(dòng)畫(huà)（spinner）胰苏。從 `v4.8.0` 開(kāi)始支持硕蛹。
        spinnerRadius: 10, // 旋轉(zhuǎn)動(dòng)畫(huà)（spinner）的半徑。從 `v4.8.0` 開(kāi)始支持。
        lineWidth: 5, // 旋轉(zhuǎn)動(dòng)畫(huà)（spinner）的線寬妓美。從 `v4.8.0` 開(kāi)始支持僵腺。
      });
      var worldGeoCoordMap = this.worldGeoCoordMap;
      // var worldGeoCoordMap = {
      //   中國(guó): [113.63035,34.79362, 0],
      //   蘇丹: [32.581, 15.496216, 0],
      //   泰國(guó): [100.438809, 13.791821, 0],
      //   馬達(dá)加斯加: [47.502249, -18.833648, 0],
      //   文萊: [115.0, 4.52, 0],
      //   巴基斯坦: [73.1, 33.4, 0],
      //   孟加拉國(guó): [90.26, 23.43, 0],
      //   希臘: [23.46, 37.58, 0],
      //   所羅門(mén)群島: [159.57, -9.27, 0],
      //   意大利: [12.29, 41.54, 0],
      //   俄羅斯: [37.35, 55.45, 0],
      //   斐濟(jì): [178.3, -18.06, 0],
      //   智利: [-70.747113, -33.417573, 0],
      //   巴拿馬: [-79.25, 9.0, 0],
      //   薩摩亞: [-172.469858, -13.629688, 0],
      // };
      // 線走向--//對(duì)坐標(biāo)點(diǎn)進(jìn)行格式化鲤孵，可格式化坐標(biāo)點(diǎn)的位置壶栋，大小，顏色等
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = worldGeoCoordMap[dataItem[0].name];
          var toCoord = [113.63035, 34.79362]; //鄭州
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value,
              },
              {
                coord: toCoord,
              },
            ]);
          }
        }
        return res;
      };
      var series = [];
      [[["鄭州", [113.63035, 34.79362, 10]], this.worldDatas]].forEach(
        (item, i) => {
          //   console.log(this.worldGeoCoordMap);
          //   console.log(this.worldDatas);
          //   console.log(henan.features);
          series.push(
            /*  // 線--走向
            {
              type: "lines",
              zlevel: 2,
              effect: {
                show: true,
                period: 4, //箭頭指向速度普监，值越小速度越快
                trailLength: 0.02, //特效尾跡長(zhǎng)度[0,1]值越大贵试，尾跡越長(zhǎng)重
                symbol: "arrow", //箭頭圖標(biāo)
                symbolSize: 5, //圖標(biāo)大小
              },
              lineStyle: {
                normal: {
                  width: 1, //尾跡線條寬度
                  opacity: 1, //尾跡線條透明度
                  curveness: 0.3, //尾跡線條曲直度
                },
              },
              data: convertData(item[1]),
            }, */
            // 國(guó)家級(jí)基地
            {
              type: "effectScatter", //effectScatter 特效散點(diǎn)圖
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                //  漣漪特效定制
                period: 4, //動(dòng)畫(huà)時(shí)間，值越小速度越快
                brushType: "stroke", //波紋繪制方式 stroke, fill
                scale: 2, //波紋圓環(huán)最大限制凯正，值越大波紋越大 4
              },
              // 標(biāo)簽樣式定制
              label: {
                //   正常樣式定制
                normal: {
                  show: false, //label是否顯示
                  position: "right", //顯示位置
                  offset: [5, 0], //label偏移設(shè)置
                  formatter: function (params) {
                    //   console.log(params) //市 名稱
                    //圓環(huán)顯示文字
                    return params.data.name;
                  },
                  fontSize: 12,
                },
                // 高亮樣式
                emphasis: {
                  show: false, //名稱是否顯示
                },
              },
              symbol: "circle",
              symbolSize: function (val) {
                // return 5 + val[0] * 5; //圓環(huán)大小
                return 10; //圓點(diǎn)的圓心大小
              },
              //   地圖外觀
              itemStyle: {
                //   正常顯示的樣式
                normal: {
                  show: false,
                  color: "#fff", //lv色
                },
              },
              //   市 數(shù)據(jù)詳情
              data: item[1].map(function (dataItem) {
                // console.log(item);
                // console.log(dataItem.name, dataItem); //國(guó)家名稱  //國(guó)家詳情數(shù)據(jù)
                // console.log(worldGeoCoordMap[dataItem.name]); //坐標(biāo)
                if (dataItem.type == 1) {
                  return {
                    name: dataItem.name,
                    value: worldGeoCoordMap[dataItem.name],
                    // value: this.worldGeoCoordMap[dataItem.name],
                    // value: dataItem.position.concat([0]),
                    id: dataItem.id,
                    //   flagUrl: dataItem.flagUrl,
                    desc: dataItem.desc,
                  };
                }
              }),
            },
            // 省級(jí)
            {
              type: "scatter", //  scatter
              coordinateSystem: "geo",
              zlevel: 4,
              rippleEffect: {
                //漣漪特效
                period: 4, //動(dòng)畫(huà)時(shí)間毙玻，值越小速度越快
                brushType: "stroke", //波紋繪制方式 stroke, fill
                scale: 2, //波紋圓環(huán)最大限制，值越大波紋越大 4
              },
              label: {
                normal: {
                  show: false, //名稱是否顯示
                  position: "right", //顯示位置
                  offset: [5, 0], //國(guó)家名稱偏移設(shè)置
                  formatter: function (params) {
                    //   console.log(params) //國(guó)家名稱
                    //圓環(huán)顯示文字
                    return params.data.name;
                  },
                  fontSize: 12,
                },
                // 高亮
                emphasis: {
                  show: false, //名稱是否顯示
                },
              },
              symbol: "circle",
              symbolSize: function (val) {
                console.log(val);
                // return 5 + val[0] * 5; //圓環(huán)大小
                return 10; //圓點(diǎn)的圓心大小
              },
              itemStyle: {
                normal: {
                  show: true,
                  color: "#f00", //紅色
                },
              },
              //   市 數(shù)據(jù)詳情
              data: item[1].map(function (dataItem) {
                // console.log(item);
                // console.log(dataItem.name, dataItem); //國(guó)家名稱  //國(guó)家詳情數(shù)據(jù)
                // console.log(worldGeoCoordMap[dataItem.name]); //坐標(biāo)
                if (dataItem.type == 2) {
                  return {
                    name: dataItem.name,
                    value: worldGeoCoordMap[dataItem.name],
                    // value: this.worldGeoCoordMap[dataItem.name],
                    // value: dataItem.position.concat([0]),
                    id: dataItem.id,
                    //   flagUrl: dataItem.flagUrl,
                    desc: dataItem.desc,
                  };
                }
              }),
            },
            //定位標(biāo)簽---被攻擊點(diǎn)--線的終點(diǎn)
            // 首都  省會(huì)  紅色五角星
            {
              type: "scatter", //圖表類(lèi)型--散點(diǎn)（氣泡）圖
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                //漣漪特效
                period: 4,
                brushType: "stroke",
                scale: 4,
              },
              label: {
                normal: {
                  show: true,
                  position: "top",
                  // offset:[5, 0],//圖標(biāo)定位偏移量
                  color: "#0f0",
                  formatter: "廊散",
                  textStyle: {
                    color: "#0f0", //綠色--定位點(diǎn)的字體顏色
                  },
                },
                emphasis: {
                  show: true,
                  color: "#f60", //橘色--定位點(diǎn)被hover的時(shí)候的顏色
                },
              },
              symbol:
                "image://http://going-global.oss-cn-beijing.aliyuncs.com/20201026/dff56578f2ba465cb967b2124dd17f62.png", //圖片
              //   symbol: "pin", //圖元的圖形類(lèi)別
              symbolSize: 15, //圖元的大小桑滩。
              symbolOffset: [0, "-50%"],
              color: "#000",
              // 坐標(biāo)
              data: [
                {
                  name: item[0][0],
                  value: item[0][1],
                },
              ],
            }
          );
        }
      );
      var option = {
        backgroundColor: "#013954", //地圖背景色
        //顯示懸浮窗口--標(biāo)簽
        tooltip: {
          trigger: "item",
          confine: true,
          // backgroundColor: "rgba(166, 200, 76, 0.82)", //標(biāo)簽背景色
          backgroundColor: "rgba(21, 21, 21, 0.82)", //標(biāo)簽背景色
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true, //鼠標(biāo)是否可進(jìn)入提示框浮層中，默認(rèn)為false允睹，如需詳情內(nèi)交互运准，如添加鏈接，按鈕缭受，可設(shè)置為 true
          transitionDuration: 0, //提示框浮層的移動(dòng)動(dòng)畫(huà)過(guò)渡時(shí)間胁澳，單位是 s，設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)
          extraCssText: "z-index:100;", //修改標(biāo)簽大小樣式等
          //   點(diǎn)擊事件米者，點(diǎn)擊圓點(diǎn)韭畸，跳轉(zhuǎn)
          formatter: function (params, ticket, callback) {
            //根據(jù)業(yè)務(wù)自己拓展要顯示的內(nèi)容
            // console.log(params);
            var res = "";
            var name = params.name;
            var flag = "'" + params.data.flagUrl + "'";
            res = "<span style='color:#fff;'>" + name + "</span>";
            /* res =
              "<span style='color:#fff;'>" +
              name +
              "</span><br/><img style='width:40px;' src=" +
              flag +
              ">"; */
            return res;
          },
        },
        visualMap: {
          //圖例值控制
          min: 1, // 值域最小值，必須參數(shù)
          max: 40, // 值域最大值蔓搞，必須參數(shù) 1
          calculable: true, // 是否啟用值域漫游
          //   type:'piecewise',
          //   splitNumber: 5, //數(shù)據(jù)的視覺(jué)映射
          show: false,
          // color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],//可根據(jù)高低值來(lái)做顏色區(qū)分
          color: ["#fc9700", "#00eaff"], //這里的顏色可以統(tǒng)一設(shè)置所有的散點(diǎn)的顏色
          textStyle: {
            color: "#fff", // 值域控件的文本顏色
          },
        },
        geo: {
          map: "河南", // 可選 china  world  省份（河南室榷　）
          // 關(guān)于map的值：中國(guó)、世界地圖是英文喂分，省份是中文锦庸。比如 ‘china’ ，'浙江’等妻顶，若填寫(xiě)'zhejiang'是找不到的酸员。引用之前可以查看一下js文件啦。一定要引對(duì)
          zoom: 1.2, //
          //   center: [113.625351,34.746303, 10],//坐標(biāo)定位和left top  bottom  right沖突讳嘱，使用一個(gè)就可以啦
          left: "center", //左右居中
          top: "middle", //水平居中
          label: {
            //  是否顯示市區(qū)名字
            // normal: {
            //   show: true,
            //   color: "#000",
            // },
            //   hover高亮的時(shí)候顯示市區(qū)名字
            emphasis: {
              show: true, //地圖中名稱的顯示與否
              color: "#fff",
            },
          },
          roam: true, //是否允許縮放
          scaleLimit: {
            //所屬組件的z分層幔嗦，z值小的圖形會(huì)被z值大的圖形覆蓋
            min: 1, //最小的縮放值
            max: 40, //最大的縮放值
          },
          //   地圖外觀定制
          itemStyle: {
            //   正常顯示的樣式
            normal: {
              color: "rgba(51, 69, 89, .5)", //地圖顏色
              borderColor: "#516a89", //省市邊界線00fcff 516a89
              borderWidth: 1,
            },
            // 鼠標(biāo)懸浮下樣式
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //高亮背景色
            },
          },
        },
        series: series,
      };
      this.chart.hideLoading();
      // 把配置和數(shù)據(jù)放這里
      this.chart.setOption(option);
      let that = this;
      this.chart.on("click", function (param) {
        console.log(param);
        if (param.data) {
          var id = param.data.id;
          if (id != "00") {
            that.dialogData = {
              name: param.data.name,
              desc: param.data.desc,
            };
            that.dialog1Visible = true;
            console.log(this.dialog1Visible, this.dialogData);
          }
        } else {
          return;
        }
      });
    },
  },
};
</script>
<style lang="less">
.page_main_map {
  .page_map_con {
    width: 824px;
    .echarts {
      .loading {
        text-align: center;
        height: 90vh;
        padding: 300px 0;
        img {
          display: inline-block;
          width: 100px;
        }
      }
    }
  }
  .dialog_show_detail {
    .name {
      font-size: 16px;
      font-weight: bold;
      color: #222222;
      line-height: 36px;
      padding-bottom: 10px;
    }
    .desc {
      font-size: 14px;
      color: #666666;
      line-height: 22px;
      text-indent: 2em;
    }
  }
}
</style>