this.chart.destroy not a function about blog HOT 6 CLOSED

Managed a small hack on echart-components.ts with
ngOnDestroy(): void { window.removeEventListener('resize', this.resizeListener, true); this.chart.resize(); }
Refer to this Stackoverflow Q&A: https://stackoverflow.com/questions/38158318/is-it-possible-to-use-echarts-baidu-with-angular-2-and-typescript

This gets rid of runtime errors - but there are other bugs as well ;)

from blog.

Hi
Looks like there is now an angular directive for echarts 3.x
https://github.com/xieziyu/ngx-echarts

Maybe this is the better way going forward.

from blog.

Thanks.

Your work has been of great value - your blog has been an eye opener.

from blog.

Hey
Took a look at the ngx-echarts - pretty comprehensive - thanks.

Try this if you get the runtime error (from ngx-echarts):
ngOnDestroy() { if (this.myChart) { this.myChart.dispose(); this.myChart = null; } }

It is a more consistent approach than my awkward hack.

from blog.

ngx-echarts provides a wrapper for ECharts - very efficient for Angular Modules, but it feels like it's calling in an extra layer for Ionic to process.
Building out a custom component (like you did in your blog) seems more feasible.
Let me know what you think once you've played around with it.
I'll be posting a repo with ngx-echarts/echarts soon.
Very handy solution, nonetheless.

from blog.

I changed the code of the blog to ngx-echarts. I like it better than my approach.
The only problem is that it does not automatically import the echarts library.
One solution that I use now is copying the directive into my project and add an import statement
import * as echarts from 'echarts/dist/echarts-en.js';

Another solution is creating a custom copy config that copies the echarts library to the www directory and then reference it in the index.html

copy.config.js

module.exports = {
  copyEcharts: {
    src: ['./node_modules/echarts/dist/echarts-en.min.js'],
    dest: '{{WWW}}/build'
  }
}

package.json

   ...
  "config": {
    "ionic_copy": "./copy.config.js"
  },
  ...

from blog.