angular7中使用echarts

安装依赖

建议使用cnpm 安装，直接使用npm可能会报错

cnpm install echarts --save
cnpm install ngx-echarts --save

引入js文件

angular.json

"scripts": [
    "node_modules/echarts/dist/echarts.js"
],

使用

1. 首先在需要的模块中引入
   microfactory-distribute.module.ts

   import {NgxEchartsModule} from 'ngx-echarts';
   
   imports: [
     CommonModule,
     MicrofactoryDistributeRoutingModule,
     SharedModule,
     NgxEchartsModule
   ]
   

2. 定义数据

   export class MicrofactoryDistributeComponent implements OnInit {
   
       option = {
           backgroundColor: '#0e202d',
           tooltip: {},
           xAxis: {
               data: ["企业", "农专", "个体"],
               axisTick: {
                   show: false
               },
               axisLine: {
                   show: false
               },
               axisLabel: {
                   show: false,
                   textStyle: {
                       color: '#e54035'
                   }
               }
           },
           yAxis: {
               splitLine: {
                   show: false
               },
               axisTick: {
                   show: false
               },
               axisLine: {
                   show: false
               },
               axisLabel: {
                   show: false
               }
           },
           series: [{
               name: '年报上报率3',
               type: 'pictorialBar',
               symbolSize: [100, 45],
               symbolOffset: [0, -20],
               z: 12,
               itemStyle: {
                   normal: {
                       color: '#14b1eb'
                   }
               },
               data: [{
                   value: 100,
                   symbolPosition: 'end'
               }, {
                   value: 50,
                   symbolPosition: 'end'
               }, {
                   value: 20,
                   symbolPosition: 'end'
               }]
           }, {
               name: '年报上报率2',
               type: 'pictorialBar',
               symbolSize: [100, 45],
               symbolOffset: [0, 20],
               z: 12,
               itemStyle: {
                   normal: {
                       color: '#14b1eb'
                   }
               },
               data: [100, 50, 20]
           }, {
               name: '年报上报率1',
               type: 'pictorialBar',
               symbolSize: [150, 75],
               symbolOffset: [0, 37],
               z: 11,
               itemStyle: {
                   normal: {
                       color: 'transparent',
                       borderColor: '#14b1eb',
                       borderWidth: 5
                   }
               },
               data: [100, 50, 20]
           }, {
               name: '年报上报率',
               type: 'pictorialBar',
               symbolSize: [200,100],
               symbolOffset: [0, 50],
               z: 10,
               itemStyle: {
                   normal: {
                       color: 'transparent',
                       borderColor: '#14b1eb',
                       borderType: 'dashed',
                       borderWidth: 5
                   }
               },
               data: [100, 50, 20]
           }, {
               type: 'bar',
               itemStyle: {
                   normal: {
                       color: '#14b1eb',
                       opacity: .7
                   }
               },
               silent: true,
               barWidth: 100,
               barGap: '-100%', // Make series be overlap
               data: [100, 50, 20]
           }]
       };
   
       constructor() { }
   
       ngOnInit() {
       }
   
   

}
```
3. 使用

```
<div echarts [options]="option"></div>
```

4. 效果预览