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

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

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

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

// 參數 option：配置項

this.myChart.setOption(option)

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

/** 
參數opts：對象，實例時的配置
opts：{
  level: String, 關鍵字對應的行政區(qū)級別或商圈，可選值
  showbiz: Boolean, 是否顯示商圈，默認值true
  extensions: String，是否返回行政區(qū)邊界坐標點。默認值：base，不返回行政區(qū)邊界坐標點，取值：all，返回完整行政區(qū)邊界坐標點
  subdistrict：Number，默認1，顯示下級行政區(qū)級數（行政區(qū)級別包括：國家、省/直轄市、市、區(qū)/縣4個級別），商圈為區(qū)/縣下一級。0不返回下一級區(qū)劃，1返回下一級區(qū)劃，2...，3...。
}
**/
const districtSearch = new AMap.DistrictSearch(opts)
// 根據關鍵字查詢行政區(qū)或商圈信息 關鍵字支持：行政區(qū)名、citycode、adcode、商圈名，默認值：“全國”
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, // 地圖對象實例。僅僅獲取數據，不涉及地圖相關的操作時，可以不設置
  })
  districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) => {
    if (error) return
    const mapJson = {}
    // 返回該區(qū)域中全部的子級區(qū)劃Feature數組
    mapJson.features = areaNode.getSubFeatures() || []
    console.log('繪制地圖所需的json數據', 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, // 是否顯示拖拽用的手柄（手柄能拖拽調整選中范圍）
  },
  tooltip: {
    // 提示框組件
    trigger: 'item',
    formatter: function (item) {
      if (item.name == '南海諸島') {
        return ''
      } else {
        return item.name + '<br>業(yè)務數據：' + (item.value || 0) + ' 個'
      }
    },
  },
  series: [
    // 系列列表。每個系列通過 type 決定自己的圖表類型
    {
      type: 'map', // 系列列表。每個系列通過 type 決定自己的圖表類型
      map: 'china', // 地圖。china 為中國全國地圖+右下角南海諸島，china1 為中國全國地圖
      name: '業(yè)務數據', // 系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用于指定對應的系列
      aspectScale: 0.75, // 用于 scale 地圖的長寬比
      zoom: 1.2, // 地圖縮放多少倍
      roam: true, // 允許縮放和平移
      mapType: '自定義地圖',
      selectedMode: 'single', // 點擊區(qū)域，會處于選中狀態(tài)，single單選
      showLegendSymbol: false, // 在圖例相應區(qū)域顯示圖例的顏色標識（系列標識的小圓點），存在 legend 組件時生效
      // center: [100.97, 35.71], // 初始化時的地圖位置，可通過改變地圖中心視角的經緯度來實現地圖的平移
      itemStyle: {
        // 地圖區(qū)域的多邊形圖形樣式
        normal: {
          // 正常時的樣式
          color: '#ccc', // 圖形的顏色
          borderColor: '#303133', // 圖形的描邊顏色
          areaColor: '#d4f7fc', // 地圖區(qū)域顏色
          borderWidth: 0.5, // 描邊線寬。為 0 時無描邊
          label: {
            // 設置地圖區(qū)域名的文本樣式，例如地名的字體大小等
            show: true, // 顯示地區(qū)的文本名稱,默認是不顯示的，默認狀態(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, // 地圖系列中的數據內容數組。數組項可以為單個數值
    },
  ],
}