tilez - apache echarts

Apache ECharts tile for usage with Svelte layout engine 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.

<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>

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).

<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>

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.