You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by Endrit Gojani <en...@kodelabs.com.INVALID> on 2021/04/30 08:52:59 UTC
Using Echarts on mobile application - iOS
Hello,
I wanted to ask you about an issue I am having of using Echarts on mobile.
I am a Flutter developer and I need your help to solve a problem with chart
that is occurring. Our app is huge and is used by big companies.
Before Echarts, I have used Flutter charts and one month ago I decided to
migrate to Echarts with one of the libraries (
https://pub.dev/packages/flutter_echarts) that the Flutter community
provide to us. But we are having a problem that this library uses Flutter
WebView and on iOS devices after loading 2 or more charts, for an unknown
reason that we do not know, the cache of the phone memory is fulled and
application is crushing. This issue is in the communication between Flutter
WebView and iOS and is open for a long time. Now I have decided to make
this native.
1. *Can you provide me any example how to use Echarts in iOS to have as
little memory consumption. *
2. *What is the best way to implement it in iOS because in our
application we have a lot of charts.*
*Please if you can send me or show me any exact example for Echarts to work
properly on iOS.*
Thank you. Regards
--
Endrit Gojani
KODE Labs
m: +383 49 811 152
w: kodelabs.com e: endrit@kodelabs.com
Re: Using Echarts on mobile application - iOS
Posted by Endrit Gojani <en...@kodelabs.com.INVALID>.
Thank you so much.
On Thu, May 6, 2021, 9:55 AM Ovilia <ov...@gmail.com> wrote:
> Hope this helps:
>
> https://github.com/Ovilia/echarts-with-ionics/blob/master/src/pages/home/home.ts
>
> It's an old repo but the basic idea was the same.
>
> Thanks
>
> *Ovilia*
>
>
> On Tue, May 4, 2021 at 9:14 PM Endrit Gojani <en...@kodelabs.com> wrote:
>
>> I understand all this process, but how to request how to load a chart in
>> webview if I configure options for that chart on iOS. I can not understand
>> this part. For this I am asking for help, or any specific example in iOS.
>>
>> Thanks for your help.
>>
>> On Fri, Apr 30, 2021 at 3:41 PM Ovilia <ov...@gmail.com> wrote:
>>
>>> There is no extra requirement using Apache ECharts on iOS.
>>>
>>> I'm using ionic so it's slightly different from flutter but the idea is
>>> the same.
>>>
>>> In HTML:
>>> <div #chartContainer class="chart-container"></div>
>>>
>>>
>>> import * as echarts from 'echarts';
>>>
>>> @ViewChild('chartContainer', {read: ElementRef}) protected _containerEl:
>>> ElementRef;
>>>
>>> ngOnInit() {
>>> // whatever your logic here, you need to make sure el and its width
>>> and height should not be undefined
>>> const el = this._containerEl.nativeElement;
>>> this.width = el.clientWidth;
>>> this.height = el.clientHeight;
>>>
>>> if (this.chart) {
>>> this.chart.dispose();
>>> }
>>>
>>> this.chart = echarts.init(el, null, {
>>> width: this.width,
>>> height: this.height
>>> });
>>>
>>> this.chart.setOption(...);
>>> }
>>>
>>>
>>>
>>> Thanks
>>>
>>> *Ovilia*
>>>
>>>
>>> On Fri, Apr 30, 2021 at 9:21 PM Endrit Gojani <en...@kodelabs.com>
>>> wrote:
>>>
>>>> Please can you send me any example how to use Echarts on iOS, that you
>>>> know works well. Or do you have any documentation how to implement Echarts
>>>> on iOS?
>>>>
>>>> Thank you very much.
>>>>
>>>> On Fri, Apr 30, 2021, 3:10 PM Ovilia <ov...@gmail.com> wrote:
>>>>
>>>>> Hi Endrit,
>>>>>
>>>>> I have used Apache ECharts with ionic (both UIWebView and WKWebView)
>>>>> but found no memory problems.
>>>>>
>>>>> I would suggest you not using flutter_echarts but use ECharts by itself
>>>>> so that it can help you debug if it's the problem of ECharts
>>>>> or flutter_echarts.
>>>>>
>>>>> A few tips that may help:
>>>>> Call "chart.dispose()" when the page destroys. For example, I'm using
>>>>> Angular
>>>>> so it looks like:
>>>>> ngOnDestroy() {
>>>>> if (this.chart) {
>>>>> this.chart.dispose();
>>>>> this.chart = null;
>>>>> }
>>>>> }
>>>>> You should do something similar with flutter.
>>>>>
>>>>> Thanks
>>>>>
>>>>> *Ovilia*
>>>>>
>>>>>
>>>>> On Fri, Apr 30, 2021 at 6:45 PM Endrit Gojani
>>>>> <en...@kodelabs.com.invalid> wrote:
>>>>>
>>>>>> Hello,
>>>>>>
>>>>>> I wanted to ask you about an issue I am having of using Echarts on
>>>>>> mobile.
>>>>>> I am a Flutter developer and I need your help to solve a problem with
>>>>>> chart
>>>>>> that is occurring. Our app is huge and is used by big companies.
>>>>>>
>>>>>> Before Echarts, I have used Flutter charts and one month ago I
>>>>>> decided to
>>>>>> migrate to Echarts with one of the libraries (
>>>>>> https://pub.dev/packages/flutter_echarts) that the Flutter community
>>>>>> provide to us. But we are having a problem that this library uses
>>>>>> Flutter
>>>>>> WebView and on iOS devices after loading 2 or more charts, for an
>>>>>> unknown
>>>>>> reason that we do not know, the cache of the phone memory is fulled
>>>>>> and
>>>>>> application is crushing. This issue is in the communication between
>>>>>> Flutter
>>>>>> WebView and iOS and is open for a long time. Now I have decided to
>>>>>> make
>>>>>> this native.
>>>>>>
>>>>>>
>>>>>> 1. *Can you provide me any example how to use Echarts in iOS to
>>>>>> have as
>>>>>> little memory consumption. *
>>>>>> 2. *What is the best way to implement it in iOS because in our
>>>>>> application we have a lot of charts.*
>>>>>>
>>>>>>
>>>>>>
>>>>>> *Please if you can send me or show me any exact example for Echarts
>>>>>> to work
>>>>>> properly on iOS.*
>>>>>>
>>>>>> Thank you. Regards
>>>>>>
>>>>>> --
>>>>>>
>>>>>> Endrit Gojani
>>>>>>
>>>>>> KODE Labs
>>>>>>
>>>>>> m: +383 49 811 152
>>>>>>
>>>>>> w: kodelabs.com e: endrit@kodelabs.com
>>>>>>
>>>>>
>>
>> --
>>
>> Endrit Gojani
>>
>> KODE Labs
>>
>> m: +383 49 811 152
>>
>> w: kodelabs.com e: endrit@kodelabs.com
>>
>>
Re: Using Echarts on mobile application - iOS
Posted by Ovilia <ov...@gmail.com>.
Hope this helps:
https://github.com/Ovilia/echarts-with-ionics/blob/master/src/pages/home/home.ts
It's an old repo but the basic idea was the same.
Thanks
*Ovilia*
On Tue, May 4, 2021 at 9:14 PM Endrit Gojani <en...@kodelabs.com> wrote:
> I understand all this process, but how to request how to load a chart in
> webview if I configure options for that chart on iOS. I can not understand
> this part. For this I am asking for help, or any specific example in iOS.
>
> Thanks for your help.
>
> On Fri, Apr 30, 2021 at 3:41 PM Ovilia <ov...@gmail.com> wrote:
>
>> There is no extra requirement using Apache ECharts on iOS.
>>
>> I'm using ionic so it's slightly different from flutter but the idea is
>> the same.
>>
>> In HTML:
>> <div #chartContainer class="chart-container"></div>
>>
>>
>> import * as echarts from 'echarts';
>>
>> @ViewChild('chartContainer', {read: ElementRef}) protected _containerEl:
>> ElementRef;
>>
>> ngOnInit() {
>> // whatever your logic here, you need to make sure el and its width and
>> height should not be undefined
>> const el = this._containerEl.nativeElement;
>> this.width = el.clientWidth;
>> this.height = el.clientHeight;
>>
>> if (this.chart) {
>> this.chart.dispose();
>> }
>>
>> this.chart = echarts.init(el, null, {
>> width: this.width,
>> height: this.height
>> });
>>
>> this.chart.setOption(...);
>> }
>>
>>
>>
>> Thanks
>>
>> *Ovilia*
>>
>>
>> On Fri, Apr 30, 2021 at 9:21 PM Endrit Gojani <en...@kodelabs.com>
>> wrote:
>>
>>> Please can you send me any example how to use Echarts on iOS, that you
>>> know works well. Or do you have any documentation how to implement Echarts
>>> on iOS?
>>>
>>> Thank you very much.
>>>
>>> On Fri, Apr 30, 2021, 3:10 PM Ovilia <ov...@gmail.com> wrote:
>>>
>>>> Hi Endrit,
>>>>
>>>> I have used Apache ECharts with ionic (both UIWebView and WKWebView)
>>>> but found no memory problems.
>>>>
>>>> I would suggest you not using flutter_echarts but use ECharts by itself
>>>> so that it can help you debug if it's the problem of ECharts
>>>> or flutter_echarts.
>>>>
>>>> A few tips that may help:
>>>> Call "chart.dispose()" when the page destroys. For example, I'm using
>>>> Angular
>>>> so it looks like:
>>>> ngOnDestroy() {
>>>> if (this.chart) {
>>>> this.chart.dispose();
>>>> this.chart = null;
>>>> }
>>>> }
>>>> You should do something similar with flutter.
>>>>
>>>> Thanks
>>>>
>>>> *Ovilia*
>>>>
>>>>
>>>> On Fri, Apr 30, 2021 at 6:45 PM Endrit Gojani
>>>> <en...@kodelabs.com.invalid> wrote:
>>>>
>>>>> Hello,
>>>>>
>>>>> I wanted to ask you about an issue I am having of using Echarts on
>>>>> mobile.
>>>>> I am a Flutter developer and I need your help to solve a problem with
>>>>> chart
>>>>> that is occurring. Our app is huge and is used by big companies.
>>>>>
>>>>> Before Echarts, I have used Flutter charts and one month ago I decided
>>>>> to
>>>>> migrate to Echarts with one of the libraries (
>>>>> https://pub.dev/packages/flutter_echarts) that the Flutter community
>>>>> provide to us. But we are having a problem that this library uses
>>>>> Flutter
>>>>> WebView and on iOS devices after loading 2 or more charts, for an
>>>>> unknown
>>>>> reason that we do not know, the cache of the phone memory is fulled and
>>>>> application is crushing. This issue is in the communication between
>>>>> Flutter
>>>>> WebView and iOS and is open for a long time. Now I have decided to make
>>>>> this native.
>>>>>
>>>>>
>>>>> 1. *Can you provide me any example how to use Echarts in iOS to
>>>>> have as
>>>>> little memory consumption. *
>>>>> 2. *What is the best way to implement it in iOS because in our
>>>>> application we have a lot of charts.*
>>>>>
>>>>>
>>>>>
>>>>> *Please if you can send me or show me any exact example for Echarts to
>>>>> work
>>>>> properly on iOS.*
>>>>>
>>>>> Thank you. Regards
>>>>>
>>>>> --
>>>>>
>>>>> Endrit Gojani
>>>>>
>>>>> KODE Labs
>>>>>
>>>>> m: +383 49 811 152
>>>>>
>>>>> w: kodelabs.com e: endrit@kodelabs.com
>>>>>
>>>>
>
> --
>
> Endrit Gojani
>
> KODE Labs
>
> m: +383 49 811 152
>
> w: kodelabs.com e: endrit@kodelabs.com
>
>
Re: Using Echarts on mobile application - iOS
Posted by Ovilia <ov...@gmail.com>.
There is no extra requirement using Apache ECharts on iOS.
I'm using ionic so it's slightly different from flutter but the idea is the
same.
In HTML:
<div #chartContainer class="chart-container"></div>
import * as echarts from 'echarts';
@ViewChild('chartContainer', {read: ElementRef}) protected _containerEl:
ElementRef;
ngOnInit() {
// whatever your logic here, you need to make sure el and its width and
height should not be undefined
const el = this._containerEl.nativeElement;
this.width = el.clientWidth;
this.height = el.clientHeight;
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(el, null, {
width: this.width,
height: this.height
});
this.chart.setOption(...);
}
Thanks
*Ovilia*
On Fri, Apr 30, 2021 at 9:21 PM Endrit Gojani <en...@kodelabs.com> wrote:
> Please can you send me any example how to use Echarts on iOS, that you
> know works well. Or do you have any documentation how to implement Echarts
> on iOS?
>
> Thank you very much.
>
> On Fri, Apr 30, 2021, 3:10 PM Ovilia <ov...@gmail.com> wrote:
>
>> Hi Endrit,
>>
>> I have used Apache ECharts with ionic (both UIWebView and WKWebView)
>> but found no memory problems.
>>
>> I would suggest you not using flutter_echarts but use ECharts by itself
>> so that it can help you debug if it's the problem of ECharts
>> or flutter_echarts.
>>
>> A few tips that may help:
>> Call "chart.dispose()" when the page destroys. For example, I'm using
>> Angular
>> so it looks like:
>> ngOnDestroy() {
>> if (this.chart) {
>> this.chart.dispose();
>> this.chart = null;
>> }
>> }
>> You should do something similar with flutter.
>>
>> Thanks
>>
>> *Ovilia*
>>
>>
>> On Fri, Apr 30, 2021 at 6:45 PM Endrit Gojani <en...@kodelabs.com.invalid>
>> wrote:
>>
>>> Hello,
>>>
>>> I wanted to ask you about an issue I am having of using Echarts on
>>> mobile.
>>> I am a Flutter developer and I need your help to solve a problem with
>>> chart
>>> that is occurring. Our app is huge and is used by big companies.
>>>
>>> Before Echarts, I have used Flutter charts and one month ago I decided to
>>> migrate to Echarts with one of the libraries (
>>> https://pub.dev/packages/flutter_echarts) that the Flutter community
>>> provide to us. But we are having a problem that this library uses Flutter
>>> WebView and on iOS devices after loading 2 or more charts, for an unknown
>>> reason that we do not know, the cache of the phone memory is fulled and
>>> application is crushing. This issue is in the communication between
>>> Flutter
>>> WebView and iOS and is open for a long time. Now I have decided to make
>>> this native.
>>>
>>>
>>> 1. *Can you provide me any example how to use Echarts in iOS to have
>>> as
>>> little memory consumption. *
>>> 2. *What is the best way to implement it in iOS because in our
>>> application we have a lot of charts.*
>>>
>>>
>>>
>>> *Please if you can send me or show me any exact example for Echarts to
>>> work
>>> properly on iOS.*
>>>
>>> Thank you. Regards
>>>
>>> --
>>>
>>> Endrit Gojani
>>>
>>> KODE Labs
>>>
>>> m: +383 49 811 152
>>>
>>> w: kodelabs.com e: endrit@kodelabs.com
>>>
>>
Re: Using Echarts on mobile application - iOS
Posted by Ovilia <ov...@gmail.com>.
Hi Endrit,
I have used Apache ECharts with ionic (both UIWebView and WKWebView)
but found no memory problems.
I would suggest you not using flutter_echarts but use ECharts by itself
so that it can help you debug if it's the problem of ECharts
or flutter_echarts.
A few tips that may help:
Call "chart.dispose()" when the page destroys. For example, I'm using
Angular
so it looks like:
ngOnDestroy() {
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
}
You should do something similar with flutter.
Thanks
*Ovilia*
On Fri, Apr 30, 2021 at 6:45 PM Endrit Gojani <en...@kodelabs.com.invalid>
wrote:
> Hello,
>
> I wanted to ask you about an issue I am having of using Echarts on mobile.
> I am a Flutter developer and I need your help to solve a problem with chart
> that is occurring. Our app is huge and is used by big companies.
>
> Before Echarts, I have used Flutter charts and one month ago I decided to
> migrate to Echarts with one of the libraries (
> https://pub.dev/packages/flutter_echarts) that the Flutter community
> provide to us. But we are having a problem that this library uses Flutter
> WebView and on iOS devices after loading 2 or more charts, for an unknown
> reason that we do not know, the cache of the phone memory is fulled and
> application is crushing. This issue is in the communication between Flutter
> WebView and iOS and is open for a long time. Now I have decided to make
> this native.
>
>
> 1. *Can you provide me any example how to use Echarts in iOS to have as
> little memory consumption. *
> 2. *What is the best way to implement it in iOS because in our
> application we have a lot of charts.*
>
>
>
> *Please if you can send me or show me any exact example for Echarts to work
> properly on iOS.*
>
> Thank you. Regards
>
> --
>
> Endrit Gojani
>
> KODE Labs
>
> m: +383 49 811 152
>
> w: kodelabs.com e: endrit@kodelabs.com
>