背景
私たちは、ヒストグラムを作成する前に使用echartsやグラフプラグインの他の同様のタイプであります
これは、モバイルエンドの需要であり、このグラフは、アニメーションを取ります
echartsが重すぎるとなり、アニメーションは、私が欲しい効果(良いアニメーションを考えるために、主に自分の愚かな道を)達成するために使用します。
図は、最初の効果を見てみましょう。
いくつかのヒストグラム不満のスコア:
いくつかのコラムアウト図:
アニメーションの完全な組み合わせの要素があります。
PS:リング+進展の効果は、次の参照してください。
最後のものは、ヒストグラムがswiperの間で実施され、この需要図で見ることができます。
swiperページ、列ごとの成長、成長リングスケジュール。
ADOは、〜ロードマップを見ます
問題解決のためのアイデアを得る、分析、設計案を波:
チャートを見ると、それは我々がそれを治すために、チャートの画像と思っていたものではありませんか?
私は絵を回転させる場合は、次のようになりますので:
図工具回転とアートワークを回転させるには、マイクロチャンネルが付属して、私たちは、プログレスバーが〜4で表示されます
だから、私のこの効果のコアは、アイデアは何をするプログレスバーを使用することです。そして、プログレスバーの上の回転の水平方向の構造はそれにではありません。
プログレスバーのコアは、要素の幅を変更することです(水平プログレスバーを達成するため、記事を参照:「CSSケース-評価の星✨コート効果」)
我々は今、垂直方向に変更され、我々はする必要がある要素の高さが可能に変更します。
アイデアを、のヒストグラムを実装してみましょう:
フォーカスを見てdiv.row構造次の3つのサブセクションでは、:
オン - スコアdiv.data、TXT
- ヒストグラムdiv.progress
実際の値(リボンバー)span.pgデータ
以下の下で - コピーdiv.week
div.rowスタイル:
通常のボックスモデルのスタイルをdiv.row
div.data-txtを通常のフォントスタイル
div.progress
- ゼロのバーグラフの高さであり、ゼロの初期高さ、。
- 高さの遷移モニタ変更、高度増分アニメーションを達成
- 后期数据变化,更改progress标签上的style:height即可
div.row.ani > div.progress
每一个有ani样式的div.row结构,其下边的子元素div.progress的动画延迟。
这里用scss,快速创建了1-6条ani内部的progress的动画延迟时间。这里只是快捷写法
编译后的代码:
span.pg-data
就是一个彩带条,块级化后高度随父亲div.progress的高度。父亲的高度随真实数据。
div.week 底部文案正常的文字样式
这个是没有得分时,0分的状态。属于项目特殊需求,可有可无。
实现整个柱状图表:
一个柱图有了,就把第一个循环得到四个。
但是他们需要水平方向平均分布,于是我这里用了flex。(ps:你也可以用float或者其他。就是布局问题了)
都是一些让四个div.row横向两端均匀排列
ps:可忽略中间对before的设置,是为了实现四个柱图底部的横线效果。
vue逻辑源码实现整个效果
其中:
Data为1-4周的数据,进行循环得到四个柱状图div.row
Points为实际得分。需要根据具体分值展示不同效果:
aniShow是指是否触发动画,如果否就是什么都不展示,高度就为0。
如果是那就计算分值是否>=100:是的话就展示100,但这里得把px转换为rem单位,所以用100*1.5/100;
如果分值==0,因为设计稿的原因,还要漏出灰色一小段,所以强制改成0.04,;
剩下的0<积分值<100,那就用(实际积分值*1.5)/100。将分值进行百分比处理
源码如下:
1 .data01-charts 2 .row(v-for='item,index in Data' :key="index" :class='aniShow ? "ani":""') 3 .data-txt {{item.Points > 0 ? item.Points : '无数据'}} 4 .progress(:class='item.Points == 0 ? "nodata" : ""' 5 :style="'height: ' + (aniShow ? (item.Points >= 100 ? (100 * 1.5) / 100 : item.Points == 0 ? 0.04 : item.Points * 1.5 / 100) : 0) +'rem'") 6 span.pg-data 7 .week {{item.WeekName}}
公式:(100[实际分数] * 1.5[转换为px高度]) / 100[转化为rem高度],grade==0 : // 0分展示规则