☀️ My home page: YYDataV ☀️ Welcome to praise 👍 Collection ⭐ Message, welcome to communicate
catalogue
2, Coding implementation (based on length and readability, some key codes are shown here)
3. Draw map bubble chart, visual mapping effect
4. Dynamically load geojason data
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:
This sharing is over, welcome to discuss! QQ wechat same No.: 6550523