angular6项目中使用echarts图表的方法（有一个坑，引用报错）

1、安装相关依赖（采用的webpack）

npm install ecahrts --save

npm install ngx-echarts --save

2、angular.json 配置echarts路径

"scripts": [

　　"node_modules/echarts/dist/echarts.min.js",
　　"node_modules/echarts/map/js/china.js",
　　"node_modules/echarts/dist/extension/bmap.js"
 ]

3*、module文件中导入NgxEchartsModule模块，一般都是全局使用，放到项目中的共有模块中，因为并不是其他的每个模块都会用到echarts，所以放到app.module.ts文件下并不是最佳的实践方式。在项目中单独创建一个共享shared.module，在使用的component中引用即可。但是，使用公共module时，必须加入exports中，否则报错！

/**share.module.ts**/

import {NgxEchartsModule} from 'ngx-echarts';

...

imports: [

　　...,

　　NgxEchartsModule,

　　...

],

 exports: [

　　...,

　　NgxEchartsModule

　　, ...

]

4、

在对应的模板文件中如此使用

options = {

  title: {

    text: 'ECharts 入门示例'

  },

  tooltip: {},

  xAxis: {

    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

  },

  yAxis: {},

  series: [{

    name: '销量',

    type: 'bar',

    data: [5, 20, 36, 10, 10, 20]

  }]

}

<div echarts [options]="options" class="main-chart"></div>

巴特西

angular6项目中使用echarts图表的方法（有一个坑，引用报错）

最新文章

热门文章