Apache ECharts tile for usage with Svelte layout engine tilez.
Install tilez-echarts as npm package via
npm install tilez-echarts
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]
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.
<script lang="ts">
// +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
]
)
);
});
</script>
<Tile type="html" width="800px" height="600px">
<EChartsTile {option} />
</Tile>For SVG tiles you can also use EChartsSVGConfig class for theme configuration. It is optional, as SVG tiles use global echarts package (no treeshaking).
<script lang="ts">
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%'
}
]
};
</script>
<Tile type="svg" width="800px" height="600px">
<EChartsTile {option} />
</Tile>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.
Underlying EChartsSVGConfig class can also be used for server side rendering without tilez, see ssr route in example app.