+-
首页 专栏 angularjs 文章详情
《立春》 发布于 1 月 25 日
关注作者
关注作者
0
在angular中使用二charts
《立春》 发布于 1 月 25 日
废话不多说，直接开始
安装echarts：npm install echarts --save 在需要使用echarts的component中引入echarts:
import * as echarts from 'echarts'; 由于没有在展示echarts的dom中使用angular指令可以直接在生命周期函数
ngOnInit中使用
this.initCharts();
ngOnInit(): void {
console.log('ngOnInit()');
this.initCharts();
}4.定义dom
<div class="lineChart"></div>5.定义initCharts()函数
initCharts(): void {
const lineChart = echarts.init(document.querySelector('.lineChart'));
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
lineChart.setOption(option);
}其结果为：
echarts angularjs
阅读 14 发布于 1 月 25 日
赞
收藏
分享
本作品系原创， 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
《立春》
1 声望
0 粉丝
0 条评论
得票 时间
提交评论
《立春》
1 声望
0 粉丝
宣传栏
▲
废话不多说，直接开始
安装echarts：npm install echarts --save 在需要使用echarts的component中引入echarts:
import * as echarts from 'echarts'; 由于没有在展示echarts的dom中使用angular指令可以直接在生命周期函数
ngOnInit中使用
this.initCharts();
ngOnInit(): void {
console.log('ngOnInit()');
this.initCharts();
}4.定义dom
<div class="lineChart"></div>5.定义initCharts()函数
initCharts(): void {
const lineChart = echarts.init(document.querySelector('.lineChart'));
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
lineChart.setOption(option);
}其结果为：
