注意：该echarts版本为
v3.0.0ngx-echarts版本v2.1.0angular版本为v6.0.0以下本文下面采用最新版本的 echarts4.1.0ngx-echarts3.1.0angular6.0.0最新的和2.1.0用法变化不大。就是添加了些API
1.安装ngx-echarts
npm install echarts --save
npm 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();
}
}
后续在更新吧！ 毕竟上班时间搞这个 (ૢ˃ꌂ˂ૢ)
最新版本的 echarts
4.1.0ngx-echarts3.1.0angular6.0.0
最新版API文档
| 输入 | 类型 | 默认值 | 注释 |
|---|---|---|---|
[options] |
object | null | 它与官方演示站点中的选项相同。 |
[merge] |
object | null | 您可以使用它来更新部分内容options，尤其是在需要更新图表数据时。事实上，价值merge将用于echartsInstance.setOption()与notMerge = false。因此，您可以参考ECharts文档以获取详细信息。 |
[loading] |
boolean | false | 当数据未准备好时，使用它来切换echarts加载动画。 |
[autoResize] |
boolean | true | 当容器的宽度发生变化时，图表将自动调整大小。 |
[initOpts] |
object | null |
[initOpts]将使用的值echarts.init()。它可能包含devicePixelRatio，renderer，width或height性质。有关详细信息，请参阅ECharts文档。 |
[theme] |
string | null | 使用它来初始化主题echarts。您需要将主题文件包含在angular-cli.json其他模块解析器中。 |
[loadingOpts] |
object | null | 输入对象以自定义加载样式。有关详细信息，请参阅ECharts文档。 |
输出事件
chartClick：它会发出相同params的'click'事件
chartDblClick：它会发出相同params的'dblclick'事件
chartMouseDown：它会发出相同params的'mousedown'事件
chartMouseUp：它会发出相同params的'mouseup'事件
chartMouseOver：它会发出相同params的'mouseover'事件
chartMouseOut：它会发出相同params的'mouseout'事件
chartGlobalOut：它会发出相同params的'globalout'事件
chartContextMenu：它发出同样params的'contextmenu'事件（从v1.2.1开始）
chartDataZoom：它发出相同params的'dataZoom'事件（感谢averhaegen）
Service服务
NgxEchartsService 是全局 echarts 对象的包装器。您可以直接获取本机echarts对象或使用包装器方法。例如：
import {NgxEchartsService} from 'ngx-echarts';
//...
constructor(private es: NgxEchartsService) {}
ngOnInit() {
const echarts = this.es.echarts;
echarts.registerMap('HK', HK_GEO_JSON);
// Or you can:
// this.es.registerMap('HK', HK_GEO_JSON);
}
