在angular中使用echarts

《立春》

废话不多说,直接开始

  1. 安装echarts:npm install echarts --save
  2. 在需要使用echarts的component中引入echarts:import * as echarts from 'echarts';
  3. 由于没有在展示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);
    }

其结果为:
image.png

阅读 384
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏