angular 引入echarts的具体方法及使用

第一步：安装依赖

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]
                        // }
                    ]
                }
            }

        });
    }