Angular2中使用echarts

2017-03-31阅读(10464)评论(10)牵着狗狗看MM

苏州实时公交查询

实现方式:
安装ng2-echarts的同时安装echarts
把echarts当作指令来使用,在app.module.ts 的declarations中引入。

1.安装依赖包跟echarts 库
npm install --save echarts@^3.2.0 angular2@2.0.0-beta.0 es6-promise@^3.0.2 es6-shim@^0.33.3 reflect-metadata@0.1.2 rxjs@5.0.0-beta.0 zone.js@0.5.10

2.安装ng2-echarts
npm install --save ng2-echarts

3.在app.module.ts中配置

[plain]import { Ng2Echarts } from ‘ng2-echarts’;

declarations: [
Ng2Echarts
]

[/plain]

4、组件中配置图表信息,可参考echart官网 echarts.component.ts

[plain]…
export class XXXComponent {
public burnData = {
theme: ”,
event: [
{
type: "click",
cb: function (res) {
console.log(res);
}
}
],
title: {
text: ‘未来一周气温变化’,
subtext: ‘纯属虚构’
},
tooltip: {
trigger: ‘axis’
},
legend: {
data:[‘最高气温’,’最低气温’]
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: ‘none’
},
dataView: {readOnly: false},
magicType: {type: [‘line’, ‘bar’]},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: ‘category’,
boundaryGap: false,
data: [‘周一’,’周二’,’周三’,’周四’,’周五’,’周六’,’周日’]
},
yAxis: {
type: ‘value’,
axisLabel: {
formatter: ‘{value} °C’
}
},
series: [
{
name:’最高气温’,
type:’line’,
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: ‘max’, name: ‘最大值’},
{type: ‘min’, name: ‘最小值’}
]
},
markLine: {
data: [
{type: ‘average’, name: ‘平均值’}
]
}
},
{
name:’最低气温’,
type:’line’,
data:[1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: ‘周最低’, value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: ‘average’, name: ‘平均值’},
[{
symbol: ‘none’,
x: ‘90%’,
yAxis: ‘max’
}, {
symbol: ‘circle’,
label: {
normal: {
position: ‘start’,
formatter: ‘最大值’
}
},
type: ‘max’,
name: ‘最高点’
}]
]
}
}
]
};
}
[/plain]

5、在界面中引入,使用指令,注意设置宽度高度,要不然不显示。

[html]<div [ng2-echarts]="burnData" style="height: 300px; width: 100%"></div>
[/html]

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » Angular2中使用echarts
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏