? 修复的一些问题
- 修复 interval 下 shape='line' 设置
lineCap: 'round'
样式失效
Tip: 可用于进度条的绘制,相比于市面上现有的前端进度条组件,可以做到大小的自适应。
chart .interval() .position('const*value') .shape('line') .style({ lineCap: 'round', });
进度条示例: https://codesandbox.io/s/upbeat-ellis-468sm
? 新的一些变化
组件的自适应
Axis 坐标轴文本
优化内容:文本过多、过长的展示优化。
具体策略:
- 默认自动旋转、自动省略、自动隐藏
- 开放
verticalLimitLength
属性:用于配置坐标轴垂直方向的最大限制长度。
- 可以直接设置像素值,如 100;
- 也可设置绝对值,如 0.2,如果是 x 轴,则相对于图表的高度,如果是 y 轴,则相对于图表的宽度
- 在 G2 中,x 轴的文本默认最大高度为图表高度的 1/2,y 轴的文本默认最大长度为图表宽度的 1/3
chart.axis('x', { label: { autoRotate: true, autoEllipsis: true, autoHide: true, verticalLimitLength: 30, } });
Tip
- 适用类型:直角坐标系,极坐标正在路上...
- 省略后需要支持 hover 显示完整文本,同样正在路上,也欢迎 PR....
Legend 图例文本
优化内容:图例项文本过长,导致图例侵占大部分图表面积
具体策略:
针对分类图例
- 开放
maxItemWidth
属性,用于设置图例项的最大宽度,超出则自动省略,默认值为图表宽度的 0.2
maxItemWidth
可以是像素值- 也可以是相对值(取 0 到 1 范围的数值),代表占图表宽度的多少
- 如果图例项设置了
itemWidth
,超出同样自动省略
chart.legend({ maxItemWidth: 20, });
Annotation 文本能力增强
Annotation 文本支持设置最大文本长度以及文本背景渲染,涉及到的 Annotation 类型有:
Text
chart.annotation().text({ /** 文本标注内容 */ content: '文本标注内容', /** 文字包围盒样式设置 */ background: { /** 文字内边距,同 css 盒模型 */ padding: 5, /** 文字包围盒样式 */ style: { fill: '#1890ff', fillOpacity: 0.5, }, }, /** 文本的最大长度 */ maxLength: 60, /** 超出 maxLength 是否自动省略 */ autoEllipsis: true, /** 文本截断的位置 */ ellipsisPosition: 'tail', });
Line
chart.annotation().line({ text: { /** 文本标注内容 */ content: '文本标注内容', /** 文字包围盒样式设置 */ background: { /** 文字内边距,同 css 盒模型 */ padding: 5, /** 文字包围盒样式 */ style: { fill: '#1890ff', fillOpacity: 0.5, }, }, /** 文本的最大长度 */ maxLength: 60, /** 超出 maxLength 是否自动省略 */ autoEllipsis: true, /** 文本截断的位置 */ ellipsisPosition: 'tail', } });
DataMarker
chart.annotation().dataMarker({ text: { display: true, /** 文本标注内容 */ content: '文本标注内容', /** 文字包围盒样式设置 */ background: { /** 文字内边距,同 css 盒模型 */