哈喽大家好,我是小墨!最近在忙一个数据可视化的项目,各种图表需求简直让我头秃🤯。不过还好,我发现了一个宝藏图表库——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 或者其他好用的图表库,欢迎在评论区分享你的使用体验和心得哦! 让我们一起交流学习,共同进步!
领取专属 10元无门槛券
私享最新 技术干货