Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼
最近突發(fā)奇想，想自己做一個(gè)理財(cái)分析記錄的網(wǎng)頁(yè)，主要給自己記賬，然后想到了把每天，每周的消費(fèi)用圖標(biāo)分析出來，于是就需要用到百度的echarts圖標(biāo)插件，talk is cheep， show me the code。
1. npm 安裝ngx-echarts及相關(guān)的依賴
npm install echarts -S npm install ngx-echarts -S npm install @types/echarts -D
2. 添加js引導(dǎo)文件
{
"scripts": [
"../node_modules/echarts/dist/echarts.min.js" // or echarts.js for debug purpose
],
}
3. AppModule引入NgxEchartsModule
這里有個(gè)坑，記得在你調(diào)用了echarts的相關(guān)模塊的Module里面引入NgxEchartsModule，不然會(huì)報(bào)錯(cuò)：Template parse errors: Can't bind to 'options' since it isn't a known property of 'div'.所以切記
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
imports: [
...,
NgxEchartsModule
],
...
})
export class AppModule { }
4. 使用echarts
html
<div echarts [options]="chartOption" class="demo-chart"></div>
scss
.demo-chart {
height: 400px;
}
component
import { EChartOption } from 'echarts';
chartOption: EChartOption = {
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'
}]
}
5. 參考網(wǎng)站
https://www.npmjs.com/package/ngx-echarts
angular echarts 在線模板
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解(下)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
本篇文章主要介紹了一種angular的方法級(jí)的緩存注解（裝飾器），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議
AnglarJS作為一款優(yōu)秀的Web框架，可大大簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)。本文給大家介紹AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議，涉及到angularjs性能調(diào)優(yōu)相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12
Angular中innerHTML標(biāo)簽的樣式不起作用的原因解析
這篇文章主要介紹了Angular中innerHTML標(biāo)簽的樣式不起作用詳解 ,本文給出了解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
本篇文章主要介紹了Angular之指令Directive系列詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJS中的ng-bind-html指令和$sce服務(wù)，對(duì)大家學(xué)習(xí)AngularJS具有一定參考借鑒價(jià)值，有需要都可以參考學(xué)習(xí)。2016-09-09
angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例
本篇文章主要介紹了angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Angular8升級(jí)至Angular13遇到的問題解決
這幾天升級(jí)公司的一個(gè)Angular項(xiàng)目遇到了一些問題,下面這篇文章主要給大家介紹了關(guān)于Angular8升級(jí)至Angular13遇到的問題解決,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
詳解Angularjs 如何自定義Img的ng-load 事件
本篇文章主要介紹了詳解Angularjs 如何自定義Img的ng-load 事件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法
這篇文章主要介紹了使用AngularJS實(shí)現(xiàn)可伸縮的頁(yè)面切換的方法,AngularJS是一款熱門的JavaScript庫(kù),需要的朋友可以參考下2015-06-06