Bileşenler
Chart
Çizgi, alan, çubuk, yığılmış çubuk ve halka grafikleri ile küçük eğilim çizgisi; her grafikte özet ve veri tablosu vardır.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Destek | Görsel değişiklik | Token’lar |
|---|---|---|---|
| Varsayılan | Var | Markadan bağımsız sekiz seri rengi; yalnızca yatay ızgara çizgileri, eksen çizgisi ve çentik yok; eksen yazısı eşit genişlikli rakamlarla | chart-series-1..chart-series-8, color-chart-grid, color-chart-axis |
| Üzerine gelme | Var (fare) | Açılır pencere yüzeyinde ipucu açılır; çubuklarda kategori arkasında bant, çizgilerde 1 px dikey çizgi; tek çizgide üzerine gelinen nokta yüzey halkalı bir daire olarak görünür | color-surface-raised, color-border-subtle, shadow-popup, color-chart-cursor, color-border-default |
| Yükleniyor | Var | Yer tutucu blok; şekil aria-busy |
- |
| Boş | Var | “Bu dönem için veri yok” yazısı | color-text-subtle |
| Değerler gizli | Var | Eksen değerleri yok; ipucu ve tabloda •••• |
- |
| Odak | Yalnızca tablo düğmesi | Düğmenin 2 px odak halkası | color-focus-ring, border-width-focus |
| Devre dışı, basılı | Yok | Grafik etkileşimli bir denetim değildir | - |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
Yükseklik sm |
160 px | chart-height-sm |
Yükseklik md |
240 px | chart-height-md |
Yükseklik lg |
320 px | chart-height-lg |
| Eğilim çizgisi yüksekliği | 32 px (varsayılan genişlik 96 px) | chart-sparkline-height |
| Seri sayısı | 8 renk; sekizden sonra renkler başa döner | chart-series-1..chart-series-8 |
| Çizgi kalınlığı | 2 px, yumuşak eğri | chart-line-width |
| Çubuk köşesi | 4 px, yalnızca dış uçta; yığında yalnızca en üst parça, parçalar arasında 1 px yüzey çizgisi | chart-bar-radius |
| Alan dolgusu | Seri renginin %30’undan %2’sine inen dikey geçiş | - |
| Halka iç ve dış yarıçap | Alanın %62 ve %90’ı; dilimler arasında 1,5° boşluk ve 2 px yüzey kenarı | - |
| Çubuk en fazla genişlik | 32 px; kategoriler arası %30 | - |
| Eksen yazısı | 12 px, eksenden 8 px uzakta; değer ekseninde 4 aralık | body-sm |
| Gösterge | Üstte başta, 8 px kareler | - |
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz. Chart bu değerleri çalışma anında okur ve var() yerine çözülmüş renkleri ECharts’a verir.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-chart-series-1 | #0068a5#0068a5#0068a5 | #79c2ff#79c2ff#79c2ff | |
--bigbang-chart-series-2 | #0a9f9a#0a9f9a#0a9f9a | #9edfda#9edfda#9edfda | |
--bigbang-chart-series-3 | #8a5600#8a5600#8a5600 | #c17a00#c17a00#c17a00 | |
--bigbang-chart-series-4 | #9575e2#9575e2#9575e2 | #9575e2#9575e2#9575e2 | |
--bigbang-chart-series-5 | #b34881#b34881#b34881 | #f897c6#f897c6#f897c6 | |
--bigbang-chart-series-6 | #138a50#138a50#138a50 | #2da264#2da264#2da264 | |
--bigbang-chart-series-7 | #e1595b#e1595b#e1595b | #ffbebb#ffbebb#ffbebb | |
--bigbang-chart-series-8 | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-chart-height-sm | 160px160px160px | 160px160px160px | |
--bigbang-chart-height-md | 240px240px240px | 240px240px240px | |
--bigbang-chart-height-lg | 320px320px320px | 320px320px320px | |
--bigbang-chart-sparkline-height | 32px32px32px | 32px32px32px | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-data-positive | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-data-negative | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-motion-chart-enter-duration | 0.4s0.4s0.4s | 0.4s0.4s0.4s | |
--bigbang-motion-chart-update-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| İlk çizim | Seriler 400 ms’de belirir, cubicOut (motion-chart-enter-duration) |
Animasyon kapalı |
| Veri güncelleme | Seriler yerinde 240 ms’de değişir; giriş yeniden oynamaz (motion-chart-update-duration) |
Animasyon kapalı |
| İpucu | Fareyle açılır; grafik kabının içinde kalır (confine) |
Aynı |
| Yer tutucu | motion.skeleton ile parlama |
Durağan |
| Tablo düğmesi | motion.press ile basma geri bildirimi |
Ölçek 1 |
Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.