一站式解決echarts實現區域地圖

近期項目中有個大屏展現的需求,須要顯示行政區的地圖。苦苦尋找的過程當中發現此方面資料不多且大部分在CSDN上付費下載,着實麻煩,特此總結,供你們參考。javascript

直接上圖

關鍵知識點

geo數據

geo是echarts渲染數據的格式,geo是數據基礎,有基礎數據就很容易實現上圖效果了。java

visualMap

visualMap 是視覺映射組件,用於進行『視覺編碼』,也就是將數據映射到視覺元素(視覺通道),地圖的渲染依賴於此配置。git

<script type="text/javascript">
      // 基於準備好的dom,初始化echarts實例
      $.get("../geo/市含縣/320800_full.json", function(huaianJson) {
        echarts.registerMap("huaian", huaianJson);
        var chart = echarts.init(document.getElementById("echartMap"));
        chart.setOption({
          backgroundColor: "#404a59",
          visualMap: {
            type: "continuous",
            min: 0,
            max: 100,
            text: ["High", "Low"],
            realtime: false,
            calculable: true,
            color: ["#3ADEF1", "#0089FC", "#0057FE"],
            show: false
          },
          series: [
            {
              type: "map",
              mapType: "huaian",
              roam: false,
              label: {
                normal: {
                  show: true,
                  color: "#fff"
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                emphasis: { label: { show: true } }
              },
              data: [
                { name: "金湖縣", value: 80 },
                { name: "盱眙縣", value: 50 },
                { name: "漣水縣", value: 80 },
                { name: "洪澤區", value: 70 },
                { name: "淮陰區", value: 80 },
                { name: "淮安區", value: 40 },
                { name: "清江浦區", value: 50 }
              ]
            }
          ]
        });
      });
    </script>
複製代碼

如何拿到geo數據

不得不感謝阿里提供的便利點擊。你能夠得到2種json數據,xxx.json和xxx_full.json。區別在於xxx.json只有當前行政區的輪廓數據,xxx_full.json包含子行政區的數據。github

xxx.json
xxx_full.json

批量下載

手動下載着實麻煩,特提供下載工具。 點此傳送門獲取全部行政區域的數據。或執行npm run create 從新下載最新數據。npm

相關文章
相關標籤/搜索