angular4中引入echarts的方法示例
1.安装ngx-echarts
npminstallecharts--save npminstallngx-echarts--save
2.在项目中引入echarts
//angular-cli.json文件
{
"apps":[{
"scripts":[
"../node_modules/echarts/dist/echarts.min.js",
"../node_modules/echarts/map/js/china.js",
"../node_modules/echarts/dist/extension/bmap.js"
]
}]
}
3.使用在你真正需要使用echarts指令的module中importNgxEchartsModule
echarts.module.ts
import{NgModule}from'@angular/core';
import{EchartsComponent}from'./echarts/echarts.component';
import{NgxEchartsModule}from'ngx-echarts';
@NgModule({
imports:[
NgxEchartsModule
],
declarations:[EchartsComponent],
})
exportclassEchartsModule{}
echarts.component.ts
import{Component,OnInit}from'@angular/core';
@Component({
selector:'app-echarts',
templateUrl:'./echarts.component.html',
styleUrls:['./echarts.component.scss']
})
exportclassEchartsComponentimplementsOnInit{
showloading:boolean=true;
constructor(){
setTimeout(()=>{
this.showloading=false;
},3000);
}
ngOnInit(){
}
chartOption={
title:{
text:'堆叠区域图'
},
tooltip:{
trigger:'axis'
},
legend:{
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
toolbox:{
feature:{
saveAsImage:{}
}
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
xAxis:[
{
type:'category',
boundaryGap:false,
data:['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis:[
{
type:'value'
}
],
series:[
{
name:'邮件营销',
type:'line',
stack:'总量',
areaStyle:{normal:{}},
data:[120,132,101,134,90,230,210]
},
{
name:'联盟广告',
type:'line',
stack:'总量',
areaStyle:{normal:{}},
data:[220,182,191,234,290,330,310]
},
{
name:'视频广告',
type:'line',
stack:'总量',
areaStyle:{normal:{}},
data:[150,232,201,154,190,330,410]
},
{
name:'直接访问',
type:'line',
stack:'总量',
areaStyle:{normal:{}},
data:[320,332,301,334,390,330,320]
},
{
name:'搜索引擎',
type:'line',
stack:'总量',
label:{
normal:{
show:true,
position:'top'
}
},
areaStyle:{normal:{}},
data:[820,932,901,934,1290,1330,1320]
}
]
}
Baroptions={
tooltip:{
trigger:'item',
formatter:"{a}
{b}:{c}({d}%)"
},
legend:{
orient:'vertical',
x:'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
series:[
{
name:'访问来源',
type:'pie',
selectedMode:'single',
radius:[0,'30%'],
label:{
normal:{
position:'inner'
}
},
labelLine:{
normal:{
show:false
}
},
data:[
{value:335,name:'直达',selected:true},
{value:679,name:'营销广告'},
{value:1548,name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius:['40%','55%'],
data:[
{value:335,name:'直达'},
{value:310,name:'邮件营销'},
{value:234,name:'联盟广告'},
{value:135,name:'视频广告'},
{value:1048,name:'百度'},
{value:251,name:'谷歌'},
{value:147,name:'必应'},
{value:102,name:'其他'}
]
}
]
}
linkoption={
title:{
text:'懒猫今日访问量'
},
color:['#3398DB'],
//气泡提示框，常用于展现更详细的数据
tooltip:{
trigger:'axis',
axisPointer:{//坐标轴指示器，坐标轴触发有效
type:'shadow'//默认为直线，可选为：'line'|'shadow'
}
},
toolbox:{
show:true,
feature:{
//显示缩放按钮
dataZoom:{
show:true
},
//显示折线和块状图之间的切换
magicType:{
show:true,
type:['bar','line']
},
//显示是否还原
restore:{
show:true
},
//是否显示图片
saveAsImage:{
show:true
}
}
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
xAxis:[{
type:'category',
data:[21231,1212,21231,3213],
axisTick:{
alignWithLabel:true
},
axisLabel:{
interval:0,
rotate:20
},
}],
yAxis:[{
name:"懒猫今日访问量",
type:'value'
}],
series:[{
name:'今日访问次数',
type:'bar',
barWidth:'60%',
label:{
normal:{
show:true
}
},
data:[21231,1212,21231,3213]
}]
}
datamapvalue=[
{name:'海门',value:[121.15,31.89,9]},
{name:'鄂尔多斯',value:[109.781327,39.608266,12]},
{name:'招远',value:[120.38,37.35,12]},
{name:'舟山',value:[122.207216,29.985295,12]},
{name:'齐齐哈尔',value:[123.97,47.33,14]},
{name:'盐城',value:[120.13,33.38,15]},
{name:'赤峰',value:[118.87,42.28,16]},
{name:'青岛',value:[120.33,36.07,18]},
{name:'乳山',value:[121.52,36.89,18]},
{name:'金昌',value:[102.188043,38.520089,19]}
];
mapoption={
backgroundColor:'#404a59',
title:{
text:'全国主要城市空气质量',
subtext:'datafromPM25.in',
sublink:'http://www.pm25.in',
left:'center',
textStyle:{
color:'#fff'
}
},
tooltip:{
trigger:'item'
},
legend:{
orient:'vertical',
y:'bottom',
x:'right',
data:['pm2.5'],
textStyle:{
color:'#fff'
}
},
geo:{
map:'china',
label:{
emphasis:{
show:false
}
},
roam:true,
itemStyle:{
normal:{
areaColor:'#323c48',
borderColor:'#111'
},
emphasis:{
areaColor:'#2a333d'
}
}
},
series:[
{
name:'pm2.5',
type:'scatter',
coordinateSystem:'geo',
data:this.datamapvalue,
symbolSize:function(val){
returnval[2]/10;
},
label:{
normal:{
formatter:'{b}',
position:'right',
show:false
},
emphasis:{
show:true
}
},
itemStyle:{
normal:{
color:'#ddb926'
}
}
},
{
name:'Top5',
type:'effectScatter',
coordinateSystem:'geo',
data:this.datamapvalue,
symbolSize:function(val){
returnval[2]/10;
},
showEffectOn:'render',
rippleEffect:{
brushType:'stroke'
},
hoverAnimation:true,
label:{
normal:{
formatter:'{b}',
position:'right',
show:true
}
},
itemStyle:{
normal:{
color:'#f4e925',
shadowBlur:10,
shadowColor:'#333'
}
},
zlevel:1
}
]
}
}
echarts.component.html