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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM