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. jmeter 之 JSON 断言

    1.JSON 断言所在位置:断言->JSON 断言 2.JSON断言中的字段解析 Assert JSON Path exists:json 表达式,判断所字段是否存在,存在则为True, 否则为 ...

  2. Kagol:2022年最值得推荐的前端开源文章

    大家好,我是 Kagol,Vue DevUI 作者,从2020年开始一直专注于前端开源组件库的建设,在前端开源组件库.开源社区运营方面积累了一些经验,2020年主要的创作也是围绕前端组件库和开源两个主 ...

  3. 使用腾讯云部署war包

    目录 1.前期准备 2.springboot打war包 3.部署war包 4.导入数据库 5.修改Tomcat启动端口 6.启动服务器 7.设置腾讯云服务器防火墙规则 8.从外部访问 9.总结 10. ...

  4. Amber22 安装过程miniconda报错处理

    最近在安装amber22时,使用其官方说明安装,但在安装miniconda这一步出错,致使amber22安装不成功! 报错如下: CondaFileIOError: '/home/lbm/amber2 ...

  5. C++ 之 cout 格式化输出

    写代码时每次用到格式化输出就各种搜来搜去,今天好好整理一下,方便以后查阅和使用. 参考链接: C++ 之 cout 使用攻略 C++ 格式化输出 首先,加上头文件 #include <ioman ...

  6. Java中Elasticsearch 实现分页方式(三种方式)

    目录 ES 简介 ES 的特点: 一.from + size 浅分页 二.scroll 深分页 scroll删除 三.search_after 深分页 ES 简介 Elasticsearch 是一个基 ...

  7. SICTF2023 web_wp

    兔年大吉 源码如下 <?php highlight_file(__FILE__); error_reporting(0); class Happy{ private $cmd; private ...

  8. (18)go-micro微服务ELK介绍

    目录 一 什么是ELK 二 Beats的六种工具 三 ELK系统的特点 四 ELK+beats系统架构 五 ELK优点 六 最后 一 什么是ELK ELK是三个[开源软件]的缩写,分别表示:Elast ...

  9. 表单标签补充及css层叠样式

    表单标签补充及css层叠样式 一.表单知识点补充 1.获取用户输入的标签两大重要属性 name属性:类似于字典的键 value属性:类似于与字典的值 # form表单朝后端发送数据的时候,标签必须得有 ...

  10. 【单片机】通过定时器实现模拟任意路PWM通道(带实例和计算方法)

    前言说明 现在有很多单片机的硬件定时器都具备PWM输出功能,不过有时候会因为器件成本或硬件设计等原因,导致数量不够或者所使用的引脚不支持定时器输出.尴尬的是,笔者接手的项目两种情况都存在,项目需要支持 ...