twp0217/ngx-echarts

Apache ECharts component for Angular（基于 Angular 的 Apache ECharts 组件）

ngx-echarts's Issues

Jhipster项目中如何使用导入echarts图啊，急！求解答，谢谢！

请问，我用Jhipster建的项目，前端是基于angular2的，想在项目中导入echarts图，echart和angular2-echarts都安装了，在package.json文件下的dependencies也看到了echarts和angular2-echarts和对应版本，angular-cli.json中也导入了echarts.js，但是项目跑起来后一直报echarts的错误，ReferenceError: echarts is not defined这个错误，意思就是说导入echarts失败吧，具体怎么操作啊。谢谢

• 1.

Error: (systemJS)XHR error (404 not found) loading http://localhost:3000/echarts-ng2

我用的是angular的quickstart，按照readme的步骤在app.module.ts里 添加了
import { EchartsNg2Module } from 'echarts-ng2'
并且添加在了imports里
然后控制台就报了这个错误
Error: (systemJS)XHR error (404 not found) loading http://localhost:3000/echarts-ng2
不知道是不是在别的地方还需要配置些什么？

如何设置组件的高度?

html
<echarts-ng2 class="line-chart" [option]="lineChartOption"></echarts-ng2>

scss
.line-chart { flex-basis: 666px; flex-grow: 1; flex-shrink: 1; border-left: 1px solid $BorderColor; echarts-ng2 { height: 280px !important; } canvas { height: 280px !important; } }

这样的设置没有任何效果,请问该如何设置?

flex布局eCharts初始化显示不正常

这是两幅图 用flex布局 一个占50% 当触发resize的时候就会恢复正常 但是初始化加载的时候就会这个样子，这是我的代码：

而且初始化时这里的大小也不一样：

node_modules/echarts-ng2/src/component/echarts-ng2.component.ngfactory.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

执行命令 ng build --prod 时报下面的错误:

node_modules/echarts-ng2/src/component/echarts-ng2.component.ngfactory.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Versions

Angular CLI: 1.6.0
Node: 8.9.1
OS: linux x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.6.0
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

Repro steps.
ng build --prod

package.json
"dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^2.0.0-beta.12",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^2.0.0-beta.12",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "angular2-jwt": "^0.2.3",
    "core-js": "^2.4.1",
    "echarts-ng2": "^1.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  }

tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

tsconfig.app.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.spec.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

网页自适应的问题

echart不能根据网页大小改变大小，我查看了官网的demo是可以的

angular5 报错

Module build failed: Error: /node_modules/echarts-ng2/src/component/echarts-ng2.component.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:653:23)
at plugin.done.then (/Users/petter/Documents/workspace/dianrong/people-ui/node_modules/@ngtools/webpack/src/loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
@ ./node_modules/echarts-ng2/src/index.js 6:9-53
@ ./src/app/routes/customer/customer.module.ts
@ ./src/$$_lazy_route_resource lazy
@ ./node_modules/@angular/core/esm5/core.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

hello, what version of your echart?

如何使用Echarts 全局对象？

我需要 echarts.number.parseDate(params.value[0]); 类似这样的操作

http://echarts.baidu.com/demo.html#calendar-pie 这是网页

TypeError: _this.chart is undefined 报错

html ：<echarts-ng2 [style]="{'width': '100%', 'height': '600px'}" #myEcharts>

ts: @ViewChild('myEcharts') public echarts: ECharts;
ngOnInit() {
this.echarts.setOption(this.option, true);//这里报错
}

option也定义了的 不知道为啥这里报错，只要调用this.echarts的方法都报错

怎么能延时下再渲染echart？

上一层组件是AfterViewInit才确定的尺寸，导致echart无法获取到宽高，怎么能够解决这个问题呢？

how to set chart theme

Use <echarts-ng2 [option]="option" [theme]="'dark'"> ; It's not work.

this.chart为空的问题

我在浏览器的resize事件中加了ng2-echart的resize事件，在浏览器中移动的时候ng2-echart的resize事件有生效，但是确报了Cannot read property 'resize' of null at EchartsNg2Component.resize。 内部的this.chart为null，不知道是什么原因。

cli

我在原先的cli里面npm install 了那两项,再启动就会出现
ERROR in multi script-loader!./src/npm:echarts-ng2/bundles/echarts-ng2.umd.min.js
Module not found: Error: Can't resolve 'F:\test\lite-version\src\npm:echarts-ng2\bundles\echarts-ng2.umd.min.js' in 'F:\test\lite-version'
@ multi script-loader!./src/npm:echarts-ng2/bundles/echarts-ng2.umd.min.js

ERROR in .//jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest' in 'F:\test\lite-version\node_modules\jquery\lib'
@ .//jquery/lib/node-jquery.js 8:28-53
@ ./src/lib.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4321 ./src/main.ts
这样类似的问题...
在没有安装之前是好的

请问支持angular8吗？

请问支持angular8吗？

如何动态的设置theme？

theme修改后无法动态更新。echart3舍弃了setTheme，官方建议是销毁后重建实例，所以建议提供一个reset方法

Map china not exists

我想用echars的地图功能，一直报找不到map china ... 求帮助，望解决！

echarts-ng2中地图的使用问题

麻烦问下，普通的图表已经能正常的使用了，但是在使用map的时候没有地图出现，是需要再引入和地图相关的东西吗？

像上面这样引入之后还是没有出现地图

getDom方法存在bug？

EchartsNg2Component的89行：

  getDom = (): HTMLCanvasElement | HTMLDivElement => {
    return this.getDom();
  }

此处是否应该返回return this.chart.getDom();？
另外，缺少了getDataURL等原生API，Echarts对象的API可能还会扩展，此处可改进。
谢谢！

如果能给pc端提供一个根据容器自适应的开关就好了

ng lint error

In anglular-cli project, the following error will print when excute 'ng lint':
Failed to load /project path/node_modules/echarts-ng2/tslint.json: Could not find custom rule directory: /project path/node_modules/echarts-ng2/node_modules/codelyzer

part of package.json:
"devDependencies": {
"angular/cli": "^1.3.0",
"angular/compiler-cli": "^4.3.0",
"types/jasmine": "2.5.38",
"types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"husky": "^0.14.3",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.3",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}

how to call init, connect methods

how can i call init, connect methods, and also how to set size dynamically

自定义标签问题

你好，在google搜索angular echart的时候刚好看到你写的demo，看到这么简单的demo，很是激动。但是想到了一个问题，就是能不能自定义标签，而不是都必须使用，看了下demo，小弟技术拙劣，不知如何下手。

Cannot read property 'resize' of null or other property

this.chart.resize(opts);

如何使用bmap

使用bmp的时候显示不出来，是要引入百度地图文件吗

how to use dataZoom events of echats ?

设置style属性时，echarts.init()导致无法正常获取this.host.nativeElement的宽度和高度

eg:

<div>
    <echarts-ng2 #echartsNg2 [option]="_option" [style]="{'height':400,'width':500}"></echarts-ng2>
    <div class="title_panel-div">
        ...
    </div>
</div>

此时，echarts-ng2组件无法正常渲染，组件内部输出this.style值正常，但是输出this.host.nativeElement发现宽度和高度值并未绑定上去。
此处建议将echarts.init()方法做出修改：
this.chart = echarts.init(this.host.nativeElement, this.theme, this.style?{}:this.opts);
改成
this.chart = echarts.init(this.host.nativeElement, this.theme, Object.assign({},this.opts,this.style));

Support Angular 13

Hi, could you please upgrade the library to support Angular 13?

如何获得全局 echarts 对象

麻烦问下
该如何获得全局 echarts 对象
谢谢

echart4.0?

showLoading样式无效

showLoading样式无效 ，看了源码是因为调用echarts api的showloading的时候， 没有传入参数。希望更新，谢谢。

请问有饼图吗

Ionic4 是否无法使用？

我创建了Ionic4的一个新工程，似乎图形无法显示。
又创建了一个Ionic3的新工程，图形正常显示了。
Ionic4是无法使用ngx-echarts吗？

use with Angular5

在ng5中使用时，提示以下错误

ERROR in ./node_modules/echarts-ng2/src/component/echarts-ng2.component.ts
Module build failed: Error: F:\Angular\WebNJGIS_frontend\node_modules\echarts-ng2\src\component\echarts-ng2.component.ts is missing from the TypeScript
compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (F:\Angular\WebNJGIS_frontend\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:653:23)
    at plugin.done.then (F:\Angular\WebNJGIS_frontend\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./node_modules/echarts-ng2/src/index.js 6:9-53
 @ ./src/app/business/visualization/visualization.module.ts
 @ ./src/app/business/comparison/comparison.module.ts
 @ ./src/$$_lazy_route_resource lazy
 @ ./node_modules/@angular/core/esm5/core.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

当我按照提示将node_modules中的文件加入到tsconfig中还是不管用

"include": [
        "node_modules/echart-ng2/**/*"
    ]

请问该怎么解决啊？

update to 5.0.0 error found version 4, expected 3

update to 5.0.0后提示版本错误
/node_modules/echarts-ng2/dist/echarts-ng2.d.ts, found version 4, expected 3
version:
"echarts": "3.8.5",
"echarts-ng2": "^5.0.0",
or
"echarts": "^4.0.1",
"echarts-ng2": "^5.0.0",
将echarts-ng2 rollback to "echarts-ng2": "^1.4.1"可正常运行！

初始化优化建议

因为在 echarts.js 的实现里面，使用了 setTimeout ，被 zone.js 包装了的 setTimeout 会频繁触发 docheck 的钩子，如果应用中有组件实现了该生命周期的钩子，将会不断触发，导致性能下降。

可以用 NgZone 提供的 runOutsideAngular 方法优化:

constructor(private zone: NgZone) {}
....
this.zone.runOutsideAngular(() => {
    this.chart = echarts.init(this.host.nativeElement, this.theme, this.style ? {}:this.opts);
 });