Vue、React、Angular 都能用！Tiny Charts，一款跨框架的前端图表神器

哈喽大家好，我是小墨！最近在忙一个数据可视化的项目，各种图表需求简直让我头秃🤯。不过还好，我发现了一个宝藏图表库——Tiny Charts，必须安利给你们！

先放个传送门：

之前用过不少图表库，不是配置繁琐就是文档不全，或者兼容性差到让人抓狂。Tiny Charts 就完全不一样，它上手简单，功能强大，而且还跨框架，兼容 ECharts API，简直不要太贴心！

Tiny Charts 有哪些亮点？

•图表种类丰富：40 多种图表组件，基本覆盖了所有常见图表类型，再也不用担心找不到合适的图表啦！

•一套代码，多框架运行：支持 Vue、React、Angular，省去了很多适配工作，开发效率直接起飞！

•主题定制：内置多种主题，还能自定义主题，让你的图表更具个性，和你的项目完美融合！

•兼容 ECharts API：对 ECharts 用户非常友好，几乎没有学习成本，轻松切换！

•高性能：针对大量数据的渲染做了优化，告别卡顿，丝般顺滑！

•无障碍访问：Tiny Charts 也考虑到了无障碍访问，让每个人都能平等地获取信息，必须点个赞！

快速上手教程

1.安装依赖:

npm install @opentiny/huicharts@latest --save

1.引入组件:

import HuiCharts from '@opentiny/huicharts';

1.开搞:

// 获取图表容器

const chartContainer = document.getElementById('my-chart');

// 创建图表实例

const myChart = new HuiCharts();

// 初始化

myChart.init(chartContainer);

// 图表配置项

const options = {

// ...你的图表数据和配置

};

// 图表类型

const chartType = 'LineChart';

// 应用配置

myChart.setSimpleOption(chartType, options);

// 渲染图表

myChart.render();

是不是超级简单？几行代码就能画出一个漂亮的图表！

使用心得

我用 Tiny Charts 做了几个图表，感觉确实不错，开发效率提升了不少。它简洁易用，上手很快，而且性能也很好，处理大量数据也不卡顿。当然，它也有一些小缺点，比如文档还有待完善，社区活跃度还不够高。但是瑕不掩瑜，它仍然是一个值得推荐的图表库！

最后，如果你也用过 Tiny Charts 或者其他好用的图表库，欢迎在评论区分享你的使用体验和心得哦！ 让我们一起交流学习，共同进步！