https://github.com/gsmlg-dev/echarts-el
A html custom element render echarts
https://github.com/gsmlg-dev/echarts-el
echarts lit lit-html
Last synced: 5 months ago
JSON representation
A html custom element render echarts
- Host: GitHub
- URL: https://github.com/gsmlg-dev/echarts-el
- Owner: gsmlg-dev
- Created: 2022-04-24T09:26:40.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T01:28:24.000Z (over 1 year ago)
- Last Synced: 2025-09-12T13:10:28.551Z (9 months ago)
- Topics: echarts, lit, lit-html
- Language: TypeScript
- Homepage: https://gsmlg-dev.github.io/echarts-el/
- Size: 1.77 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Echarts EL
[](https://github.com/gsmlg-dev/echarts-el/actions/workflows/nodejs-lit-validate-and-release.yml)
[](https://gsmlg-dev.github.io/echarts-el)
# Feature
- Auto fit parent element, so your do not need to resize it.
- Rerender if data changed.
# Install
```bash
npm install echarts-el
```
Or import in the fly.
```html
import "https://unpkg.com/echarts-el@1.1.0/es/chart.js";
---
import "https://cdn.jsdelivr.net/npm/echarts-el@1.1.0/es/chart.js";
```
# Use Case
This element will fit parent element and auto resize when parent element size change.
```html
{
tooltip: {
show: true,
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0,
},
xAxis: [
{
min: 0,
scale: true,
type: 'value',
},
],
yAxis: [
{
type: 'category',
show: false,
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06'],
},
],
series: [
{
type: 'bar',
data: [2123, 3354, 4012, 2175, 5800, 2630],
},
],
}
```
Render chart:
# Attrinutes
- `loading`: Show Loading chart
- `renderer`: Use echarts `svg` or `canvas` renderer
- `textContent`: EChart options, JSON string.
# Properties
- `resetChart`: Method to reset chart render
- `chart`: Echart instance
- `options`: Chart render options, readonly.
# TODO
- Add map register element.