https://github.com/spren9er/tilez-echarts
Apache ECharts component for Svelte layout engine 'tilez'
https://github.com/spren9er/tilez-echarts
apache-echarts svelte tilez
Last synced: 9 months ago
JSON representation
Apache ECharts component for Svelte layout engine 'tilez'
- Host: GitHub
- URL: https://github.com/spren9er/tilez-echarts
- Owner: spren9er
- License: mit
- Created: 2023-03-10T16:22:37.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T20:03:31.000Z (over 1 year ago)
- Last Synced: 2025-09-17T10:02:20.040Z (9 months ago)
- Topics: apache-echarts, svelte, tilez
- Language: Svelte
- Homepage: https://tilez.spren9er.de
- Size: 195 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#  tilez - apache echarts
_Apache ECharts_ tile for usage with Svelte layout engine [**_tilez_**](https://github.com/spren9er/tilez).
## Installation
Install **_tilez-echarts_** as npm package via
```
npm install tilez-echarts
```
## Usage
You can use _Apache ECharts_ tile for tile types `'html'` and `'svg'`. Component **EChartsTile** has following props:
- **_options_** _Apache ECharts_ configuration
- **_data_** JSON | _Apache Arrow_ table | Array of JSON or _Apache Arrow_ tables [optional]
### HTML Tiles
For HTML tiles, there is a context necessary which specifies which components of _ECharts_ should be used (treeshaking support). Also, you can set up an _ECharts_ theme there.
```html
// +page.svelte
import { onMount, setContext } from 'svelte';
import { type Writable, writable } from 'svelte/store';
import { Tile } from 'tilez';
import { type ThemeOption, EChartsHTMLConfig, EChartsTile } from 'tilez-echarts';
import type { EChartsOption } from 'echarts';
import { GridComponent, TooltipComponent} from 'echarts/components';
import { BarChart } from 'echarts/charts';
// fetch `theme` in `+page.server.ts`
export let data: {theme: ThemeOption};
const option: EChartsOption = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
axisTick: {
alignWithLabel: true
},
},
yAxis: {
type: 'value'
},
series: [
{
data: [28, 55, 43, 91, 81, 53, 19, 87, 52],
type: 'bar',
barWidth: '80%'
},
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
}
};
// set up theme and minimal set of components, so that they can be shared across all ECharts tiles
const echarts: Writable<EChartsHTMLConfig | null> = writable(null);
setContext('echarts', echarts);
onMount(() => {
echarts.set(
new EChartsHTMLConfig(
data.theme,
{ renderer: 'canvas' },
[
BarChart,
GridComponent,
TooltipComponent
]
)
);
});
```
### SVG Tiles
For SVG tiles you can also use **EChartsSVGConfig** class for theme configuration. It is optional, as SVG tiles use global `echarts` package (no treeshaking).
```html
import { Tile } from 'tilez';
import { EChartsTile } from 'tilez-echarts';
import type { EChartsOption } from 'echarts';
const option: EChartsOption = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
data: [28, 55, 43, 91, 81, 53, 19, 87, 52],
type: 'bar',
barWidth: '80%'
}
]
};
```
## Support of Arrow Datasets
By default, you add inline data to `option` of **EChartsTile**.
However, you can also pass JSON or Apache Arrow table(s) to **EChartsTile** via `data` props.
Arrow table(s) will be converted to ECharts dataset(s), which will be added to `option` automatically.
See `arrow` route for an example.
## SSR
Underlying **EChartsSVGConfig** class can also be used for server side rendering without **_tilez_**, see `ssr` route in example app.