Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/opentiny/tiny-charts
OpenTiny HUICharts 是一套功能强大的前端可视化图表库，为Web开发者提供了40多个图表组件，支持主题定制、响应式和无障碍等丰富的能力，且完全兼容 ECharts 的 API。
https://github.com/opentiny/tiny-charts
charting-library charts data-visualization echarts frontend opentiny tiny-charts visualization
Last synced: 4 days ago
JSON representation
OpenTiny HUICharts 是一套功能强大的前端可视化图表库，为Web开发者提供了40多个图表组件，支持主题定制、响应式和无障碍等丰富的能力，且完全兼容 ECharts 的 API。
- Host: GitHub
- URL: https://github.com/opentiny/tiny-charts
- Owner: opentiny
- License: mit
- Created: 2024-04-29T09:04:44.000Z (8 months ago)
- Default Branch: dev
- Last Pushed: 2024-12-11T11:30:28.000Z (13 days ago)
- Last Synced: 2024-12-11T11:39:08.150Z (13 days ago)
- Topics: charting-library, charts, data-visualization, echarts, frontend, opentiny, tiny-charts, visualization
- Language: JavaScript
- Homepage: https://opentiny.design/tiny-charts/
- Size: 58.9 MB
- Stars: 73
- Watchers: 8
- Forks: 23
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
OpenTiny HUICharts is a powerful set of front-end visualization chart libraries, which provides more than 40 chart components for web developers. It supports a variety of capabilities such as theme customization, responsiveness, and accessibility, and is fully compatible with ECharts's API.
English | [简体中文](README.zh-CN.md)
🌈 Features:
- 📦 Contains over 40 concise and easy-to-use chart components
- 🖖 One set of code supports Vue, Angular, and React frameworks simultaneously
- 🎨 Integrate multiple theme specifications and support theme customization
- 💡 Integrated features such as adaptive, performance improvement, accessibility, and scale optimization
## 🛠️ Usage
### 1. Installation
1. Prepare the environment. Ensure that Node.js is installed and the Node.js version is 10.13 or later. Run the `node -v` command to check the node version.
2. Check the current version of the library `npm show @opentiny/huicharts`.
3. Use the NPM to install the component library of the latest version: `npm install @opentiny/huicharts@latest --save`.
### 2. Import component
```javascript
// Refer to the chart library.
import HuiCharts from '@opentiny/huicharts';
// Create a chart container.
// Create a chart instance.
let chartIns = new HuiCharts();
// Initialize the chart container.
let chartContainerDom = document.getElementById('main');
chartIns.init(chartContainerDom);
// Enter the chart configuration items.
let chartOption = {...};
// Specify the chart type, such as LineChart, AreaChart, BarChart, PieChart, GaugeChart, RadarChart, ProcessChart, and BubbleChart.
// The English name of the chart type can be viewed in the menu bar on the left of the document.
let chartType = 'LineChart';
chartIns.setSimpleOption(chartType, chartOption);
// Start rendering.
chartIns.render();
```
## 🖥️ Development
```shell
git clone [email protected]:opentiny/tiny-charts.git
cd tiny-charts
npm i
# start project
npm run dev
```
打开浏览器访问：[http://localhost:8080/](http://localhost:8080/)
## Contributing
Welcome to join our OpenTiny community!🎉
If you don't know how to start, please read our [contributing guide](CONTRIBUTING.md).
- Add the official assistant WeChat `opentiny-official` and join the technical exchange group.
- Add to the mailing list `[email protected]`
## License
[MIT](LICENSE)