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. go-carbon 1.5.3 版本发布, 修复已知 bug 和新增俄罗斯语翻译文件

    carbon 是一个轻量级.语义化.对开发者友好的golang时间处理库,支持链式调用. 目前已被 awesome-go 收录,如果您觉得不错,请给个star吧 github.com/golang-m ...

  2. 【机器学习】李宏毅——AE自编码器(Auto-encoder)

    1.What 在自编码器中,有两个神经网络,分别为Encoder和Decoder,其任务分别是: Encoder:将读入的原始数据(图像.文字等)转换为一个向量 Decoder:将上述的向量还原成原始 ...

  3. js属性对象的hasOwnProperty( )方法,检测一个属性是否是对象的自有属性

    hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键). 语法: obj.hasOwnProperty(prop) 参数: prop  ...

  4. 多线程爬取wallhaven

    前言 最近整理自己的项目时,发现之前自己写的爬取wallhaven网站顿时有来的兴趣决定再写一遍来回顾自己以前学的知识 网站地址:"https://wallhaven.cc/" 1 ...

  5. SQLSERVER 居然也能调 C# 代码 ?

    一:背景 1. 讲故事 前些天看到一个奇怪的 Function 函数,调用的是 C# 链接库中的一个 UserLogin 方法,参考代码如下: CREATE FUNCTION dbo.clr_User ...

  6. Windowsのcmd命令

    Windowsのcmd命令 网络操作: ipconfig命令: ipconfig -all 查看网络信息 ipconfig -release 释放ip/tcp ipconfig -renew 重新获取 ...

  7. Function接口-默认方法:andThen

    Function接口 java.util.function.Function<T,R〉接口用来根据一个类型的数据得到另一个类型的数据,前者称为前置条件,后者称为后置条件. 抽象方法:apply ...

  8. 创建型模式 - 简单工厂模式StaticFactoryMethod

    简单工厂模式的定义         创建型模式:         我们把被创建的对象称为产品,把创建产品的对象称为工厂.如果要创建的产品不多,只要一个工厂类就可以完成,这种模式叫简单工厂模式. 在简单 ...

  9. CSAPP 配套实验 DataLab

    第一次写博客,当作随笔留给自己看吧,如果能帮到读者,是我的荣幸. 这是 CSAPP 的配套实验 DataLab,概括的来说就是在较严格的限制条件下把 15 个函数补充完整. 本人能力没有那么强,很多题 ...

  10. Loadrunner的函数收集

    1.int web_url( const char *StepName, const char *url, <List of Attributes>, [EXTRARES, <Lis ...