1.安装ngx-echarts

npm install echarts --savenpm install ngx-echarts --save

---

2.在项目中引入echarts

在项目包配置文件中引入js脚本

//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.ts

import { NgModule } from '@angular/core';
import { EchartsComponent } from './echarts/echarts.component';
import { AngularEchartsModule } from 'ngx-echarts';@NgModule({imports: [AngularEchartsModule],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} ({d}%)"},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}]}}

---

补充

---

echarts.component.html

    <div echarts [options] = "chartOption" [loading]="showloading" class="demo-chart"></div><div echarts [options] = "Baroptions" [loading]="showloading" class="demo-chart"></div><div echarts [options] = "linkoption" [loading]="showloading" class="demo-chart"></div><div echarts [options] = "mapoption" [loading]="showloading" class="demo-chart"></div>

关于api文档

[options]：与官方演示网站的选项相同
[dataset]：您可以忽略“options”中的“data”属性，并用于dataset绑定系列数据。
[loading]：布尔属性。当您的数据未准备好时，使用它来切换加载动画的echarts。
theme：用它来初始化具有主题的echarts。你需要在主题文件.angular-cli.json或index.html。例如，如果我们要dark.js在Echarts主题页面中使用：<div echarts theme = "dark" class = "demo-chart" [options] = "chartOptions"></div>这样我们就使用成功dark主题了。
(chartInit)它暴露了echartsInstance 'chartInit'事件。所以，你可以直接调用的API一样：resize()，showLoading()

---

例如

html

<div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>

ts

onChartInit(ec) {this.echartsIntance = ec;
}resizeChart() {if (this.echartsIntance) {this.echartsIntance.resize();this.echartsIntance.showLoading();}
}

后续在更新吧！ 毕竟上班时间搞这个 (ૢ˃ꌂ˂ૢ)

作者：SevenLonely
链接：http://www.jianshu.com/p/e512191dae80
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。