原文鏈接：https://segmentfault.com/a/1190000015692394
參考：https://zhuanlan.zhihu.com/p/41493615
Angular中使用Echart
一、配置環(huán)境
首先為大家介紹兩種方法，在angular中搭建使用可視化工具Echarts的環(huán)境：
快速簡(jiǎn)單，但是依賴(lài)網(wǎng)絡(luò)(自己試用或?qū)W習(xí)Echarts時(shí)，可用這種方法)
需下載但是使用穩(wěn)定（一般在項(xiàng)目中使用這種辦法）
使用在線依賴(lài)-方法1 ：
在angular項(xiàng)目中的src文件夾中，找到index.html文件，在<head></head>中加入在線依賴(lài)包<script?src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.js"></script>
使用本地依賴(lài)-方法2：
首先使用npm來(lái)安裝echarts（在項(xiàng)目文件夾中打開(kāi)cmd，輸入以下命令）
npm install --save-dev?echarts
然后查看package.json中的dependencies里是否已經(jīng)有echarts了
angular項(xiàng)目文件夾src/assets文件夾內(nèi)新建一個(gè)js文件夾，將bower_components/echarts/dist中的echarts.min.js拷貝到新建的js文件夾內(nèi)
在angular項(xiàng)目中的src文件夾中，找到index.html文件，在<head></head>中加入本地依賴(lài)包
<script?src="../assets/js/echarts.min.js"></script>
二、簡(jiǎn)單使用echarts
一般我們使用echarts時(shí)會(huì)單獨(dú)建立一個(gè)文件，避免與組件的component.ts的邏輯搞混。那么我們?cè)谑褂胑charts的組件文件夾中，新建一個(gè)echart_1.ts，將可視化展示相關(guān)的內(nèi)容與ts邏輯內(nèi)容分離。
在html中加入div
<div?id="chart111"?style="width: 30rem;height:20rem;"></div>
在echarts.ts中寫(xiě)一個(gè)折線圖，名為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元素相關(guān)聯(lián)（只看注釋行就行）
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() { //把折線圖關(guān)聯(lián)到html的元素 ????????echarts.init(document.getElementById('chart111')).setOption(GRAPH1);
?}}
Angular使用cookie
ngx-cookie-service來(lái)操作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的存儲(chǔ)
this.cookieService.set('pass', type);
//cookie的讀取
const type= this.cookieService.get("pass");
前端記住密碼功能：
參考鏈接：https://blog.csdn.net/walk_man_3/article/details/80516548
