Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alxnddr/echarts-solid
SolidJS components for ECharts
https://github.com/alxnddr/echarts-solid
charting-library charts echarts solidjs visualizations
Last synced: 3 days ago
JSON representation
SolidJS components for ECharts
- Host: GitHub
- URL: https://github.com/alxnddr/echarts-solid
- Owner: alxnddr
- License: mit
- Created: 2023-10-22T02:08:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-01T20:57:26.000Z (4 months ago)
- Last Synced: 2024-12-13T20:51:27.269Z (16 days ago)
- Topics: charting-library, charts, echarts, solidjs, visualizations
- Language: TypeScript
- Homepage:
- Size: 77.1 KB
- Stars: 37
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# echarts-solid
[](https://pnpm.io/)
`echarts-solid` is a library that provides components for integrating ECharts with SolidJS apps. It includes two main components: `ECharts` and `EChartsAutoSize`, both designed to make it easier to work with ECharts in Solid-based projects.
## Quick start
Install it:
```bash
npm i echarts-solid echarts
# or
yarn add echarts-solid echarts
# or
pnpm add echarts-solid echarts
```
Use it:
```tsx
import { ECharts } from 'echarts-solid'
function MyChartComponent() {
const options = {
// ... your ECharts option here
};
return (
);
}
```
For responsive charts, use the `EChartsAutoSize` component:
```tsx
import { EChartsAutoSize } from 'echarts-solid'
function MyResponsiveChartComponent() {
const options = {
// ... your ECharts option here
};
return (
);
}
```
## Components
### ECharts
`ECharts` is a component that renders an ECharts chart with specified options and styles.
#### Props
- `option`: ECharts `option` object with data and configuration.
- `width`, `height`: The dimensions of the chart.
- `initOptions`: Optional parameters for the ECharts instance initialization.
- `notMerge`: Whether not to merge with previous `option`.
- `lazyUpdate`: Whether to update chart immediately.
- `isLoading`: Displays a loading animation when the chart is being prepared or data is being fetched.
- `loadingOptions`: The options for the loading animation.
- `resizeOptions`: Options to pass to ECharts' resize method.
- `theme`: Theme to be applied to the chart instance.
- `eventHandlers`: An object to attach event handlers to the chart instance.
- `onInit`: Callback function that is invoked with the chart instance when it is initialized.
- `class`, `style`: Standard HTML attributes for styling.
- `ref`: Ref of the div element that is used for the chart.
### EChartsAutoSize
`EChartsAutoSize` is similar to `ECharts` but automatically adjusts its size based on its container's size.
#### Props
It has all the same props as ECharts, except for width and height because it adjusts to the chart element's size.
## Events
You can attach event handlers to different chart events by passing an `eventHandlers` object. Each key is the event name, and the value can be the handler function or an object with `query` for filtering and `handler` for the function itself.
```tsx
const eventHandlers = {
'click': (event: ECElementEvent) => {
console.log('Chart is clicked!', event);
}
};
```
## Loading State
You can control the display of a loading animation by using the `isLoading` and `loadingOptions` props:
```tsx
```
## Contributing
Contributions to the `echarts-solid` library are encouraged and appreciated.
## License
`echarts-solid` is [MIT licensed](./LICENSE).