架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 233|回复: 0

[Angular] 在Angular 6中使用ngx-echarts 组件的地图(map)图表

[复制链接]
跳转到指定楼层
楼主
发表于 2019-5-10 10:43:32
zu
ngx-echarts 官方文档:https://xieziyu.github.io/ngx-echarts/api-doc/index.html

ngx-echarts是根据echarts插件开发的,适用于Angular2.x及以上,另外不同版本的ngx-echarts也适用于不同版本的Angular,主要划分版本是Angular 6.

  • v4.0.0 for Angular >= 6
  • v2.3.1 for Angular < 6



运行效果



步骤如下:

一、Installation


  1. npm  install  echarts  --save
  2. npm  install  ngx-echarts  --save
复制代码
二、Configue

  1. import { NgxEchartsModule } from 'ngx-echarts';

  2. @NgModule({
  3.   imports: [
  4.     ...,
  5.     NgxEchartsModule
  6.   ],
  7. })
  8. export class AppModule { }
复制代码
三、Using

html


  1. <div  echarts [options]="regionOptions"></div>
复制代码
ts

  1. import { Component, OnInit } from '@angular/core';
  2. import { HttpClient } from '@angular/common/http';

  3. import * as echarts from 'echarts';

  4. @Component({
  5.     selector: 'app-root',
  6.     templateUrl: './app.component.html'
  7. })
  8. export class AppComponent implements OnInit {
  9.     regionOptions;

  10.     constructor(
  11.         private http: HttpClient
  12.     ) { }

  13.     ngOnInit() {
  14.     //  china.json 的路径需要正确填写
  15.         this.http.get('assets/china.json')
  16.             .subscribe(geoJson => {
  17.                 echarts.registerMap('China', geoJson);
  18.                 this.regionOptions = {
  19.                     tooltip: {
  20.                         trigger: 'item',
  21.                         formatter: '{b}:{c}'
  22.                     },
  23.                     toolbox: {
  24.                         show: true,
  25.                         orient: 'vertical',
  26.                         left: 'right',
  27.                         top: 'center',
  28.                         feature: {
  29.                             dataView: { readOnly: false },
  30.                             restore: {},
  31.                             saveAsImage: {}
  32.                         }
  33.                     },
  34.                     visualMap: {
  35.                         min: 0,
  36.                         max: 50,
  37.                         text: ['High', 'Low'],
  38.                         realtime: false,
  39.                         calculable: true,
  40.                         inRange: {
  41.                             color: ['#ADCDEF', '#2171C1']
  42.                         }
  43.                     },
  44.                     series: [
  45.                         {
  46.                             type: 'map',
  47.                             mapType: 'China',  //  与注册时的名字保持统一   echarts.registerMap('China', geoJson);
  48.                             itemStyle: {
  49.                                 normal: {
  50.                                     areaColor: '#AAD5FF',
  51.                                     borderColor: 'white',
  52.                                     label: { show: true, color: 'white' }
  53.                                 },
  54.                                 emphasis: {
  55.                                     areaColor: '#A5DABB'
  56.                                 }
  57.                             },
  58.                             zoom: 1.2,
  59.                             data: [
  60.                                 { name: '北京', value: 0 },
  61.                                 { name: '天津', value: 0 },
  62.                                 { name: '重庆', value: 0 },
  63.                                 { name: '上海', value: 0 },
  64.                                 { name: '湖南', value: 0 },
  65.                                 { name: '广东', value: 20 },
  66.                                 { name: '福建', value: 0 },
  67.                                 { name: '江西', value: 0 },
  68.                                 { name: '四川', value: 0 },
  69.                                 { name: '广西', value: 0 },
  70.                                 { name: '新疆', value: 0 },
  71.                                 { name: '西藏', value: 0 },
  72.                                 { name: '青海', value: 0 },
  73.                                 { name: '甘肃', value: 0 },
  74.                                 { name: '宁夏', value: 0 },
  75.                                 { name: '内蒙古', value: 0 },
  76.                                 { name: '海南', value: 0 },
  77.                                 { name: '山西', value: 0 },
  78.                                 { name: '陕西', value: 0 },
  79.                                 { name: '云南', value: 0 },
  80.                                 { name: '贵州', value: 0 },
  81.                                 { name: '湖北', value: 0 },
  82.                                 { name: '浙江', value: 0 },
  83.                                 { name: '安徽', value: 0 },
  84.                                 { name: '河南', value: 0 },
  85.                                 { name: '山东', value: 0 },
  86.                                 { name: '江苏', value: 0 },
  87.                                 { name: '河北', value: 0 },
  88.                                 { name: '辽宁', value: 0 },
  89.                                 { name: '吉林', value: 0 },
  90.                                 { name: '黑龙江', value: 0 },
  91.                                 { name: '台湾', value: 0 }]
  92.                         }
  93.                     ]
  94.                 };
  95.             });
  96.     }
  97. }
复制代码
最后,附上china.json文件,如下:

游客,如果您要查看本帖隐藏内容请回复





上一篇:OPCV书籍大全
下一篇:echarts实现中国地图数据展示
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-7-17 12:04

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表