angular7中使用echarts

心已赠人 2021-10-18 15:28 520阅读 0赞

#### 安装依赖 ####

建议使用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>
    ```

1.  效果预览  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211018/71dc40db17b8488ca7b79d303b1b2ff4.png