ECharts using Angular

Siemens iX
1

Hello, I am a bachelor student and working with siemens iX as part of the AMOS Project from my university. I am struggling with the charts a lot but I am also not a very experienced developer so maybe this is easy to answer. I have 2 questions:

1. Can I avoid the “import * as echarts from ‘echarts/core’;”?

As described on the iX website I need to pass echarts to the registerTheme(echarts) but jest is complaining about the ‘import *’ and the only way I found to fix it was to instead write “import * as echarts from ‘echarts’” so I always import way too many things eventhough I don’t need them.

2. How can I get the echarts instance to call functions like resize/setOption on it?

The Angular example does not have an echarts.init call to give me an echarts instance as described on the echarts website. But I need it for resizing and dynamic data as described on their website

I want something like

var myChart = echarts.init(document.getElementById('main'));
// so I can now do myChart.xy()

But I could not get it work with Siemens iX.

2

@LukasMaurer @daniel could you guys help out here?

3

Lets try :slight_smile: @IngoSternberg please prepare a stackblitz or a github repo with just the issue you mentioned. After that i can have a look into it without code its hard to tell whats the issue is.

4

Hello everyone,

I understand that it is difficult to help me, because I could not exactly describe the situation I am in. I can’t really provide you with a seperate stackblitz or github repository because that would take a lot of time. The github repository with everything is here but everything there is still work in progress. About the specific questions:

  1. Having the “import * as ‘echarts’;” is not that big of a deal. So if you can’t really help me with that now, it should be fine to just always import everything.

  2. About the functions on the echarts. I think this question is resolved for now. I only read the siemens ix description of echarts and then the documentation on the apache echarts site. I did not realize that I also have to check the documentation about ngx-echarts specifically. There I found ways to do what I want without even getting a specific instance of the chart.

5

So point 2. you have solved by searching the other 3rd party libraries documentation.

Regarding point 1. your snippet import * as ‘echarts’; looks odd. This is the reason i ask for a better code snippet to understand what you are doing there.

A valid import statement is

import * as xyz from "the-lib";

or

import xyz from "the-lib";

or

import { abc } from "the-lib";

so what is you questions regarding ix and echarts. Iam struggle to give you a good answer.

6

I just forgot the last “from ‘echarts/core’” in the answer but in my question it was correct:

“import * as echarts from ‘echarts/core’;” is how it is normally and described in the siemens ix documentation

“import * as echarts from ‘echarts’;” is how I did it to avoid errors

7

Now i got it you are talking about the angular example snippet (running code iX angular app - StackBlitz) in the preview.

You can find a explanation here Import ECharts - Basics - Handbook - Apache ECharts

8

I saw that but in the siemens ix example snippet they have the call

registerTheme(echarts);

and as described in the initial question I don’t know how to do that without importing everything

9

Okay can you tell me what did you do different to the linked example iX angular app - StackBlitz

Because there the echarts/core package is used with registerTheme function and it seems to work.

Sorry without any code that shows the issue is hard to give better support.

10

The problem is not that it does not work. I just asked if there is a way to avoid the import * because I don’t want to always import everything. I think I actually explained it decently in the initial question, but I understand that putting everything into one sentence was confusing:

1. Can I avoid the “import * as echarts from ‘echarts/core’;”?

As described on the iX website I need to pass echarts to the registerTheme(echarts) but jest is complaining about the ‘import *’ and the only way I found to fix it was to instead write “import * as echarts from ‘echarts’” so I always import way too many things eventhough I don’t need them.

More detailed explanation

I would like to avoid having the import * as echarts from 'echarts/core'; When I had it the linting/jest or something complained. To fix this I wrote import * as echarts from 'echarts' so I always import way too many things.

I didn’t ask you to help me fix the linting/jest. I just want to know if there is a way to entirely avoid the import * in general. This would be nice to decrease the bundle size similar to the echarts guide you linked.

Right now I see no way to avoid it because I need to call the registerTheme function with echarts as a parameter so registerTheme(echarts)

I hope this clears up all the confusions. If there is no way to avoid the import * then always importing everything would be fine I guess

11

You cannot avoid this import, because its the way echarts works. The registerTheme function is only available through this import (Documentation - Apache ECharts) which will be used on the ix side ix/packages/echarts/src/register.ts at main · siemens/ix · GitHub

But you dont have to be worring about the import style this should not have any bigger impact on the bundle size.

2 Likes