1.安装库和依赖

npm i echarts --save
npm i ngx-echarts --save
npm i resize-observer-polyfill --save-dev

2.相关配置

  在module添加

import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts'; imports: [
NgxEchartsModule.forRoot({ echarts }),
],

3.页面

  ts

import { Component, OnInit } from '@angular/core';
import { EChartsOption } from 'echarts'; @Component({
selector: 'app-demo001',
templateUrl: './demo001.component.html',
styleUrls: ['./demo001.component.scss']
})
export class Demo001Component implements OnInit {
data: EChartsOption = {};
constructor() { } ngOnInit(): void {
this.data = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
} }

  html

<div echarts [options] = "data"></div>

添加 Echarts bi库的更多相关文章

  1. 【可视化】DataV接入ECharts图表库 可视化利器强强联手

    DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...

  2. svn add 添加到版本库

    转 svn add-添加到版本库 常用操作1.添加一个文件到工作拷贝:$ svn add foo.c 2.当添加一个目录,svn add缺省的行为方式是递归的:$ svn add testdir 3. ...

  3. 添加Ubuntu的库文件路径

    添加Ubuntu的库文件路径 http://blog.csdn.net/r91987/article/details/6879062 关于ubuntu添加共享库路径: 1. 将绝对路径写入 /etc/ ...

  4. android 添加依赖的库文件

    Notpad: 2016-3-16: 1.android 添加依赖的库文件 右键自己的项目 -> properties ->android ->在Library处点击add -> ...

  5. [cocos2dx笔记004] android添加�静态库project

    (基于2.2.2版本号) 这步比較麻烦,不像vs2013那样好设置.參考了非常多文章.还是不能解决这个问题.仅仅有慢慢摸索了.在这里贴出来,希望能让大家能少走点弯路. 还是其于前面的文章提到的myli ...

  6. svn管理代码在cornerstone上无法添加.a 静态库文件

    有时候.a静态库不能上传到svn的服务器  导致别人拉代码运行不了 这是因为cornerstone设置里面默认不会提交.a文件, 在上图选项栏里是cornerstone默认忽略上传的文件名后缀,在这里 ...

  7. ssh keygen命令实现免密码通信(git库获取操作权限:开发人员添加到git库中,获取操作权限)

    先看两个机器实现免密码登陆通讯: 假设 A 为客户机器,B为目标机: 要达到的目的: A机器ssh登录B机器无需输入密码: 加密方式选 rsa|dsa均可以,默认dsa 做法: 1.登录A机器 2.s ...

  8. 动态添加echarts

    本次只贴js和jsp代码 jsp只需添加一个div即可, <div class="fLayout-right-box"> <hy:layoutArea width ...

  9. Android添加百分比布局库时显示Failed to resolve: com.android.support.percent:问题

    这是看第一行代码中遇到的问题,要添加百分比布局库的依赖时要在app下的bulid.gradle添加以下代码 implementation fileTree(dir:'libs',include:['* ...

  10. .NET 类库研究必备参考 添加微软企业库源码

    前不久,为大家提供了一个.NET 类库参考源码的网站,扣丁格鲁(谐音“coding guru”),使用了段时间,发现一些不方便的地方,特意做了一些更改,希望大家多提意见,下面是此次更改的地方. 更改1 ...

随机推荐

  1. UBOOT 启动流程

    一.概述 uboot 的启动流程在网上有很多大佬记录,但是了对于像我这样的新手就有些困难了,而我也不做 uboot 相关的工作,所以没必去研究代码,这里我特意整理了一下,以流程图的形式展现代码执行的流 ...

  2. .NET 云原生架构师训练营(基于 OP Storming 和 Actor 的大型分布式架构一)--学习笔记

    目录 为什么我们用 Orleans Dapr VS Orleans Actor 模型 Orleans 的核心概念 为什么我们用 Orleans 分布式系统开发.测试的难度(服务发现.通信) 运维的复杂 ...

  3. 《HTTP权威指南》– 2.HTTP报文与URL资源

    URL与资源: 大多数URL方案的URL语法都建立在这个由9部分构成的通用格式上. 方案: 访问服务器以获取资源要使用哪种协议 用户: 某些方案访问资源时需要的用户名 密码: 用户名后面可能包含的密码 ...

  4. 为什么总是应该考虑给定 List 的初始大小

    在 .Net 技术中,使用 List<> 来存储数据是很常见的.List<> 是一个可以动态增长的泛型集合类型,可以存储任何类型的数据. 但是,在实际使用中,很多人并不注意给定 ...

  5. md5-有道翻译

    网站 aHR0cHMlM0EvL2ZhbnlpLnlvdWRhby5jb20v 测试发现三个值是变化的 一.第一种方法 initiator一步一步找,在t.translate中找到以下内容 这里可以看 ...

  6. [OpenCV实战]37 图像质量评价BRISQUE

    摄影是全世界数百万人最喜爱的爱好.毕竟,这有多难啊!用美国著名摄影师阿巴斯•黛安娜的话来说: 拍照就像深夜踮着脚尖走进厨房,偷奥利奥饼干. 拍照很容易,但是拍一张高质量的照片却很难.它需要良好的组成和 ...

  7. mysql 复制数据

    1.表存在 insert into table_name(key1,key2) select key3,key4 from table_name_2; 2.表不存在 create table test ...

  8. [Unity]限制两个物体之间的距离

    //限制两个物体之间的距离 if (Vector3.Distance(B.position, A.position) > maxDistance) { //获得两个物体之间的单位向量 Vecto ...

  9. ant design pro 配置路由 显示页面步骤详解

    第一步 在 src/views 下新建页面的vue文件,如果相关页面有多个,可以新建一个文件夹来放置相关文件. 给页面里写几个字,等会可以看到哦~~ 第二步 将文件加入菜单和路由 进入这个文件    ...

  10. DVWA靶场实战(十一)——XSS(Reflected)

    DVWA靶场实战(十一) 十一.XSS(Reflected): 1.漏洞原理: XSS被称为跨站脚本攻击(Cross Site Script),而Reflected被称作反射型XSS.不同于DOM和S ...