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 | 简体中文
🌈 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
- Prepare the environment. Ensure that Node.js is installed and the Node.js version is 10.13 or later. Run the
node -vcommand to check the node version. - Check the current version of the library
npm show @opentiny/huicharts. - Use the NPM to install the component library of the latest version:
npm install @opentiny/huicharts@latest --save.
// Refer to the chart library.
import HuiCharts from '@opentiny/huicharts';
// Create a chart container.
<div id="main" style="width: 600px;height:400px;"></div>
// 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();git clone [email protected]:opentiny/tiny-charts.git
cd tiny-charts
npm i
# start project
npm run dev打开浏览器访问：http://localhost:8080/
Welcome to join our OpenTiny community!🎉
If you don't know how to start, please read our contributing guide.
- Add the official assistant WeChat
opentiny-officialand join the technical exchange group. - Add to the mailing list
[email protected]