Buenas foro.
Hace tiempo que no hago un aporte, asi que voy a aprovechar los minutos libres de trabajo.
Echarts es una herramienta muy útil para hacer gráficas de distintos tipos en tiempo real, debido a su excelente apariencia visual es muy exitoso en su campo.
Hay herramientas similares? - Claro que si, incluso google tiene sus propias gratuitas y otras de pago por consumo.
Pero este manual en concreto tratara de
como implementar el Echarts en Angular 6 utilizando mapas y nuestro amigo el GeoJson, esto para representar lo que gusten de manera global.
Les voy a dejar como adjunto el geojson que he utilizado y adaptado para este ejemplo.
Debo recalcar que es para angular 2+, (
NO angularJs) probado específicamente en
Angular 6.
Asumiré que tienen algun conocimiento basico de Angular e iré directamente a atacar los componentes.
Creamos un componente de nombre
map o como gusten.
Ejecutamos el siguiente script en la consola ubicados en nuestro proyecto angular.
ng g c /ruta/map
Algunos utilizan el .module en el mismo folder y otros no, para los que si, también adicionamos el module.
ng g m /ruta/map
Ahora vamos a instalar el Echarts en nuestro angular 6, para esto hacemos: (Ojo, es para usuarios
npm)
npm install echarts --save
npm install ngx-echarts --save
npm install @types/echarts -D
Con esto instalamos las librerias necesarias dentro de node_modules.
Ahora necesitamos hacer 2 adiciones en nuestro codigo:
angular.json <-- dentro de los scripts
"scripts": [
"node_modules/echarts/dist/echarts.min.js"
]
Ojo, en caso de tener más scripts debe separarlo por comas, respetando el formato JSON.tsconfig.json"paths": {
"echarts": ["node_modules/echarts/dist/echarts.min.js"]
},
Ojo, en caso de tener más phats debe separarlo por comas, respetando el formato JSON.Hasta ahí únicamente hemos adicionado las librerías necesarias, aun no hemos implementado nada.
Para confirmar que esta funcionando todo sin problemas debemos correr el angular únicamente con objeto de prueba.
ng serve
Si todo corre bien, paramos en ng serve y proseguimos a modificar nuestro componente creado de nombre
map.
Como sabemos los componentes tienen la estructura similar de un archivo de estilos, un archivo de typescript, un archivo de html y un archivo spec.
Trabajaremos omitiendo el archivo spec, primero haremos lo mas simple, trabajando dentro de los estilos.
Debemos tener un archivo asi:
map.component.scssDentro del mismo ponemos lo siguiente:
.demo-chart {
height: 100%;
width: 90%;
}
Esto dependerá más de nuestros gustos y la forma de utilizar el mapa, yo quiero para mi ejemplo ocupar casi toda la pantalla.
Ahora nos vamos a el archivo de la vista:
map.component.htmlY adicionamos lo siguiente:
<div echarts [options]="options" [loading]="!mapLoaded" class="demo-chart"></div>
No comentan errores en el HTML porque en angular eso no corre, no es como en PHP.
Una etiqueta mal cerrada tiene cárcel de 1 a 2 años
.
Ahora bien, modificaremos el archivo TS.
Para esto debemos respetar la estructura y no cometer errores.
map.component.tsAdicionamos en los imports lo siguiente:
import { HttpClient } from '@angular/common/http';
import * as echarts from 'echarts';
Ahora bien debemos tener una linea similar a esta:
export class MapComponent implements OnInit {
dentro de la misma adicionamos nuestra declaración de variables:
public mapLoaded:boolean = false;
public options: object = {};
Dentro del constructor inicializamos nuestro servicio http:
private http: HttpClient
Debería ser algo parecido a esto:
constructor(
private http: HttpClient
) { }
Antes de proseguir debo explicar un poco de como se grafica el mapa, este se hace en base a un archivo de tipo json, que con tiene en sus propiedades el nombre del país y un polígono o multi polígono que delimita sus fronteras y nos permite apreciar de forma visual sus dimensiones geográficas y su localización.
Este geoJson es libre de usar, no tiene ninguna licencia, y el mismo lo deben subir a su proyecto angular.
Yo recomiendo que lo usen dentro de la carpeta
src/assets y dentro una carpeta
map/jsonY ahí dentro poner nuestro archivo, les dejo la URL para que puedan bajarla.
https://drive.google.com/open?id=1m95xce2ZpUeeQ3YE1jKrvwTVSsLGl7viYo lo tengo asi:
assets/map/json/world.geo.jsonAhora, trabajaremos dentro de la funcion
ngOnInit() {}Utilizaremos nuestro servicio http:
this.http.get('assets/map/json/world.geo.json')
Con esto le estamos diciendo de donde utilizaremos el json para graficar.
Pondre el codigo completo:
this.http.get('assets/map/json/world.geo.json')
.subscribe(geoJson => {
// hide loading:
this.mapLoaded = true;
// register map:
echarts.registerMap('World', geoJson);
this.options = {
title: {
text: 'World Questionnaire filled',
subtext: 'Questionnaire added by country',
sublink: '#',
left: 'center',
top: 'top'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
var value:any = (params.value + '').split('.');
value = value[0];
return params.seriesName + '<br/>' + params.name + ' : ' + value + ' Questionnaire(s)<br/>';
}
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 0,
max: 10,
text: ['High', 'Medium', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{
name: 'World Population (2010)',
type: 'map',
mapType: 'World',
roam: true,
itemStyle: {
emphasis: { label: { show: true } }
},
data: [
{ name: "Afghanistan", code: "AFG", value: 0 },
{ name: "Aruba", code: "ABW", value: 0 },
{ name: "Angola", code: "AGO", value: 0 },
{ name: "Albania", code: "ALB", value: 0 },
{ name: "United Arab Emirates", code: "ARE", value: 0 },
{ name: "Argentina", code: "ARG", value: 0 },
{ name: "Armenia", code: "ARM", value: 0 },
{ name: "Antarctica", code: "ATA", value: 0 },
{ name: "French Southern and Antarctic Lands", code: "ATF", value: 0 },
{ name: "Australia", code: "AUS", value: 0 },
{ name: "Austria", code: "AUT", value: 1 },
{ name: "Azerbaijan", code: "AZE", value: 0 },
{ name: "Burundi", code: "BDI", value: 0 },
{ name: "Belgium", code: "BEL", value: 0 },
{ name: "Benin", code: "BEN", value: 0 },
{ name: "Burkina Faso", code: "BFA", value: 0 },
{ name: "Bangladesh", code: "BGD", value: 0 },
{ name: "Bulgaria", code: "BGR", value: 0 },
{ name: "The Bahamas", code: "BHS", value: 1 },
{ name: "Bosnia and Herzegovina", code: "BIH", value: 0 },
{ name: "Belarus", code: "BLR", value: 0 },
{ name: "Belize", code: "BLZ", value: 0 },
{ name: "Bermuda", code: "BMU", value: 0 },
{ name: "Bolivia", code: "BOL", value: 3 },
{ name: "Brazil", code: "BRA", value: 0 },
{ name: "Brunei", code: "BRN", value: 0 },
{ name: "Bhutan", code: "BTN", value: 0 },
{ name: "Botswana", code: "BWA", value: 0 },
{ name: "Central African Republic", code: "CAF", value: 0 },
{ name: "Canada", code: "CAN", value: 0 },
{ name: "Switzerland", code: "CHE", value: 0 },
{ name: "Chile", code: "CHL", value: 2 },
{ name: "China", code: "CHN", value: 1 },
{ name: "Ivory Coast", code: "CIV", value: 0 },
{ name: "Cameroon", code: "CMR", value: 0 },
{ name: "Democratic Republic of the Congo", code: "COD", value: 0 },
{ name: "Republic of the Congo", code: "COG", value: 0 },
{ name: "Colombia", code: "COL", value: 0 },
{ name: "Costa Rica", code: "CRI", value: 4 },
{ name: "Cuba", code: "CUB", value: 0 },
{ name: "Northern Cyprus", code: "-9", value: 0 },
{ name: "Cyprus", code: "CYP", value: 0 },
{ name: "Czech Republic", code: "CZE", value: 0 },
{ name: "Germany", code: "DEU", value: 0 },
{ name: "Djibouti", code: "DJI", value: 0 },
{ name: "Denmark", code: "DNK", value: 0 },
{ name: "Dominican Republic", code: "DOM", value: 0 },
{ name: "Algeria", code: "DZA", value: 0 },
{ name: "Ecuador", code: "ECU", value: 7 },
{ name: "Egypt", code: "EGY", value: 0 },
{ name: "Eritrea", code: "ERI", value: 0 },
{ name: "Spain", code: "ESP", value: 0 },
{ name: "Estonia", code: "EST", value: 0 },
{ name: "Ethiopia", code: "ETH", value: 0 },
{ name: "Finland", code: "FIN", value: 0 },
{ name: "Fiji", code: "FJI", value: 0 },
{ name: "Falkland Islands", code: "FLK", value: 0 },
{ name: "France", code: "FRA", value: 0 },
{ name: "Gabon", code: "GAB", value: 0 },
{ name: "United Kingdom", code: "GBR", value: 0 },
{ name: "Georgia", code: "GEO", value: 0 },
{ name: "Ghana", code: "GHA", value: 0 },
{ name: "Guinea", code: "GIN", value: 0 },
{ name: "Gambia", code: "GMB", value: 0 },
{ name: "Guinea Bissau", code: "GNB", value: 0 },
{ name: "Equatorial Guinea", code: "GNQ", value: 0 },
{ name: "Greece", code: "GRC", value: 0 },
{ name: "Greenland", code: "GRL", value: 0 },
{ name: "Guatemala", code: "GTM", value: 3 },
{ name: "French Guiana", code: "GUF", value: 0 },
{ name: "Guyana", code: "GUY", value: 0 },
{ name: "Honduras", code: "HND", value: 0 },
{ name: "Croatia", code: "HRV", value: 0 },
{ name: "Haiti", code: "HTI", value: 10 },
{ name: "Hungary", code: "HUN", value: 0 },
{ name: "Indonesia", code: "IDN", value: 0 },
{ name: "India", code: "IND", value: 0 },
{ name: "Ireland", code: "IRL", value: 0 },
{ name: "Iran", code: "IRN", value: 0 },
{ name: "Iraq", code: "IRQ", value: 0 },
{ name: "Iceland", code: "ISL", value: 0 },
{ name: "Israel", code: "ISR", value: 0 },
{ name: "Italy", code: "ITA", value: 0 },
{ name: "Jamaica", code: "JAM", value: 0 },
{ name: "Jordan", code: "JOR", value: 0 },
{ name: "Japan", code: "JPN", value: 0 },
{ name: "Kazakhstan", code: "KAZ", value: 0 },
{ name: "Kenya", code: "KEN", value: 0 },
{ name: "Kyrgyzstan", code: "KGZ", value: 0 },
{ name: "Cambodia", code: "KHM", value: 0 },
{ name: "South Korea", code: "KOR", value: 0 },
{ name: "Kosovo", code: "CS-", value: 0 },
{ name: "Kuwait", code: "KWT", value: 0 },
{ name: "Laos", code: "LAO", value: 0 },
{ name: "Lebanon", code: "LBN", value: 0 },
{ name: "Liberia", code: "LBR", value: 0 },
{ name: "Libya", code: "LBY", value: 0 },
{ name: "Sri Lanka", code: "LKA", value: 0 },
{ name: "Lesotho", code: "LSO", value: 0 },
{ name: "Lithuania", code: "LTU", value: 5 },
{ name: "Luxembourg", code: "LUX", value: 0 },
{ name: "Latvia", code: "LVA", value: 0 },
{ name: "Morocco", code: "MAR", value: 0 },
{ name: "Moldova", code: "MDA", value: 0 },
{ name: "Madagascar", code: "MDG", value: 0 },
{ name: "Mexico", code: "MEX", value: 0 },
{ name: "Macedonia", code: "MKD", value: 0 },
{ name: "Mali", code: "MLI", value: 0 },
{ name: "Malta", code: "MLT", value: 0 },
{ name: "Myanmar", code: "MMR", value: 3 },
{ name: "Montenegro", code: "MNE", value: 0 },
{ name: "Mongolia", code: "MNG", value: 0 },
{ name: "Mozambique", code: "MOZ", value: 0 },
{ name: "Mauritania", code: "MRT", value: 0 },
{ name: "Malawi", code: "MWI", value: 0 },
{ name: "Malaysia", code: "MYS", value: 0 },
{ name: "Namibia", code: "NAM", value: 2 },
{ name: "New Caledonia", code: "NCL", value: 0 },
{ name: "Niger", code: "NER", value: 0 },
{ name: "Nigeria", code: "NGA", value: 0 },
{ name: "Nicaragua", code: "NIC", value: 0 },
{ name: "Netherlands", code: "NLD", value: 0 },
{ name: "Norway", code: "NOR", value: 0 },
{ name: "Nepal", code: "NPL", value: 0 },
{ name: "New Zealand", code: "NZL", value: 0 },
{ name: "Oman", code: "OMN", value: 0 },
{ name: "Pakistan", code: "PAK", value: 0 },
{ name: "Panama", code: "PAN", value: 0 },
{ name: "Peru", code: "PER", value: 0 },
{ name: "Philippines", code: "PHL", value: 0 },
{ name: "Papua New Guinea", code: "PNG", value: 0 },
{ name: "Poland", code: "POL", value: 0 },
{ name: "Puerto Rico", code: "PRI", value: 8 },
{ name: "North Korea", code: "PRK", value: 0 },
{ name: "Portugal", code: "PRT", value: 0 },
{ name: "Paraguay", code: "PRY", value: 7 },
{ name: "Qatar", code: "QAT", value: 0 },
{ name: "Romania", code: "ROU", value: 0 },
{ name: "Russia", code: "RUS", value: 10 },
{ name: "Rwanda", code: "RWA", value: 0 },
{ name: "Western Sahara", code: "ESH", value: 0 },
{ name: "Saudi Arabia", code: "SAU", value: 0 },
{ name: "Sudan", code: "SDN", value: 0 },
{ name: "South Sudan", code: "SSD", value: 0 },
{ name: "Senegal", code: "SEN", value: 0 },
{ name: "Solomon Islands", code: "SLB", value: 0 },
{ name: "Sierra Leone", code: "SLE", value: 0 },
{ name: "El Salvador", code: "SLV", value: 0 },
{ name: "Somaliland", code: "-9", value: 0 },
{ name: "Somalia", code: "SOM", value: 0 },
{ name: "Republic of Serbia", code: "SRB", value: 0 },
{ name: "Suriname", code: "SUR", value: 0 },
{ name: "Slovakia", code: "SVK", value: 0 },
{ name: "Slovenia", code: "SVN", value: 0 },
{ name: "Sweden", code: "SWE", value: 0 },
{ name: "Swaziland", code: "SWZ", value: 0 },
{ name: "Syria", code: "SYR", value: 0 },
{ name: "Chad", code: "TCD", value: 0 },
{ name: "Togo", code: "TGO", value: 0 },
{ name: "Thailand", code: "THA", value: 0 },
{ name: "Tajikistan", code: "TJK", value: 0 },
{ name: "Turkmenistan", code: "TKM", value: 0 },
{ name: "East Timor", code: "TLS", value: 0 },
{ name: "Trinidad and Tobago", code: "TTO", value: 0 },
{ name: "Tunisia", code: "TUN", value: 0 },
{ name: "Turkey", code: "TUR", value: 0 },
{ name: "Taiwan", code: "TWN", value: 0 },
{ name: "United Republic of Tanzania", code: "TZA", value: 0 },
{ name: "Uganda", code: "UGA", value: 0 },
{ name: "Ukraine", code: "UKR", value: 0 },
{ name: "Uruguay", code: "URY", value: 0 },
{ name: "United States of America", code: "USA", value: 0 },
{ name: "Uzbekistan", code: "UZB", value: 0 },
{ name: "Venezuela", code: "VEN", value: 0 },
{ name: "Vietnam", code: "VNM", value: 0 },
{ name: "Vanuatu", code: "VUT", value: 0 },
{ name: "West Bank", code: "PSE", value: 0 },
{ name: "Yemen", code: "YEM", value: 0 },
{ name: "South Africa", code: "ZAF", value: 0 },
{ name: "Zambia", code: "ZMB", value: 0 },
{ name: "Zimbabwe", code: "ZWE", value: 0 }
]
}
]
}
}, (err:any)=>{
console.log('AQUI ERROR DEL MAPA: ',err);
});
Entre las opciones podemos apreciar:
title: {
text: 'World Questionnaire filled',
subtext: 'Questionnaire added by country',
sublink: '#',
left: 'center',
top: 'top'
},
Ahí debemos poner nuestro texto de título, el subtexto y algun link.
Si conseguimos hacerlo todo bien, debemos correr el angular.
ng serve
Seguramente correra en el puerto 4200, para acceder nos vamos al navegador y abrimos:
http://localhost:4200Ahora bien, para que nos funcione debemos adicionar la ruta map a nuestro componente:
En el archivo:
app.routing.tsImportamos nuestro componente:
import { MapComponent } from './components/map/map.component';
Posteriormente dentro de:
const appRoutes: Routes = [Respetando el formato adicionamos nuestra ruta:
{path:'map', component: MapComponent},
Entonces cargamos el
ng serve y debemos correrlo asi:
http://localhost:4200/mapY debería mostrarnos algo similar a esto:
Les adjunto la documentación relacionada:
https://www.npmjs.com/package/ngx-echarts - En NPM
https://xieziyu.github.io/ngx-echarts/ - En su demo
https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-geo - En github.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=map-world-dataRange - El ejemplo especifico
https://github.com/xieziyu/ngx-echarts/blob/v2.x/README.md - otra informacion.
Espero les sirva.
Saludos!
--
OHK
Mostrar Mensajes
