前言

例子基于之前文章开发。
用angular的思想之一，数据驱动，页面上的一切变化我们都用数据变化来控制，页面只需要绑定数据，然后我们操作数据。
echarts的更多用例可以参考官网。
echarts-ng2官网：https://twp0217.github.io/echarts-ng2/#/documentation

安装
npminstallecharts--save

npminstallecharts-ng2--save

引用
在app.module.ts中引用
import{EchartsNg2Module}from'echarts-ng2';

imports:[
BrowserModule,
FormsModule,
HttpModule,
WeUIModule,
EchartsNg2Module,
RouterModule.forRoot(ROUTES)
],

使用
在count-year.component.ts中添加一些数据项
import{EChartOption}from'echarts-ng2';

exportclassCountYearComponentimplementsOnInit{

//饼图的配置
chartOption:EChartOption;
//参考官网的配置项
lineOption:EChartOption;

constructor(){

}

ngOnInit(){
//创建一些模拟数据
this.chartOption=this.createChart([{name:'宠物',value:37},{name:'工具',value:222},{name:'孩子',value:4466}])
constx=['1月','3月','4月','5月','6月'];
consty=[1000,1300,2045,2780,2400,4310];
this.lineOption=this.createLine(x,y,'1000');

}
//画饼图
privatecreateChart(data:any[]):EChartOption{
return{
tooltip:{
trigger:'item',
formatter:'{a}
{b}:{c}({d}%)'
},
series:[
{
name:'消费',
type:'pie',
radius:'55%',
center:['50%','50%'],
data:data
}
]
};
}
//画折线图
privatecreateLine(x,y,title:string):EChartOption{
return{
title:{
text:title,
subtext:'单位（元）',
x:'right'
},
tooltip:{
trigger:'axis'
},
grid:{x:12,y:10,x2:12,y2:30,borderWidth:0},
xAxis:[
{
splitLine:{show:false},
type:'category',
boundaryGap:false,
data:x
}
],
yAxis:[
{
show:false,
type:'value'
}
],
series:[
{
name:'消费',
type:'line',
center:['10%','10%'],
smooth:true,
itemStyle:{normal:{areaStyle:{type:'default'}}},
data:y
},
]
};
}
}

页面里添加图表元素





 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！