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