添加 Echarts bi库
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库的更多相关文章
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- svn add 添加到版本库
转 svn add-添加到版本库 常用操作1.添加一个文件到工作拷贝:$ svn add foo.c 2.当添加一个目录,svn add缺省的行为方式是递归的:$ svn add testdir 3. ...
- 添加Ubuntu的库文件路径
添加Ubuntu的库文件路径 http://blog.csdn.net/r91987/article/details/6879062 关于ubuntu添加共享库路径: 1. 将绝对路径写入 /etc/ ...
- android 添加依赖的库文件
Notpad: 2016-3-16: 1.android 添加依赖的库文件 右键自己的项目 -> properties ->android ->在Library处点击add -> ...
- [cocos2dx笔记004] android添加�静态库project
(基于2.2.2版本号) 这步比較麻烦,不像vs2013那样好设置.參考了非常多文章.还是不能解决这个问题.仅仅有慢慢摸索了.在这里贴出来,希望能让大家能少走点弯路. 还是其于前面的文章提到的myli ...
- svn管理代码在cornerstone上无法添加.a 静态库文件
有时候.a静态库不能上传到svn的服务器 导致别人拉代码运行不了 这是因为cornerstone设置里面默认不会提交.a文件, 在上图选项栏里是cornerstone默认忽略上传的文件名后缀,在这里 ...
- ssh keygen命令实现免密码通信(git库获取操作权限:开发人员添加到git库中,获取操作权限)
先看两个机器实现免密码登陆通讯: 假设 A 为客户机器,B为目标机: 要达到的目的: A机器ssh登录B机器无需输入密码: 加密方式选 rsa|dsa均可以,默认dsa 做法: 1.登录A机器 2.s ...
- 动态添加echarts
本次只贴js和jsp代码 jsp只需添加一个div即可, <div class="fLayout-right-box"> <hy:layoutArea width ...
- Android添加百分比布局库时显示Failed to resolve: com.android.support.percent:问题
这是看第一行代码中遇到的问题,要添加百分比布局库的依赖时要在app下的bulid.gradle添加以下代码 implementation fileTree(dir:'libs',include:['* ...
- .NET 类库研究必备参考 添加微软企业库源码
前不久,为大家提供了一个.NET 类库参考源码的网站,扣丁格鲁(谐音“coding guru”),使用了段时间,发现一些不方便的地方,特意做了一些更改,希望大家多提意见,下面是此次更改的地方. 更改1 ...
随机推荐
- Spring面试点汇总
Spring面试点汇总 我们会在这里介绍我所涉及到的Spring相关的面试点内容,本篇内容持续更新 我们会介绍下述Spring的相关面试点: Spring refresh Spring bean Sp ...
- 常用BOM操作 DOM操作 事件 jQuery类库
目录 BOM操作 常用BOM操作 三种弹出框 alert confirm prompt 定时任务 setTimeout 循环定时 setInterval DOM操作 查找标签 直接查找 间接查找 操作 ...
- 《HTTP权威指南》– 1.HTTP概述
HTTP的概念 HTTP : Hypertext Transfer Protocol 超文本传输协议 因特网上有数千种不同的数据类型,HTTP仔细地给每种要通过Web传输的对象都打上了名为MIME类型 ...
- yolov5数据集制作 数据集分割+voc格式转txt格式代码
先上数据集分割代码 网上没找到合适的 自己写了一个 分割比例为0.6 :0.2 :0.2 import os import random oriImgDir = "./change14img ...
- RocketMQ Compaction Topic的设计与实现
本文作者:刘涛,阿里云智能技术专家. 01 Compaction Topic介绍 一般来说,消息队列提供的数据过期机制有如下几种,比如有基于时间的过期机制--数据保存多长时间后即进行清理,也有基于数据 ...
- Linux基础操作-02
Linux操作 Linux操作权限 显示详细信息之后,文件地权限显示 drwxrwxrwx "-" 表示常规文件 d 目录文件 b 块特殊设备 c 字符特殊设备文件 p 管道设备文 ...
- 数据结构-详解优先队列的二叉堆(最大堆)原理、实现和应用-C和Python
一.堆的基础 1.1 优先队列和堆 优先队列(Priority Queue):特殊的"队列",取出元素顺序是按元素优先权(关键字)大小,而非元素进入队列的先后顺序. 若采用数组或链 ...
- MRS_开发编译与设置相关问题汇总
解决问题如下: MRS开发编译时,如何修改工程优化等级 MRS进行工程编译时,如何配置FLASH.RAM显示占比 打印浮点类型 配置LD文件在工程中显示 使用sprintf打印 当重复多次调用相同函数 ...
- 1888: 生成括号(等级考试3级 2021-09 T5)
题目: 程序: #include<bits/stdc++.h> using namespace std; int n; string s1; void dfs(int l,int r) { ...
- C++ 从数组中拿值,每个值不相同
代码和思路 原理就是生成0,n个索引,每个索引不相同即可. 索引再到数组拿数据就行 #include <iostream> #include <vector> #include ...