angular7中使用echarts

最新推荐文章于 2023-12-21 13:13:36 发布

yw00yw

最新推荐文章于 2023-12-21 13:13:36 发布

阅读量2k

点赞数 1

分类专栏： angular 文章标签： angular angular7 echarts

本文链接：https://blog.youkuaiyun.com/yw00yw/article/details/99313475

版权

angular 专栏收录该内容

63 篇文章

订阅专栏

本文介绍如何在Angular项目中使用ECharts和ngx-echarts进行图表展示，包括依赖安装、JS文件引入、模块引入及图表数据配置，展示了年报上报率的复杂图表配置实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖

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

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

引入js文件

angular.json

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

使用

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

import {NgxEchartsModule} from 'ngx-echarts';

imports: [
  CommonModule,
  MicrofactoryDistributeRoutingModule,
  SharedModule,
  NgxEchartsModule
]

定义数据

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>
```

效果预览