{"id":31931105,"url":"https://github.com/spren9er/tilez-echarts","last_synced_at":"2025-10-14T04:17:36.374Z","repository":{"id":135885386,"uuid":"612299581","full_name":"spren9er/tilez-echarts","owner":"spren9er","description":"Apache ECharts component for Svelte layout engine 'tilez'","archived":false,"fork":false,"pushed_at":"2024-10-24T20:03:31.000Z","size":200,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-17T10:02:20.040Z","etag":null,"topics":["apache-echarts","svelte","tilez"],"latest_commit_sha":null,"homepage":"https://tilez.spren9er.de","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spren9er.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-03-10T16:22:37.000Z","updated_at":"2025-01-17T03:02:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"3b1f639a-3d61-4797-ae85-14b900792dae","html_url":"https://github.com/spren9er/tilez-echarts","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/spren9er/tilez-echarts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spren9er%2Ftilez-echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spren9er%2Ftilez-echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spren9er%2Ftilez-echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spren9er%2Ftilez-echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spren9er","download_url":"https://codeload.github.com/spren9er/tilez-echarts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spren9er%2Ftilez-echarts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017981,"owners_count":26086213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apache-echarts","svelte","tilez"],"created_at":"2025-10-14T04:17:19.958Z","updated_at":"2025-10-14T04:17:36.369Z","avatar_url":"https://github.com/spren9er.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Tilez-Logo](https://github.com/spren9er/tilez/blob/main/docs/images/tilez_logo.svg?raw=true) tilez - apache echarts\n\n_Apache ECharts_ tile for usage with Svelte layout engine [**_tilez_**](https://github.com/spren9er/tilez).\n\n## Installation\n\nInstall **_tilez-echarts_** as npm package via\n\n```\nnpm install tilez-echarts\n```\n\n## Usage\n\nYou can use _Apache ECharts_ tile for tile types `'html'` and `'svg'`. Component **EChartsTile** has following props:\n\n- **_options_** _Apache ECharts_ configuration\n- **_data_** JSON | _Apache Arrow_ table | Array of JSON or _Apache Arrow_ tables [optional]\n\n### HTML Tiles\n\nFor 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.\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  // +page.svelte\n  import { onMount, setContext } from 'svelte';\n  import { type Writable, writable } from 'svelte/store';\n\n  import { Tile } from 'tilez';\n  import { type ThemeOption, EChartsHTMLConfig, EChartsTile } from 'tilez-echarts';\n\n  import type { EChartsOption } from 'echarts';\n  import { GridComponent, TooltipComponent} from 'echarts/components';\n  import { BarChart } from 'echarts/charts';\n\n  // fetch `theme` in `+page.server.ts`\n  export let data: {theme: ThemeOption};\n\n  const option: EChartsOption = {\n    xAxis: {\n      type: 'category',\n      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],\n      axisTick: {\n        alignWithLabel: true\n      },\n    },\n    yAxis: {\n      type: 'value'\n    },\n    series: [\n      {\n        data: [28, 55, 43, 91, 81, 53, 19, 87, 52],\n        type: 'bar',\n        barWidth: '80%'\n      },\n    ],\n    tooltip: {\n      trigger: 'axis',\n      axisPointer: {\n        type: 'shadow'\n      }\n    }\n  };\n\n  // set up theme and minimal set of components, so that they can be shared across all ECharts tiles\n  const echarts: Writable\u003cEChartsHTMLConfig | null\u003e = writable(null);\n  setContext('echarts', echarts);\n\n  onMount(() =\u003e {\n    echarts.set(\n      new EChartsHTMLConfig(\n        data.theme,\n        { renderer: 'canvas' },\n        [\n          BarChart,\n          GridComponent,\n          TooltipComponent\n        ]\n      )\n    );\n  });\n\u003c/script\u003e\n\n\u003cTile type=\"html\" width=\"800px\" height=\"600px\"\u003e\n  \u003cEChartsTile {option} /\u003e\n\u003c/Tile\u003e\n```\n\n### SVG Tiles\n\nFor SVG tiles you can also use **EChartsSVGConfig** class for theme configuration. It is optional, as SVG tiles use global `echarts` package (no treeshaking).\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { Tile } from 'tilez';\n  import { EChartsTile } from 'tilez-echarts';\n\n  import type { EChartsOption } from 'echarts';\n\n  const option: EChartsOption = {\n    xAxis: {\n      type: 'category',\n      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],\n      axisTick: {\n        alignWithLabel: true\n      }\n    },\n    yAxis: {\n      type: 'value'\n    },\n    series: [\n      {\n        data: [28, 55, 43, 91, 81, 53, 19, 87, 52],\n        type: 'bar',\n        barWidth: '80%'\n      }\n    ]\n  };\n\u003c/script\u003e\n\n\u003cTile type=\"svg\" width=\"800px\" height=\"600px\"\u003e\n  \u003cEChartsTile {option} /\u003e\n\u003c/Tile\u003e\n```\n\n## Support of Arrow Datasets\n\nBy default, you add inline data to `option` of **EChartsTile**.\nHowever, you can also pass JSON or Apache Arrow table(s) to **EChartsTile** via `data` props.\nArrow table(s) will be converted to ECharts dataset(s), which will be added to `option` automatically.\nSee `arrow` route for an example.\n\n## SSR\n\nUnderlying **EChartsSVGConfig** class can also be used for server side rendering without **_tilez_**, see `ssr` route in example app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspren9er%2Ftilez-echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspren9er%2Ftilez-echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspren9er%2Ftilez-echarts/lists"}