// registerMap 接收兩個(gè)參數(shù)
// 第一個(gè)是地圖名稱，china 為顯示右下角南海諸島，china1 則不顯示右下角南海諸島
// 第二個(gè)參數(shù)是繪制地圖所需的json數(shù)據(jù)，在這里我下載了兩個(gè)版本的json數(shù)據(jù)放在本地引用來使用，見下文
echarts.registerMap('china', chinaJson)

// 創(chuàng)建實(shí)例，接收三個(gè)參數(shù)
// 參數(shù)dom：實(shí)例容器，一般是一個(gè)具有高寬的div元素
// 參數(shù)theme：可選，應(yīng)用的主題?？梢允且粋€(gè)主題的配置對(duì)象
// 參數(shù)opts：可選，附加參數(shù)
this.myChart = echarts.init(dom, theme, opts)

// 創(chuàng)建實(shí)例，接收三個(gè)參數(shù)
// 參數(shù)eventName：事件名稱，全小寫，例如'click'，'mousemove', 'legendselected'
// 參數(shù)query：可選，過濾條件，能夠只在指定的組件或者元素上進(jìn)行響應(yīng)?？蔀?string 或者 Object
// 參數(shù)handler：事件處理函數(shù)

this.myChart.on(eventName, query, handler)

// 參數(shù) option：配置項(xiàng)

this.myChart.setOption(option)

<!-- html文件 -->
<!--引入高德地圖JSAPI，key值是在AMap官方申請(qǐng)的哦，plugin是項(xiàng)目中用到的插件 -->
<script src="http://webapi.amap.com/maps?v=2.0&key=bb36205e1ab4869979c6505a3cc362ee&plugin=AMap.DistrictSearch"></script>
<!--引入U(xiǎn)I組件庫(kù)（1.1版本） -->
<script src="http://webapi.amap.com/ui/1.1/main.js"></script>

/** 
參數(shù)opts：對(duì)象，實(shí)例時(shí)的配置
opts：{
  level: String, 關(guān)鍵字對(duì)應(yīng)的行政區(qū)級(jí)別或商圈，可選值
  showbiz: Boolean, 是否顯示商圈，默認(rèn)值true
  extensions: String，是否返回行政區(qū)邊界坐標(biāo)點(diǎn)。默認(rèn)值：base，不返回行政區(qū)邊界坐標(biāo)點(diǎn)，取值：all，返回完整行政區(qū)邊界坐標(biāo)點(diǎn)
  subdistrict：Number，默認(rèn)1，顯示下級(jí)行政區(qū)級(jí)數(shù)（行政區(qū)級(jí)別包括：國(guó)家、省/直轄市、市、區(qū)/縣4個(gè)級(jí)別），商圈為區(qū)/縣下一級(jí)。0不返回下一級(jí)區(qū)劃，1返回下一級(jí)區(qū)劃，2...，3...。
}
**/
const districtSearch = new AMap.DistrictSearch(opts)
// 根據(jù)關(guān)鍵字查詢行政區(qū)或商圈信息 關(guān)鍵字支持：行政區(qū)名、citycode、adcode、商圈名，默認(rèn)值：“全國(guó)”
districtSearch.search(obj.data.name, (status, result) => {
  console.log('加載區(qū)劃信息', status, result)
})

// 使用
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
  let districtExplorer = new DistrictExplorer({
    eventSupport: true, // 打開事件支持
    map: null, // 地圖對(duì)象實(shí)例。僅僅獲取數(shù)據(jù)，不涉及地圖相關(guān)的操作時(shí)，可以不設(shè)置
  })
  districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) => {
    if (error) return
    const mapJson = {}
    // 返回該區(qū)域中全部的子級(jí)區(qū)劃Feature數(shù)組
    mapJson.features = areaNode.getSubFeatures() || []
    console.log('繪制地圖所需的json數(shù)據(jù)', mapJson)
  })
})

const option = {
  visualMap: {
    // 視覺映射組件配置
    type: 'continuous', // 定義為連續(xù)型 visualMap
    show: true,
    bottom: '5%',
    left: '2%',
    text: ['高', '低'], // 兩端的文本
    min: 0, // 指定 visualMapContinuous 組件的允許的最小值
    max: 100, // 指定 visualMapContinuous 組件的允許的最大值
    inRange: {
      // 定義 在選中范圍中 的視覺元素
      color: ['#fff', '#A0CFFF', '#409EFF'], // 圖元的顏色
    },
    calculable: true, // 是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）
  },
  tooltip: {
    // 提示框組件
    trigger: 'item',
    formatter: function (item) {
      if (item.name == '南海諸島') {
        return ''
      } else {
        return item.name + '<br>業(yè)務(wù)數(shù)據(jù)：' + (item.value || 0) + ' 個(gè)'
      }
    },
  },
  series: [
    // 系列列表。每個(gè)系列通過 type 決定自己的圖表類型
    {
      type: 'map', // 系列列表。每個(gè)系列通過 type 決定自己的圖表類型
      map: 'china', // 地圖。china 為中國(guó)全國(guó)地圖+右下角南海諸島，china1 為中國(guó)全國(guó)地圖
      name: '業(yè)務(wù)數(shù)據(jù)', // 系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列
      aspectScale: 0.75, // 用于 scale 地圖的長(zhǎng)寬比
      zoom: 1.2, // 地圖縮放多少倍
      roam: true, // 允許縮放和平移
      mapType: '自定義地圖',
      selectedMode: 'single', // 點(diǎn)擊區(qū)域，會(huì)處于選中狀態(tài)，single單選
      showLegendSymbol: false, // 在圖例相應(yīng)區(qū)域顯示圖例的顏色標(biāo)識(shí)（系列標(biāo)識(shí)的小圓點(diǎn)），存在 legend 組件時(shí)生效
      // center: [100.97, 35.71], // 初始化時(shí)的地圖位置，可通過改變地圖中心視角的經(jīng)緯度來實(shí)現(xiàn)地圖的平移
      itemStyle: {
        // 地圖區(qū)域的多邊形圖形樣式
        normal: {
          // 正常時(shí)的樣式
          color: '#ccc', // 圖形的顏色
          borderColor: '#303133', // 圖形的描邊顏色
          areaColor: '#d4f7fc', // 地圖區(qū)域顏色
          borderWidth: 0.5, // 描邊線寬。為 0 時(shí)無描邊
          label: {
            // 設(shè)置地圖區(qū)域名的文本樣式，例如地名的字體大小等
            show: true, // 顯示地區(qū)的文本名稱,默認(rèn)是不顯示的，默認(rèn)狀態(tài)是hoverORclick才顯示
            fontSize: 12,
            textStyle: {
              color: '#606266',
            },
          },
        },
        emphasis: {
          // 選中后的樣式
          areaColor: '#4382F6',
          borderColor: '#fff',
          areaStyle: {
            color: '#fff',
          },
          label: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: '#003767',
            },
          },
        },
      },
      data: this.mapData, // 地圖系列中的數(shù)據(jù)內(nèi)容數(shù)組。數(shù)組項(xiàng)可以為單個(gè)數(shù)值
    },
  ],
}