我想学一下demo里面的一些效果，谢谢

请问能把demo的源码分享一下吗 about datav HOT 3 CLOSED

Jony1943 commented on July 18, 2024

请问能把demo的源码分享一下吗

from datav.

Comments (3)

jiaming743 commented on July 18, 2024

2.x组件库的demo已经上传，1.x组件库已经不提供支持，它们的demo在近期会使用2.x重写。

from datav.

Jony1943 commented on July 18, 2024

就是官网右上角的的demo，一个页面有很多组件，我想学一下那个圆角柱状图和环形图内的动画（文字翻转等等）

from datav.

jiaming743 commented on July 18, 2024

你说的那个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

圆角柱状图的柱样式

.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);
  }
}