-
如何引入第三方插件以jquery为例
1.安装
npm install --save jquery
2.angular.json 配置
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
3.$是javaScript的AppCompoment是TyptScript的,不能直接引用,将对应的类型文件安装本地库
npm install @types/jquery --save-dev
4.使用
import * as $ from 'jquery';
// 可以在ngOninit方法中打印进行测试
console.log($('body'));
-
如何使用echarts
1.安装
npm install echarts --save
npm install ngx-echarts --save
2.app.modules.ts根模块中引入 NgxEchartsModule
import {NgxEchartsModule} from "ngx-echarts";
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
NgxEchartsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
3.demo如下
- AppComponent.html的ts
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
chartOption = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 274, name: '联盟广告'},
{value: 235, name: '视频广告'},
{value: 400, name: '搜索引擎'}
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.6)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
}
ngOnInit(): void {
this.chartOption;
}
}
- html
<div echarts [options]="chartOption" class="chart"></div>
如果还是不行就用如下方法,以在angular4中添加china.js为例
0.先requre导入china.js
1.你已经按照上面的操作导入了model类和相应依赖npm命令,在ts中添加如下代码
import * as echarts from 'echarts';
/**
* @Description : 中国地图
* @Auth : Xuhy
* @Date : 2019/5/24
* @Time : 10:00
*/
@Component({
selector: 'app-china-js',
templateUrl: './china-js.component.html',
})
export class ChinaJsComponent implements OnInit {
// 中国地图
option = {
tooltip: {
trigger: 'item',
formatter: '{b}</br>{c}'
},
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'multiple',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{name: '广东', selected: true, value: 22}
]
}
]
};
app: any;
dom: HTMLElement;
myChart: any;
ngOnInit(): void {
this.app = {};
this.dom = document.getElementById('map');
this.myChart = echarts.init(this.dom);
this.myChart.setOption(this.option, true);
}
}
2.在html中添加如下代码
<div id="map" class="chart" style="width: 400px;height: 400px;"></div>