angular 引用 echarts.js案例
1，angular.json中引用 "node_modules/echarts/dist/echarts.js"；
2，html:<div echarts [options]='chartOption' class='demo-chart'></div>;
3,初始化数据：
ssss = {
title: {
text: '最近一个月订单量'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: []
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: '主动消费',
type: 'line',
stack: '总量',
data: []
},
{
name: '升级',
type: 'line',
stack: '总量',
data: []
},
{
name: '注册',
type: 'line',
stack: '总量',
data: []
},
{
name: '抢购',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
]
}
4，动态赋值：
orderNum(shang, jin){
let datas;
this.http.get(‘地址’).subscribe(data=> {
datas = data;
if (datas.IsSuccess) {
this.tongJiBox=true;
for (let a in datas.Data) {
/*datas.Data[a].BusiDate.substr(datas.Data[a].BusiDate.length-2)*/
if (datas.Data[a].BusiDate) {
this.ssss.xAxis.data.push(datas.Data[a].BusiDate);
}
this.ssss.legend.data.push('主动消费', '升级', '注册', '抢购');
this.ssss.series[0].data.push(datas.Data[a].ZxNum);
this.ssss.series[1].data.push(datas.Data[a].SJNum);
this.ssss.series[2].data.push(datas.Data[a].RegNum);
this.ssss.series[3].data.push(datas.Data[a].SecondJhNum);
this.chartOption = this.ssss;
}
} else {
}
});
}
drawBarChart() {
const data = [
{ weekday: '主动消费金额', bugnum: this.zhuj },
{ weekday: '主动消费PV', bugnum: this.zhuPV },
{ weekday: '注册金额', bugnum: this.ZCJ },
{ weekday: '注册PV', bugnum: this.ZCPV },
{ weekday: '升级金额', bugnum: this.shengJ },
{ weekday: '升级PV', bugnum: this.shengPV },
{ weekday: '抢购金额', bugnum: this.qiangJ },
{ weekday: '抢购PV', bugnum: this.qiangPV }
];
/*const chart = new G2.Chart({
container: 'g2_c1',
width : 900,
height : 500
});
chart.source(data);
chart.interval().position('weekday*bugnum').color('weekday');
chart.render();*/
}
