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. Spring面试点汇总

    Spring面试点汇总 我们会在这里介绍我所涉及到的Spring相关的面试点内容,本篇内容持续更新 我们会介绍下述Spring的相关面试点: Spring refresh Spring bean Sp ...

  2. 常用BOM操作 DOM操作 事件 jQuery类库

    目录 BOM操作 常用BOM操作 三种弹出框 alert confirm prompt 定时任务 setTimeout 循环定时 setInterval DOM操作 查找标签 直接查找 间接查找 操作 ...

  3. 《HTTP权威指南》– 1.HTTP概述

    HTTP的概念 HTTP : Hypertext Transfer Protocol 超文本传输协议 因特网上有数千种不同的数据类型,HTTP仔细地给每种要通过Web传输的对象都打上了名为MIME类型 ...

  4. yolov5数据集制作 数据集分割+voc格式转txt格式代码

    先上数据集分割代码 网上没找到合适的 自己写了一个 分割比例为0.6 :0.2 :0.2 import os import random oriImgDir = "./change14img ...

  5. RocketMQ Compaction Topic的设计与实现

    本文作者:刘涛,阿里云智能技术专家. 01 Compaction Topic介绍 一般来说,消息队列提供的数据过期机制有如下几种,比如有基于时间的过期机制--数据保存多长时间后即进行清理,也有基于数据 ...

  6. Linux基础操作-02

    Linux操作 Linux操作权限 显示详细信息之后,文件地权限显示 drwxrwxrwx "-" 表示常规文件 d 目录文件 b 块特殊设备 c 字符特殊设备文件 p 管道设备文 ...

  7. 数据结构-详解优先队列的二叉堆(最大堆)原理、实现和应用-C和Python

    一.堆的基础 1.1 优先队列和堆 优先队列(Priority Queue):特殊的"队列",取出元素顺序是按元素优先权(关键字)大小,而非元素进入队列的先后顺序. 若采用数组或链 ...

  8. MRS_开发编译与设置相关问题汇总

    解决问题如下: MRS开发编译时,如何修改工程优化等级 MRS进行工程编译时,如何配置FLASH.RAM显示占比 打印浮点类型 配置LD文件在工程中显示 使用sprintf打印 当重复多次调用相同函数 ...

  9. 1888: 生成括号(等级考试3级 2021-09 T5)

    题目: 程序: #include<bits/stdc++.h> using namespace std; int n; string s1; void dfs(int l,int r) { ...

  10. C++ 从数组中拿值,每个值不相同

    代码和思路 原理就是生成0,n个索引,每个索引不相同即可. 索引再到数组拿数据就行 #include <iostream> #include <vector> #include ...