图片.png
图片.png

图片.png

DARK 致力于 聚焦主体 建立良好的视觉层级

图片.png

图片.png

图片.png
图片.png
图片.png

图片.png

图片.png

图片.png
图片.png

标签优化

图片.png

图片.png
图片.png

labelLayout

x坐标
自动布局配置

图片.png

  1. labelLayout: function(){
  2.     return {
  3.       x:myChart.getWIdth() - 100
  4.   }
  5. }

x坐标靠右100像素

labelLine

所有有标签断图标都有引导线

  1. labelLine:{
  2.     show:true,
  3.     length2:5,
  4.       lineStyle:{
  5.           coloe:"#bbb"
  6.       }
  7. }

图片.png
图片.png
标签在y方向做做重叠处理

  1. labelLayout: function(){
  2.     return {
  3.       x:myChart.getWIdth() - 100,
  4.     moveOverlap: "shiftY"
  5.   }
  6. }

标签自动隐藏
在不同的缩放蹭几下隐藏小节点的标签
只显示主要节点的标签
以达到清晰的显示效果

图片.png

  1. hideOverlap:true

超出部分自动截断或换行

图片.png

饼图的圆角模式

图片.png
itemStyle下的borderRadius 固定数值 或 相对于扇形区块的百分比值
图片.png

图片.png
矩形树图treemap 旭日图 sunburst
图片.png

仪表盘样式优化

图片.png

图片.png
图片.png

图片.png

全新仪表盘

图片.png
图片.png

图片.png
图片.png
图片.png
图片.png

图片.png

图片.png
图片.png

图片.png
图片.png

组件的设计

图片.png

图片.png

时间轴

图片.png
图片.png

图片.png

图片.png

图片.png

图片.png

Tooltip样式更新

图片.png
图片.png

图片.png

图片.png

图片.png

图片.png