We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
我想学一下demo里面的一些效果,谢谢
The text was updated successfully, but these errors were encountered:
2.x组件库的demo已经上传,1.x组件库已经不提供支持,它们的demo在近期会使用2.x重写。
Sorry, something went wrong.
就是官网右上角的的demo,一个页面有很多组件,我想学一下那个圆角柱状图和环形图内的动画(文字翻转等等)
你说的那个demo是使用1.x组件库写的,圆角柱状图和环形图都是1.x组件库的组件,你可以安装1.x组件库,查看源码
mkdir dataview cd dataview npm init // 按回车直到初始化完毕 npm install @jiaminghi/data-view@1
安装结束后你可以在node_modules文件夹内查看1.x组件库的源码
圆角柱状图 dataview\node_modules\@jiaminghi\data-view\components\capsuleChart\index.vue 动态环图 dataview\node_modules\@jiaminghi\data-view\components\ringChart\index.vue
dataview\node_modules\@jiaminghi\data-view\components\capsuleChart\index.vue
dataview\node_modules\@jiaminghi\data-view\components\ringChart\index.vue
圆角柱状图的柱样式
.capsule-item { box-shadow: 0 0 3px #999; height: 10px; margin: 5px 0px; border-radius: 5px; width: calc(~"100% - 50px"); div { height: 8px; margin-top: 1px; border-radius: 5px; transition: all 0.3s; } }
动态环图内部文字翻转动画
.current-label { font-size: 16px; margin-top: 5%; transform: rotateY(0deg); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .transform-text { animation: transform-text 2s linear; } @keyframes transform-text { to { transform: rotateY(360deg); } }
No branches or pull requests
我想学一下demo里面的一些效果,谢谢
The text was updated successfully, but these errors were encountered: