今天给小伙伴们分享一个轻量级的canvas简易图表展示库Charts。
![a54c2fdfdd4aae0eef1c1a0fc4cac4cc.png](https://i-blog.csdnimg.cn/blog_migrate/900fafb31af2af9aaa67b3ddafb13df8.jpeg)
charts 基于canvas构建的轻量图表。提供常用的折线图、柱状图、饼状图、雷达图及仪表盘,支持动画效果。
![92d6e1a6101dc8c164d8d11a00373fe7.gif](https://i-blog.csdnimg.cn/blog_migrate/011ab620f9c0e0c64ad1dd2514784cd4.gif)
特性
- 体积轻量:摒弃复杂交互及配置,带来轻量体积,适合仅需展示不需交互的场景;
- 动感十足:基于Transition插件的缓动效果,带来更加动感的图表;
- 快速上手:配置极为简单,提供了丰富实例;
安装
$ npm i @jiaminghi/charts --save
快速使用
import Charts from '@jiaminghi/charts'const container = document.getElementById('container')const myChart = new Charts(container)myChart.setOption({ title: 'My Chart', // ...otherConfig})
![5a64e403b52541de2704ef6c5522b942.png](https://i-blog.csdnimg.cn/blog_migrate/8c124a7f4d4eb07c5ba44040a6ed3dbf.jpeg)
![650a24f59bb86e86c4de9f7d05547b88.png](https://i-blog.csdnimg.cn/blog_migrate/cc9d39b8dbc48061145468bff60c6868.jpeg)
![a09baf6b7ded463228acc9ad5d6f388a.png](https://i-blog.csdnimg.cn/blog_migrate/122e1f448e63cfc49f2a27f45efb8193.jpeg)
![af7bf0227241b0948a16aa0ae83ea814.png](https://i-blog.csdnimg.cn/blog_migrate/9e927d99155c8bd12276824b82159403.jpeg)
![2d65cce56ac6a841d592b591d2f20f8e.png](https://i-blog.csdnimg.cn/blog_migrate/2b5c4f69a7c7a4c792c24209df6116dd.jpeg)
![2651e128b916463bc0e243c8f610c953.png](https://i-blog.csdnimg.cn/blog_migrate/dd53887b264c0da30417c83247efc6df.jpeg)
![c16fa194762dbbdb6c5026a8aa285f88.png](https://i-blog.csdnimg.cn/blog_migrate/1349e53060008b825430e7dc9813b86e.jpeg)
非常棒的一款canvas轻量图表展示库,需要的不要错过哈!
# 文档地址http://charts.jiaminghi.com/# 仓库地址https://github.com/DataV-Team/Charts
好了,今天就分享到这里。如果感兴趣的话,可以去看看,希望对大家有所帮助。