当前位置: 首页 > 工具软件 > ngx-charts > 使用案例 >

eCharts-NgxCharts-ang2+

胡夕
2023-12-01

安装
npm install echarts -S
npm install ngx-echarts -S
app.module

import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
  imports: [
    NgxEchartsModule.forRoot({echarts: () => import('echarts')
    }),
  ],
})

组件内

<div id="echartsY" style="width: 300px;height: 200px;"></div> 
<div echarts [options]="echartsNgx"  style="width: 300px;height: 200px;"></div>
import * as echarts from 'echarts' //echarts
export class EcharsPicComponent implements OnInit {
  echart = echarts as any; //echarts
  echartsNgx: any; //ngx-charts
  constructor() { }
  ngOnInit(): void {
    this.echartYMethod();
    this.echartsNgxMethod();
  }
  //echarts
  echartYMethod() {
    let echartOption = {
      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'
      }]
    }
    this.echart.init(document.getElementById('echartsY')).setOption(echartOption);
  }
  //ngx-echarts
  echartsNgxMethod() {
    this.echartsNgx = {
      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',
        }]
    }
  }
}
 类似资料: