Echarts地圖繪製（散點，色卡）

    echarts繪製地圖時，提供了js內部註冊，也提供了json數據手動註冊，這兩種均可以繪製對應地圖，但有一點不一樣的是，js內部只註冊了中國地圖和世界地圖，而json數據提供了世界，中國，中國城市的數據

   手動註冊：引入json數據，使用 echarts.registerMap('china', chinaJSON);就能夠繪製中國地圖了

   因爲echarts提供的geoJSON數據過少，當咱們想繪製中國城市甚至是城市的每一個區的時候，咱們就須要自定義geoJSON數據

   提供geoJSON數據的網站： http://datav.aliyun.com/tools/atlas/#&lat=33.578014746143985&lng=104.23828125&zoom=3

   該網站提供了中國省，市，縣，地區的geoJSON數據，這樣咱們就能夠自定義繪製對應地圖了

   

   散點

   繪製地圖完成後，能夠在上面設置散點圖，根據echarts的配置進行設置

   backgroundColor=「#ccc」 // 地圖的背景顏色

   geo = {  // 地圖相關配置

      map: 「china」 ,  //  「china」是註冊地圖時使用的名稱

     roam: true,  // 地圖是否能夠縮放

    itemStyle: {   // 地圖區域的配置

        normal: {

              areaColor: '#323c48',  // 繪製的每個輪廓的背景顏色

              borderColor: '#111'

        },

        emphasis: {

          areaColor: '#2a333d'，// 鼠標移到區域時的背景顏色

       },

      }

     ...  // 更多配置能夠查看官網

    };  

   visualMap = {  // 視覺映射配置

      show: true,  // 顏色漸變條是否顯示

     color: ["", "", ""],  // 漸變的顏色集合

     textStyle: {  // 地圖上的樣式，好比，字體顏色，大小

        color: #fff, 

    },

   }；

   series = [{

      type: "scatter" ,  // 類型爲散點圖

      coordinateSystem: 'geo',   // 使用該座標系，映射到地圖上

      data: [[121.221, 23.43, 12]], //散點的數據

      symbolSize: 5,  // 散點的大小

   }];

 

  色卡

    繪製地圖完成後，能夠在上面根據繪製的區域進行着色，根據echarts的配置進行設置

      background='#ccc';  // 地圖背景顏色

      visualMap={

         type: 'continuous',  // 顏色漸變條爲連續仍是分段 （continuous 或 piecewise）

         min: 0,   // 漸變的最小值

        max: 100,  // 漸變的最大值

       show: true,  // 是否展現漸變條

       inRange:  {  // 漸變顏色範圍

         color: ['#00FA9A', '#00FF7F', '#7FFF00' ],

      },

      textStyle: {  // 地圖上的樣式

        color: '#fff',

    };

    series=[{

       type: 'map'，  // 類型爲地圖

       map: 'china',   // 該值爲註冊地圖時的名稱

       roam: true,  // 容許地圖縮放

       data: [{ name: '北京', value: 10 }], // 每個數據的name與註冊地圖的geoJSON裏的name對應，否則映射不了

      itemStyle: {   // 地圖區域的配置

        normal: {

              areaColor: '#323c48',  // 繪製的每個輪廓的背景顏色

              borderColor: '#111'

        },

        emphasis: {

          areaColor: '#2a333d'，// 鼠標移到區域時的背景顏色

       },

    }];

 

    更多配置請查看echarts官網： http://www.echartsjs.com/index.html