原文链接：https://segmentfault.com/a/1190000015692394
参考：https://zhuanlan.zhihu.com/p/41493615
Angular中使用Echart
一、配置环境
首先为大家介绍两种方法，在angular中搭建使用可视化工具Echarts的环境：
快速简单，但是依赖网络(自己试用或学习Echarts时，可用这种方法)
需下载但是使用稳定（一般在项目中使用这种办法）
使用在线依赖-方法1 ：
在angular项目中的src文件夹中，找到index.html文件，在<head></head>中加入在线依赖包<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>
使用本地依赖-方法2：
首先使用npm来安装echarts（在项目文件夹中打开cmd，输入以下命令）
npm install --save-dev echarts
然后查看package.json中的dependencies里是否已经有echarts了
angular项目文件夹src/assets文件夹内新建一个js文件夹，将bower_components/echarts/dist中的echarts.min.js拷贝到新建的js文件夹内
在angular项目中的src文件夹中，找到index.html文件，在<head></head>中加入本地依赖包
<script src="../assets/js/echarts.min.js"></script>
二、简单使用echarts
一般我们使用echarts时会单独建立一个文件，避免与组件的component.ts的逻辑搞混。那么我们在使用echarts的组件文件夹中，新建一个echart_1.ts，将可视化展示相关的内容与ts逻辑内容分离。
在html中加入div
<div id="chart111" style="width: 30rem;height:20rem;"></div>
在echarts.ts中写一个折线图，名为GRAPH1
declare const echarts: any;
export const GRAPH1 = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]};
在ts中使折线图与dom元素相关联（只看注释行就行）
import {Component,OnInit} from '@angular/core';
import { GRAPH1 } from './echart'; //从echart.ts中引入折线图GRAPH1
declare const echarts: any;
@Component({
selector: 'app-contain-exchart',
templateUrl: './contain-exchart.component.html',
styleUrls: ['./contain-exchart.component.css']})
export class ContainExchartComponent implements OnInit {
public myChart1;
public graph1;
constructor() {}
ngOnInit() { //把折线图关联到html的元素 echarts.init(document.getElementById('chart111')).setOption(GRAPH1);
}}
Angular使用cookie
ngx-cookie-service来操作cookie
安装ngx-cookie-service
npm install ngx-cookie-service
app.module.ts
import { CookieService } from 'ngx-cookie-service';
@NgModule({
imports: [],
providers: [CookieService]
})
app.component.ts
import { CookieService } from 'ngx-cookie-service';
constructor(private cookieService: CookieService) {}
//cookie的存储
this.cookieService.set('pass', type);
//cookie的读取
const type= this.cookieService.get("pass");
前端记住密码功能：
参考链接：https://blog.csdn.net/walk_man_3/article/details/80516548
