Skip to content

Commit

Permalink
[fix] some Rendering bugs of ECharts elements
Browse files Browse the repository at this point in the history 
[add] ECharts example for testing
  • Loading branch information
@TechQuery
TechQuery committed Feb 17, 2024
1 parent 518ebd9 commit 2cb1e5c
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 20 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"dom-renderer": "^2.1.4",
"echarts": "^5.4.3",
"github-web-widget": "^4.0.0-rc.2",
"iterable-observer": "^1.0.1",
"js-base64": "^3.7.6",
"koajax": "^0.9.6",
"lodash.debounce": "^4.0.8",
Expand Down
8 changes: 6 additions & 2 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 26 additions & 9 deletions source/component/ECharts/Chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import { JsxProps } from 'dom-renderer';
import { EChartsOption, ResizeOpts } from 'echarts';
import { ECharts, init } from 'echarts/core';
import { ECBasicOption } from 'echarts/types/dist/shared';
import { Observable } from 'iterable-observer';
import debounce from 'lodash.debounce';
import { CustomElement, parseDOM } from 'web-utility';
import { CustomElement, parseDOM, sleep } from 'web-utility';

import { ProxyElement } from './Proxy';
import {
Expand Down Expand Up @@ -32,6 +33,10 @@ export interface EChartsElementProps

export type EChartsElementState = EChartsElementProps & EChartsOption;

const DefaultOptions: EChartsOption = {
grid: {}
};

export class EChartsElement
extends ProxyElement<EChartsElementState>
implements CustomElement
Expand All @@ -51,15 +56,17 @@ export class EChartsElement
return this.#type;
}

get options() {
return this.#core.getOption();
}

constructor() {
super();

this.attachShadow({ mode: 'open' }).append(
parseDOM('<div style="height: 100%" />')[0]
);
this.addEventListener('optionchange', ({ detail }: CustomEvent) =>
this.setOption(detail)
);
this.#boot();
}

connectedCallback() {
Expand All @@ -71,7 +78,7 @@ export class EChartsElement
disconnectedCallback() {
globalThis.removeEventListener?.('resize', this.handleResize);

this.#core.dispose();
this.#core?.dispose();
}

async #init(type: ChartType) {
Expand All @@ -88,7 +95,7 @@ export class EChartsElement

for (const [event, handler, selector] of this.#eventHandlers)
if (selector) this.onChild(event, selector, handler);
else this.on(event, handler);
else this.listen(event, handler);

this.#eventHandlers.length = 0;

Expand All @@ -97,6 +104,16 @@ export class EChartsElement
this.#eventData.length = 0;
}

async #boot() {
for await (const { detail } of Observable.fromEvent<CustomEvent>(
this,
'optionchange'
)) {
this.setOption(detail);
await sleep(0.5);
}
}

async setOption(data: EChartsOption) {
if (!this.#core) {
this.#eventData.push(data);
Expand All @@ -109,7 +126,7 @@ export class EChartsElement
else if (key in BUILTIN_CHARTS_MAP)
await loadChart(key as ECChartOptionName);

this.#core.setOption(data, false, true);
this.#core.setOption({ ...DefaultOptions, ...data }, false, true);
}

setProperty(key: string, value: any) {
Expand All @@ -118,7 +135,7 @@ export class EChartsElement
this.setOption(this.toJSON());
}

on(event: ZRElementEventName, handler: ZRElementEventHandler) {
listen(event: ZRElementEventName, handler: ZRElementEventHandler) {
if (this.#core) this.#core.getZr().on(event, handler);
else this.#eventHandlers.push([event, handler]);
}
Expand All @@ -132,7 +149,7 @@ export class EChartsElement
else this.#eventHandlers.push([event, handler, selector]);
}

off(event: ZRElementEventName, handler: ZRElementEventHandler) {
forget(event: ZRElementEventName, handler: ZRElementEventHandler) {
if (this.#core) this.#core.getZr().off(event, handler);
else {
const index = this.#eventHandlers.findIndex(
Expand Down
8 changes: 4 additions & 4 deletions source/component/ECharts/Option.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export abstract class ECOptionElement
implements CustomElement
{
get chartTagName() {
return toCamelCase(this.tagName.split('-')[1].toLowerCase());
return toCamelCase(this.tagName.replace(/^ec-/i, '').toLowerCase());
}

get isSeries() {
Expand All @@ -39,7 +39,7 @@ export abstract class ECOptionElement
connectedCallback() {
for (const [key, value] of Object.entries(this.toJSON()))
if (EventKeyPattern.test(key) && typeof value === 'function')
this.on(
this.listen(
key.slice(2) as ZRElementEventName,
value as ZRElementEventHandler
);
Expand All @@ -65,7 +65,7 @@ export abstract class ECOptionElement
);
}

on(event: ZRElementEventName, handler: ZRElementEventHandler) {
listen(event: ZRElementEventName, handler: ZRElementEventHandler) {
if (this.isConnected)
this.closest<EChartsElement>('ec-chart')?.onChild(
event,
Expand All @@ -74,7 +74,7 @@ export abstract class ECOptionElement
);
}

off(event: ZRElementEventName, handler: ZRElementEventHandler) {
forget(event: ZRElementEventName, handler: ZRElementEventHandler) {
if (this.isConnected)
this.closest<EChartsElement>('ec-chart')?.offChild(
event,
Expand Down
8 changes: 4 additions & 4 deletions source/component/ECharts/Proxy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export abstract class ProxyElement<T extends object> extends HTMLElement {
);
}

abstract on(event: string, handler: (event: any) => any): any;
abstract off(event: string, handler: (event: any) => any): any;
abstract listen(event: string, handler: (event: any) => any): any;
abstract forget(event: string, handler: (event: any) => any): any;

setProperty(key: string, value: any) {
const oldValue = this.#data[key],
Expand All @@ -36,15 +36,15 @@ export abstract class ProxyElement<T extends object> extends HTMLElement {
else super.removeAttribute(name);
break;
case 'function':
if (EventKeyPattern.test(key)) this.on(eventName, value);
if (EventKeyPattern.test(key)) this.listen(eventName, value);
break;
default:
if (value != null) super.setAttribute(name, value + '');
else if (
EventKeyPattern.test(key) &&
typeof oldValue === 'function'
)
this.off(eventName, value);
this.forget(eventName, value);
else super.removeAttribute(name);
}
}
Expand Down
27 changes: 27 additions & 0 deletions source/page/Map/component/VirusChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,33 @@ export class VirusChart

return (
<>
<ec-chart className="w-100 h-50" theme="dark">
<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-series
type="bar"
name="sales"
data={[5, 20, 36, 10, 10, 20]}
onClick={console.log}
/>
</ec-chart>

<ec-chart className="w-100 h-50" color={['#c22b49', '#cca42d']}>
<ec-title text="确诊/疑似患者人数" top="5%" x="center" />
<ec-legend
Expand Down
2 changes: 1 addition & 1 deletion source/page/Map/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default class MapsPage extends HTMLElement implements CustomElement {
resolution={resolution}
/>
)}
<VirusChart />
<VirusChart className="vh-100" />
</SpinnerBox>
);
}
Expand Down

1 comment on commit 2cb1e5c

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for wuhan2020 ready!

✅ Preview
https://wuhan2020-n7pse22tv-techquery.vercel.app

Built with commit 2cb1e5c.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.