首页专栏 angularjs 文章详情

在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 粉丝

关注作者

宣传栏

▲

废话不多说，直接开始

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);
}

其结果为：

在angular中使用二charts

《立春》

《立春》

宣传栏

相关推荐