❤️ Data visualization ❤️: Map visual mapping scatter (bubble) component based on echarts + geojason [28] - municipality directly under the central government

  ☀️ 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

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

Include the following cities:   Macao, Beijing, Tianjin, Chongqing, Shanghai, Hong Kong.

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>municipality directly under the Central Government - </h2>
<table>
<tr>
  <td><div id="aomen" class="citymap"></div></td>
  <td><div id="beijing" class="citymap"></div></td>
  <td><div id="chongqing" class="citymap"></div></td>
  <td><div id="shanghai" class="citymap"></div></td>
  </tr><tr>
  <td><div id="tianjin" class="citymap"></div></td>
  <td><div id="xianggang" class="citymap"></div></td>
</tr>
</table>

2. Import map file

  <!-- municipality directly under the Central Government -->
<script src="js/shape-with-internal-borders/aomen.js"></script>
<script src="js/shape-with-internal-borders/beijing.js"></script>
<script src="js/shape-with-internal-borders/chongqing.js"></script>
<script src="js/shape-with-internal-borders/shanghai.js"></script>
<script src="js/shape-with-internal-borders/tianjin.js"></script>
<script src="js/shape-with-internal-borders/xianggang.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":[{"id":"310101","type":"Feature","geometry":{"type":"Polygon","coordinates":[[[121.4580078125,31.220703125],[121.45703125,31.224609375],[121.4677734375,31.224609375],[121.46875,31.2265625],[121.466796875,31.234375],[121.4638671875,31.2421875],[121.4697265625,31.2392578125],[121.4765625,31.2421875],[121.48046875,31.240234375],[121.4853515625,31.244140625],[121.48828125,31.2451171875],[121.4951171875,31.2431640625],[121.494140625,31.2392578125],[121.4951171875,31.2353515625],[121.5068359375,31.2236328125],[121.509765625,31.21875],[121.5107421875,31.21484375],[121.5087890625,31.2109375],[121.501953125,31.2001953125],[121.49609375,31.1943359375],[121.494140625,31.1923828125],[121.4765625,31.1884765625],[121.474609375,31.1904296875],[121.470703125,31.19140625],[121.4697265625,31.197265625],[121.4677734375,31.205078125],[121.462890625,31.2041015625],[121.4619140625,31.2119140625],[121.4580078125,31.220703125]]],"encodeOffsets":[[124373,31970]]},"properties":{"cp":[121.490317,31.222771],"name":"Huangpu District","childNum":1}},{"id":"310104","type":"Feature","geometry":{"type":"Polygon","coordinates":[[[121.4658203125,31.1123046875],[121.4638671875,31.109375],[121.462890625,31.1025390625],[121.4560546875,31.1015625],[121.455078125,31.1015625],[121.453125,31.1015625],[121.4521484375,31.1044921875],[121.451171875,31.1044921875],[121.451171875,31.10546875],[121.44921875,31.10546875],[121.4482421875,31.1064453125],[121.4462890625,31.1064453125],[121.4462890625,31.107421875],[121.4482421875,31.107421875],[121.4482421875,31.1083984375],[121.4521484375,31.1083984375],[121.4521484375,31.109375],[121.453125,31.109375],[121.4501953125,31.11328125],[121.4521484375,31.115234375],[121.4501953125,31.1162109375],[121.447265625,31.1142578125],

3, Source download

Including HTTP service + GeoJSON data of this province and city + ecarts chart:

[source code] data visualization: Map Visual Mapping scatter (bubble) component based on Echarts+GeoJson [28] - municipalities directly under the central government. zip Internet document resources - CSDN Download

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

Keywords: echarts

Added by purplenewt on Sat, 11 Sep 2021 02:05:35 +0300