详解angular中使用echarts地图

目录
  • echart的初始化
  • app-base-chart组件
    • html
    • css
  • 使用app-base-chart组件
  • 总结

在angular中使用echart的时候，只需要在对应的组件生命周期中调用echart的api就可以了

echart的初始化

在component的ngOnInit事件中进行echarts的初始化，配置option，然后echarts图表就生成了

app-base-chart组件

html

<div #chart [ngClass]="'chart-box ' + (!option ? 'empty-chart' : '')"></div>

css

// 基本的图表样式
.chart-box{
  font-weight: bold;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
}
// option暂无的时候的样式
.empty-chart{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { fromEvent, Subscription, timer } from 'rxjs';
import { debounceTime, tap } from 'rxjs/operators';
import { ECharts, EChartsOption, init } from 'echarts';
@Component({
  selector: 'app-base-chart',
  templateUrl: './base-chart.component.html',
  styleUrls: ['./base-chart.component.scss']
})
export class BaseChartComponent implements OnInit, OnDestroy {
  @Input() option: EChartsOption;
  @Input() height = '300px';
  @Input() width = '100%';
  @ViewChild('chart', { static: true }) chart: ElementRef;
  aChart: ECharts;
  windowResize: Subscription;
  timer: Subscription;
  defaultGrid = {
    top: 10,
    right: 10,
    bottom: 30,
    left: 30,
  };
  constructor() { }
  ngOnInit(): void {
    this.setListen();
    this.boxStyleInit();
    if (!!this.option) {
      this.echartsInit();
    }else{
      this.chart.nativeElement.innerText = '暂无数据';
    }
  }
  // 当组件销毁的时候，取消相关订阅
  ngOnDestroy(): void {
    if (this.windowResize) {
      this.windowResize.unsubscribe();
    }
    if (this.timer) {
      this.timer.unsubscribe();
    }
  }
  // 初始化容器的大小size
  boxStyleInit(): void {
    this.chart.nativeElement.style.width = this.width;
    this.chart.nativeElement.style.height = this.height;
  }
  // 设置window的resize事件监听，并重绘echarts的大小
  setListen(): void {
    this.windowResize = fromEvent(window, 'resize').pipe(
      debounceTime(200),
      tap(res => {
        this.aChart.resize();
      })
    ).subscribe();
  }
  // 根据option配置和生成echarts图表
  echartsInit(): void {
    this.aChart = init(this.chart.nativeElement);
    this.aChart.setOption(Object.assign({ grid: this.defaultGrid }, this.option));
    // 通过延时器进行echarts的大小重绘
    this.timer = timer(400).subscribe(res => {
      this.aChart.resize();
    });
  }
}

使用app-base-chart组件

<app-base-chart [option]="option" width="100%" height="300px" ></app-base-chart>

只需要在组件的html中像上面代码运用就可以，同时还可以配置height和width。option为echarts官方定义的option

这样其实就是简单封装了一个基本的echarts生成组件，所有的配置项都是echarts的

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JavaScript数据可视化:ECharts制作地图

    JavaScript数据可视化:ECharts制作地图

    目录 概述 注意事项 一. 使用方式 二. 实现步骤 初步实现代码 效果: geo常见配置 添加上面配置之后的效果图: 显示某一个省份(河南省) 效果 不同区域显示不同颜色 地图和散点图的结合 总结 概述 地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气.尤其是在大屏展示中更是扮演着必不可缺的角色 注意事项 一. 使用方式 1.百度地图API(高德地图API) 需要申请百度API 2.矢量地图 需要准备矢量地图数据 二. 实现步骤 1.ECharts最基本的代码结构 引

  • vue+echarts实现中国地图流动效果(步骤详解)

    vue+echarts实现中国地图流动效果(步骤详解)

    @vue+echarts实现中国地图流动效果 #话不多说看效果图 操作步骤: 执行命令:npm run echarts -s 并回车 看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org) 下载china.js 链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4 引入 impo

  • Javascript Echarts空气质量地图效果详解

    Javascript Echarts空气质量地图效果详解

    我们要先把空气质量数据和地图数据结合起来: 地图数据有name这个属性 我们的不同城市空气质量也有name这个属性,这两个属性是一样的,都叫name,所以我们可以把他们关联起来: var airData = [ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, { name: '重庆', value: 66 }, { name: '河北', value: 147 },

  • vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示

  • vue中echarts引入中国地图的案例

    如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM

  • 详解angular中使用echarts地图

    目录 echart的初始化 app-base-chart组件 html css 使用app-base-chart组件 总结 在angular中使用echart的时候,只需要在对应的组件生命周期中调用echart的api就可以了 echart的初始化 在component的ngOnInit事件中进行echarts的初始化,配置option,然后echarts图表就生成了 app-base-chart组件 html <div #chart [ngClass]="'chart-box ' + (

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

  • 详解angular中通过$location获取路径(参数)的写法

    我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下! 以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例 [一]获取 (不修改URL) //获取当前完整的url路径 var absurl = $locationabsUrl(); //http://88:8100/#/homePage?id=10&a=100 // 获取当前url

  • 详解Angular 中 ngOnInit 和 constructor 使用场景

    1. constructor constructor应该是ES6中明确使用constructor来表示构造函数的,构造函数使用在class中,用来做初始化操作.当包含constructor的类被实例化时,构造函数将被调用. 来看例子: class AppComponent { public name: string; constructor(name) { console.log('Constructor initialization'); this.name = name; } } let a

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:

  • 详解Angular中的自定义服务Service、Provider以及Factory

    详解Angular中的自定义服务Service、Provider以及Factory

    背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能重复的方法,脸都发绿了,不过还是耐心地跟我指出提高Angular代码复用性需要Service.Provider和Factory三种复用性很高的方法,遂习之,以下是我的学习成果: 先说说Factory: 通过注册.factory('my注册名',方法()),返回一个对象,你就能在控制器中引入这个方法并访问这个对象: 例子: <!-- factory模式 --> <div ng-controller="th

  • 详解angular中如何监控dom渲染完毕

    刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的dom元素都可以满足你的提倡开发需求. 那么如果真的需要用某个jquery插件,自己懒得封装angular插件或者懒得去找angular插件的时候,我们该怎么判断dom加载完毕. 有人说使用ng-init="" 亲测:表示没达到我想要的结果.... 当然你如果使用window.onload=f

  • 详解angular 中的自定义指令之详解API

    自定义属性的四种类别 分为: 元素E,属性A,注释M,类C , 分别如下: <my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span> 简单创建一个指令 html结构: <div ng-controller="

  • 详解angular中的作用域及继承

    在一些使用angular框架的大型项目中,似乎有很多个controller,而每个controller都有自己的$scope. 1.$rootscope $rootScope顶级作用域,也叫根作用域,类似于window,window的属性在任何子作用域都可以访问.$rootScope则是所有controller进行数据沟通的中间域,即在$rootScope中的数据,在每个controller中都能通过$rootScope.xxx获取到. 2.$scope (1)作用 $scope 就在视图和控制

随机推荐