第一步:安装依赖
npm
install
echarts --save
npm
install
ngx-echarts --save
第二步:在Module中引入
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
imports: [
...,
// 引入module
NgxEchartsModule
],
})
export class AppModule { }
第三步:在angular-cli中添加js引入
添加:node_modules/echarts/dist/echarts.min.js
页面中使用:
html:
<div style="padding: 20px;background: #fff;" echarts [options]="currentDayPay" class="broken-line"></div>
ts 动态加载
import { EChartOption } from 'echarts';
声明:currentDayPay;
currentPay() {
this.StatisticsService.currentPay().subscribe((res: any) => {
if (res.Code == 200) {
let data = res.Data.TodaySum;
let timeArr = [], valueArr = [];
data.forEach(item => {
timeArr.push(item.date);
valueArr.push(item.incomeCnt);
});
this.currentDayPay = {
title: {
text: '当日付费'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
height: 50,
left: 'center',
top: 'bottom',
data: ['今日付费']
},
grid: {
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: timeArr
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '今日付费',
type: 'line',
stack: '总量',
areaStyle: {},
data: valueArr
},
// {
// name: '昨日付费',
// type: 'line',
// stack: '总量',
// areaStyle: {},
// data: [820, 932, 901, 934, 1290, 1330, 1320]
// }
]
}
}
});
}