❤ Data visualization ❤ Key words: Map Visual Mapping scatter (bubble) component based on echarts + geojason [17] - Inner Mongolia Province

  ☀️ My home page: YYDataV ☀️ Welcome to praise 👍 Collection ⭐ Message, welcome to communicate

catalogue

❤️ Effect display ❤️

1, Scheme architecture

1. Map module

2. Key technology

2, Coding implementation (based on length and readability, some key codes are shown here)

1. html page layout

2. Import map file

3. Draw map bubble chart, visual mapping effect

4. Dynamically load geojason data

5. GeoJSON data format

3, Source download

❤️ Series articles ❤️

In recent years, the emergence of data visualization big screen has set off a wave after wave. Many business owners want to build their own "cool hanging and exploding sky" domineering president big screen cockpit.

Don't say much, start sharing dry goods, welcome to discuss! QQ wechat same number: 6550523 what we share today is a very important component in data visualization [maps of provinces and cities in China]. The map has too many advantages. It can show the relationship between regional and enterprise data very cool and clearly, so as to achieve a clear effect at a glance.

❤️ Effect display ❤️

 

 

1, Scheme architecture

1. Map module

Including the following cities: Alxa League, Bayannur, Baotou, Chifeng, Ordos, Hohhot, Hulunbuir, Tongliao, Wuhai, Ulanqab, Xilin Gol, Xing'an League  .

2. Key technology

  • Echarts geographic coordinate system (geo)
  • Different effect scatters in each area of Echarts
  • Different visual mapping color effects (visual map) in each region of Echarts
  • International standard data set (geoJSON)

2, Coding implementation (based on length and readability, some key codes are shown here)

1. html page layout

  <h2>Inner Mongolia - nei4_meng2_gu3</h2>
  <table>
	<tr>
	  <td><div id="a1_la1_shan4_meng2" class="citymap"></div></td>
	  <td><div id="ba1_yan4_nao4_er3" class="citymap"></div></td>
	  <td><div id="bao1_tou2" class="citymap"></div></td>
	  <td><div id="chi4_feng1" class="citymap"></div></td>
	  </tr><tr>
	  <td><div id="e4_er3_duo1_si1" class="citymap"></div></td>
	  <td><div id="hu1_he2_hao4_te4" class="citymap"></div></td>
	  <td><div id="hu1_lun2_bei4_er3" class="citymap"></div></td>
	  <td><div id="tong1_liao2" class="citymap"></div></td>
	  </tr><tr>
	  <td><div id="wu1_hai3" class="citymap"></div></td>
	  <td><div id="wu1_lan2_cha2_bu4" class="citymap"></div></td>
	  <td><div id="xi2_lin2_guo1_le4_meng2" class="citymap"></div></td>
	  <td><div id="xing1_an1_meng2" class="citymap"></div></td>
	  </tr><tr>
	</tr>
  </table>

2. Import map file

  <!-- 17 Inner Mongolia -->
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_a1_la1_shan4_meng2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_ba1_yan4_nao4_er3.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_bao1_tou2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_chi4_feng1.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_e4_er3_duo1_si1.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_hu1_he2_hao4_te4.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_hu1_lun2_bei4_er3.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_tong1_liao2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_wu1_hai3.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_wu1_lan2_cha2_bu4.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_xi2_lin2_guo1_le4_meng2.js"></script>
<script src="js/shape-with-internal-borders/neimenggu/nei4_meng2_gu3_xing1_an1_meng2.js"></script><

3. Draw map bubble chart, visual mapping effect

function make_city(cityName, chartDom) {
  myChart = echarts.init(document.getElementById(chartDom), window.gTheme);
  var option = {
    title: {
      text: cityName + "City Map",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        if (typeof params.value == "object") {
          value = params.value[2];
        } else if (typeof params.value == "number") {
          value = params.value;
        } else {
          value = 0;
        }
        return params.name + " : " + value + "RMB100mn";
      },
    },
    visualMap: {
      realtime: true,
      calculable: true,
      seriesIndex: 0,
    },
    geo: [
      {
        map: cityName,
        roam: true,
        layoutCenter: ["50%", "50%"],
        layoutSize: "120%",
        selectedMode: "single",
        zoom: 0.7,
      },
    ],

    series: [
      {
        name: "Map",
        type: "map",
        coordinateSystem: "geo",
        geoIndex: 0,
        data: [],
      },
      {
        name: "Top 5",
        type: "effectScatter",
        coordinateSystem: "geo",
        geoIndex: 0,
        data: [],
        symbolSize: function (val) {
          return val[2] / 20;
        },
        rippleEffect: {
          brushType: "stroke",
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

4. Dynamically load geojason data

function asyncData(filename, idContainer) {
  $.getJSON(filename).done(function (data) {
    dataNoCoordinate = data.map(handleData);
    dataDesc = data
      .sort(function (a, b) {
        return b.value[2] - a.value[2];
      })
      .slice(0, 5);

    var myChart = echarts.init(document.getElementById(idContainer));
    myChart.setOption({
      series: [
        { data: dataNoCoordinate },
        {
          data: dataDesc,
        },
      ],
    });
  });
}

5. GeoJSON data format

 {"type":"FeatureCollection","features":[{"type":"Feature","id":"152921","properties":{"name":"Alxa Left Banner","cp":[105.666275,38.833389],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[105.80078125,37.9404296875],[105.7998046875,37.9375],[105.798828125,37.9345703125],[105.798828125,37.9306640625],[105.798828125,37.9267578125],[105.798828125,37.923828125],[105.798828125,37.919921875],[105.7998046875,37.9150390625],[105.7998046875,37.91015625],[105.80078125,37.9072265625],[105.8017578125,37.9033203125],[105.8037109375,37.900390625],[105.8046875,37.8984375],[105.8056640625,37.8955078125],[105.806640625,37.892578125],[105.8076171875,37.8896484375],[105.8076171875,37.88671875],[105.8076171875,37.8828125],[105.80859375,37.880859375],[105.80859375,37.87890625],[105.8095703125,37.8759765625],[105.80859375,37.8720703125],[105.806640625,37.869140625],[105.806640625,37.8662109375],[105.8056640625,37.8642578125],[105.8046875,37.8623046875],[105.8017578125,37.859375],[105.798828125,37.8564453125],[105.7978515625,37.8544921875],[105.794921875,37.8525390625],[105.79296875,37.8505859375],[105.7900390625,37.84765625],[105.787109375,37.8447265625],[105.7841796875,37.83984375],[105.7822265625,37.8369140625],[105.78125,37.8349609375],[105.78125,37.8330078125],[105.779296875,37.8291015625],[105.779296875,37.8271484375],[105.77734375,37.82421875],[105.775390625,37.818359375],[105.7744140625,37.8154296875],[105.7724609375,37.8115234375],[105.767578125,37.806640625],[105.765625,37.8046875],[105.7607421875,37.80078125],[105.755859375,37.7978515625],[105.751953125,37.796875],[105.7451171875,37.79296875],[105.7412109375,37.7919921875],[105.73828125,37.791015625],[105.734375,37.7900390625],[105.7294921875,37.7890625],[105.7255859375,37.7880859375],[105.7216796875,37.7861328125],[105.71875,37.783203125],[105.7138671875,37.7822265625],[105.708984375,37.7802734375],[105.7041015625,37.7783203125],[105.7001953125,37.77734375],[105.6962890625,37.775390625],[105.689453125,37.7744140625],[105.68359375,37.7724609375],[105.6806640625,37.7724609375],[105.677734375,37.7724609375],[105.6748046875,37.7734375],[105.6708984375,37.7763671875],[105.66796875,37.7763671875],[105.6650390625,37.7763671875],[105.662109375,37.7763671875],[105.6591796875,37.77734375],[105.6533203125,37.7783203125],[105.6513671875,37.7783203125],[105.646484375,37.7802734375],[105.64453125,37.78125],[105.6396484375,37.7822265625],[105.6376953125,37.7822265625],[105.6337890625,37.7822265625],[105.626953125,37.7802734375],[105.6240234375,37.779296875],[105.623046875,37.7783203125],[105.6220703125,37.7744140625],[105.62109375,37.7734375],[105.619140625,37.763671875],[105.6171875,37.75390625],[105.6171875,37.7412109375],[105.6171875,37.72265625],[105.6162109375,37.7197265625],[105.615234375,37.71875],[105.6142578125,37.7158203125],[105.61328125,37.7109375],[105.6103515625,37.70703125],[105.6103515625,37.70703125],[105.6044921875,37.7021484375],[105.599609375,37.7001953125],[105.599609375,37.7001953125],[105.59375,37.69921875],[105.58984375,37.7001953125],

3, Source download

❤️ Source code download (including HTTP service + GeoJSON data of this province and city + Echarts chart)

This sharing is over, welcome to discuss! QQ wechat same No.: 6550523

❤️ Series articles ❤️

❤️ Data visualization ❤️: Map visual mapping scatter (bubble) component based on echarts + geojason [1] - Anhui Province

Tags: data visualization echarts

Posted on Wed, 08 Sep 2021 01:54:48 -0400 by derrick1123