{"id":21827503,"url":"https://github.com/laixiangran/e-ngx-echarts","last_synced_at":"2026-05-02T05:43:44.919Z","repository":{"id":57218017,"uuid":"142388265","full_name":"laixiangran/e-ngx-echarts","owner":"laixiangran","description":"基于 Angular 的 echarts 图表组件","archived":false,"fork":false,"pushed_at":"2018-11-15T01:41:04.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T08:27:19.834Z","etag":null,"topics":["angular","echarts"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laixiangran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-26T04:23:06.000Z","updated_at":"2018-07-30T10:31:08.000Z","dependencies_parsed_at":"2022-08-28T21:40:41.068Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-echarts","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-echarts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244796243,"owners_count":20511667,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","echarts"],"created_at":"2024-11-27T18:13:22.158Z","updated_at":"2026-05-02T05:43:44.877Z","avatar_url":"https://github.com/laixiangran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-echarts\n\n基于 Angular 的 [echarts](http://echarts.baidu.com/index.html) 图表组件\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-echarts\n\t```\n\n2. Add the ENgxChartModule\n\n\t```typescript\n\timport { ENgxEChartsModule } from 'e-ngx-echarts';\n\t@NgModule({\n\t    imports: [\n\t        ENgxEChartsModule\n\t    ]\n\t})\n\t```\n\n3. template\n\n\t```html\n\t\u003cdiv style=\"width: 600px; height:400px;\" echarts [options]=\"options\" (ready)=\"onEChartsReady($event)\"\u003e\u003c/div\u003e\n\t```\n\n4. component\n\n\t```typescript\n\toptions = {\n        title: {\n            text: '堆叠区域图'\n        },\n        tooltip: {\n            trigger: 'axis',\n            axisPointer: {\n                type: 'cross',\n                label: {\n                    backgroundColor: '#6a7985'\n                }\n            }\n        },\n        legend: {\n            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']\n        },\n        toolbox: {\n            feature: {\n                saveAsImage: {}\n            }\n        },\n        grid: {\n            left: '3%',\n            right: '4%',\n            bottom: '3%',\n            containLabel: true\n        },\n        xAxis: [\n            {\n                type: 'category',\n                boundaryGap: false,\n                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']\n            }\n        ],\n        yAxis: [\n            {\n                type: 'value'\n            }\n        ],\n        series: [\n            {\n                name: '邮件营销',\n                type: 'line',\n                stack: '总量',\n                areaStyle: {normal: {}},\n                data: [120, 132, 101, 134, 90, 230, 210]\n            },\n            {\n                name: '联盟广告',\n                type: 'line',\n                stack: '总量',\n                areaStyle: {normal: {}},\n                data: [220, 182, 191, 234, 290, 330, 310]\n            },\n            {\n                name: '视频广告',\n                type: 'line',\n                stack: '总量',\n                areaStyle: {normal: {}},\n                data: [150, 232, 201, 154, 190, 330, 410]\n            },\n            {\n                name: '直接访问',\n                type: 'line',\n                stack: '总量',\n                areaStyle: {normal: {}},\n                data: [320, 332, 301, 334, 390, 330, 320]\n            },\n            {\n                name: '搜索引擎',\n                type: 'line',\n                stack: '总量',\n                label: {\n                    normal: {\n                        show: true,\n                        position: 'top'\n                    }\n                },\n                areaStyle: {normal: {}},\n                data: [820, 932, 901, 934, 1290, 1330, 1320]\n            }\n        ]\n    };\n    \n    onEChartsReady(evt: any) {\n        console.log(evt);\n    }\n\t```\n\n## API\n\n### exportAs\n\n- `eNgxECharts` - 导出的指令变量，可在模板获取指令类并调用（`#eNgxECharts=\"eNgxECharts\"`）。\n\n### Inputs\n\n- `options`（`Object`） - options 与[echarts的配置属性](http://echarts.baidu.com/option.html)一致\n\n- `theme`（`Object`） - 调用 [echarts.init](http://echarts.baidu.com/api.html#echarts.init) 方法传入的主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。可通过[echarts主题构建工具](http://echarts.baidu.com/theme-builder/)导出自定义主题的配置对象（JSON版）\n\n- `initOpts`（`Object`） - 调用 [echarts.init](http://echarts.baidu.com/api.html#echarts.init) 方法传入的附加参数\n\n### Outputs\n\n- `ready` - 初始化完成的事件，$event为当前 ENgxEChartsDirective 实例\n\n- `chartClick`: 点击事件。参数同 `click` 事件\n\n- `chartDblClick`: 双击事件。参数同 `dblclick` 事件\n\n- `chartMouseDown`: 鼠标按下事件。`mousedown` 事件\n\n- `chartMouseUp`: 鼠标松开事件。参数同 `mouseup` 事件\n\n- `chartMouseOver`: 鼠标移上事件。参数同 `mouseover` 事件\n\n- `chartMouseOut`: 鼠标移开事件。参数同 `mouseout` 事件\n\n- `chartDataZoom`: 数据区域缩放后的事件。参数同 `dataZoom` 事件\n\n更多事件可查看：[http://echarts.baidu.com/api.html#events](http://echarts.baidu.com/api.html#events)\n\n### Properties\n\n- `echartsIntance` - echarts 实例\n\n### Service\n\n- `ENgxEchartsService` -  全局 echarts 对象包装器，可以通过它获取全局 echarts 对象及相应方法\n\n示例：\n\n```typescript\nimport { ENgxEchartsService } from 'e-ngx-echarts';\n\n//...\nconstructor(public es: ENgxEchartsService) {}\n\nngOnInit() {\n\t// 获取全局 echarts 对象 \n\tconst echarts = this.es.echarts;\n\techarts.registerTheme('wonderland', obj);\n\t\n\t// 或者直接调用服务包装好的方法：\n\t// this.es.registerTheme('wonderland', obj);\n}\n```\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-echarts/lists"}