Non JSX Usage?

[abdulhakim-alshanqiti]

I would love to use this web component without jsx

like for example importing it like a web component in a webpage like this

  <ec-svg-renderer theme="dark" style=" width: '100%'; height: '75vh' ">
        <ec-title text="ECharts Getting Started Example" />

        <ec-legend data="'sales'" />

        <ec-tooltip />

        <ec-x-axis
            data="
                'Shirts',
                'Cardigans',
                'Chiffons',
                'Pants',
                'Heels',
                'Socks'
            "
        />
        <ec-y-axis />

        <ec-bar-chart
            name="sales"
            data="5, 20, 36, 10, 10, 20"
            onClick={console.log}
        />
    </ec-svg-renderer>

[TechQuery]

Sorry for late reply.

I found some compatibility issues with ECharts core in plain HTML (such as handwrite files, SSG or SSR), but everything is okay in CSR pages:

1. [add] some ECharts Web components code kaiyuanshe/2023-China-Open-Source-Report#26
2. add echarts kaiyuanshe/2023-China-Open-Source-Report#27

So I think, these may be related with different timing between two modes.

I talked about these issues with ECharts core developers (@Ovilia, etc.) few months ago, they were not familiar with Web components, and didn't know what happened at that time.

I will do more research in my part time, and waiting for some experts to resolve the bug.

[abdulhakim-alshanqiti]

Sorry for late reply.

I found some compatibility issues with ECharts core in plain HTML (such as handwrite files, SSG or SSR), but everything is okay in CSR pages:

1. [add] some ECharts Web components code kaiyuanshe/2023-China-Open-Source-Report#26
2. add echarts kaiyuanshe/2023-China-Open-Source-Report#27

So I think, these may be related with different timing between two modes.

I talked about these issues with ECharts core developers (@Ovilia, etc.) few months ago, they were not familiar with Web components, and didn't know what happened at that time.

I will do more research in my part time, and waiting for some experts to resolve the bug.

i was able to use a web component someone made for echarts it lets you set a json inside the web component and it will use that as the config

[TechQuery]

i was able to use a web component someone made for echarts it lets you set a json inside the web component and it will use that as the config

The first generation ECharts wrappers look like what you say, they pass in the whole big JSON option into wrapper components, for popular examples:

• Vue: https://github.com/ecomfe/vue-echarts
• React: https://github.com/hustcc/echarts-for-react

But what's the different between those simple wrappers & the official package? The initialization code isn't a big issue for application developers, the real troubles are:

• the manual importing: https://vue-echarts.dev/#codegen
• the big JSON option: https://echarts.apache.org/en/option.html
• the splitted Event API: https://echarts.apache.org/handbook/en/concepts/event

So the second generation ECharts wrappers aim to make ECharts code as simple as other popular component libraries, provide declarative Component Tag API & Option Attribute API:

• React: https://github.com/idea2app/ECharts-JSX/tree/master
• Vue: https://github.com/lloydzhou/vuecharts

But to wrap for every component framework is hard work for the community, so we should wrap a common Web component for all kinds of framework: https://github.com/idea2app/ECharts-JSX