1.安裝ngx-echarts

npm install echarts --savenpm install ngx-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中import NgxEchartsModule

echarts.module.ts

import { NgModule } from '@angular/core';import { EchartsComponent } from './echarts/echarts.component';import { NgxEchartsModule } from 'ngx-echarts';@NgModule({ imports: [  NgxEchartsModule  ], declarations: [EchartsComponent],})export class EchartsModule { }

echarts.component.ts

import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-echarts', templateUrl: './echarts.component.html', styleUrls: ['./echarts.component.scss']})export class EchartsComponent implements OnInit { 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} <br/>{b}: {c} (iwvjtn8m0%)"  },  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: 'data from PM25.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) {     return val[2] / 10;    },    label: {     normal: {      formatter: '{b}',      position: 'right',      show: false     },     emphasis: {      show: true     }    },    itemStyle: {     normal: {      color: '#ddb926'     }    }   },   {    name: 'Top 5',    type: 'effectScatter',    coordinateSystem: 'geo',    data: this.datamapvalue,    symbolSize: function (val) {     return val[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   }  ] }}