https://github.com/bherbruck/svelte-echarts

Apache ECharts wrapper for Svelte
https://github.com/bherbruck/svelte-echarts

svelte

Last synced: about 1 month ago
JSON representation

Apache ECharts wrapper for Svelte

• Host: GitHub
• URL: https://github.com/bherbruck/svelte-echarts
• Owner: bherbruck
• License: mit
• Created: 2021-11-23T22:14:24.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-21T16:51:08.000Z (7 months ago)
• Last Synced: 2024-05-21T22:28:03.442Z (7 months ago)
• Topics: svelte
• Language: Svelte
• Homepage: https://bherbruck.github.io/svelte-echarts/
• Size: 458 KB
• Stars: 52
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-echarts - svelte-echarts - A simple ECharts component for Svelte! (Frameworks / Svelte Component)

README

        
# svelte-echarts

A simple [Apache ECharts](https://echarts.apache.org/) component for [Svelte](https://svelte.dev/)! Check out this [demo](https://bherbruck.github.io/svelte-echarts/).

## 💿 Installation

```bash

npm i -D svelte-echarts echarts

```

## ⌨️ Usage [demo](https://bherbruck.github.io/svelte-echarts/)

```html

  import { Chart } from 'svelte-echarts'

  import { init, use } from 'echarts/core'

  import { BarChart } from 'echarts/charts'

  import { GridComponent, TitleComponent } from 'echarts/components'

  import { CanvasRenderer } from 'echarts/renderers'

  // now with tree-shaking

  use([BarChart, GridComponent, CanvasRenderer, TitleComponent])

  let options = {

    title: {

      text: 'ECharts Example',

    },

    xAxis: {

      type: 'category',

      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    },

    yAxis: {

      type: 'value',

    },

    series: [

      {

        type: 'bar',

        data: [120, 200, 150, 80, 70, 110, 130],

      },

    ],

  }



  



  .app {

    width: 100vw;

    height: 100vh;

  }

```