2020.07 G2 工作小结

简介: ? 修复的一些问题 修复 interval 下 shape='line' 设置 lineCap: 'round' 样式失效 Tip: 可用于进度条的绘制,相比于市面上现有的前端进度条组件,可以做到大小的自适应。 chart .interval() .position('const*value') .shape('line') .style({

? 修复的一些问题

  • 修复 interval 下 shape='line' 设置 lineCap: 'round' 样式失效

Tip: 可用于进度条的绘制,相比于市面上现有的前端进度条组件,可以做到大小的自适应。

chart
  .interval()
  .position('const*value')
  .shape('line')
  .style({
    lineCap: 'round',
  });

进度条示例: https://codesandbox.io/s/upbeat-ellis-468sm

image.png

? 新的一些变化

组件的自适应

Axis 坐标轴文本

优化内容:文本过多、过长的展示优化。

具体策略

  • 默认自动旋转、自动省略、自动隐藏
  • 开放 verticalLimitLength 属性:用于配置坐标轴垂直方向的最大限制长度。
    1. 可以直接设置像素值,如 100;
    2. 也可设置绝对值,如 0.2,如果是 x 轴,则相对于图表的高度,如果是 y 轴,则相对于图表的宽度
    3. 在 G2 中,x 轴的文本默认最大高度为图表高度的 1/2,y 轴的文本默认最大长度为图表宽度的 1/3

image.png

image.png

chart.axis('x', {
  label: {
    autoRotate: true,
    autoEllipsis: true,
    autoHide: true, 
    verticalLimitLength: 30,
  }
});

Tip 

  1. 适用类型:直角坐标系,极坐标正在路上...
  2. 省略后需要支持 hover 显示完整文本,同样正在路上,也欢迎 PR....

 

Legend 图例文本

优化内容:图例项文本过长,导致图例侵占大部分图表面积

具体策略

针对分类图例

  • 开放 maxItemWidth 属性,用于设置图例项的最大宽度,超出则自动省略,默认值为图表宽度的 0.2
    • maxItemWidth 可以是像素值
    • 也可以是相对值(取 0 到 1 范围的数值),代表占图表宽度的多少
  • 如果图例项设置了 itemWidth ,超出同样自动省略

 

image.png

image.png

 

chart.legend({
  maxItemWidth: 20, 
});

 

Annotation 文本能力增强

Annotation 文本支持设置最大文本长度以及文本背景渲染,涉及到的 Annotation 类型有:

 

Text

image.png

chart.annotation().text({
  /** 文本标注内容 */
  content: '文本标注内容',
  /** 文字包围盒样式设置 */
  background: {
    /** 文字内边距,同 css 盒模型 */
    padding: 5,
    /** 文字包围盒样式 */
    style: {
      fill: '#1890ff', 
      fillOpacity: 0.5,
    },
  },
  /** 文本的最大长度 */
  maxLength: 60,
  /** 超出 maxLength 是否自动省略 */
  autoEllipsis: true,
  /** 文本截断的位置 */
  ellipsisPosition: 'tail',
});

Line

image.png

chart.annotation().line({
  text: {
    /** 文本标注内容 */
    content: '文本标注内容',
    /** 文字包围盒样式设置 */
    background: {
      /** 文字内边距,同 css 盒模型 */
      padding: 5,
      /** 文字包围盒样式 */
      style: {
        fill: '#1890ff', 
        fillOpacity: 0.5,
      },
    },
    /** 文本的最大长度 */
    maxLength: 60,
    /** 超出 maxLength 是否自动省略 */
    autoEllipsis: true,
    /** 文本截断的位置 */
    ellipsisPosition: 'tail', 
  }
});

DataMarker

image.png

chart.annotation().dataMarker({
  text: {
    display: true,
    /** 文本标注内容 */
    content: '文本标注内容',
    /** 文字包围盒样式设置 */
    background: {
      /** 文字内边距,同 css 盒模型 */
相关文章
|
3月前
|
自动驾驶 物联网 5G
什么是 5G 以及它如何工作?
【8月更文挑战第23天】
355 0
如此之乱的思绪,如何才能专心工作?
      最近的思维特别的乱,乱得乱七八糟的。写一下也许能好一点点。 女朋友(难找哇) 谈恋爱(花钱呀) 见父母(不好过关呀) 买房子(没钱呀) 生小孩(养不起呀) 买奶粉(国内的有毒,国外的太贵) 欧洲弄一个告诉粒子流的对撞,不知道会装出个什么结果。
978 0
|
Android开发
[凌浩雨] 工作一年
时间:2017.06.22-2018.06.22单位经历:诚运网络科技 -> 西北星信息技术 -> 北京乾元大通信息技术 - 诚运网络科技 在职时间:2017.02-2017.04 -- -- 大学学业只剩下最后一个学期,这个学期需要实习单位修学分,学校课程有规定实习这一学分。
1222 0
工作体会(第一次工作)
(有两个月没有来博客园看看了!) 我觉得主要有5个方面来总结的。 在同事的交流上:     刚刚进入这家公司的时候,看见的人不算多。在技术部呢,就我一个女生。当时也比较胆小,不敢主动和同事们说话的。
689 0
|
C# 数据库 数据库管理