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 盒模型 */
相关文章
|
Java 程序员
工作中遇到的点滴
工作中遇到的点滴
78 0
|
8月前
|
数据采集 分布式计算 DataWorks
准备工作
本文档介绍了阿里云智能推荐服务的使用流程,包括数据准备、行为埋点逻辑核对和数据上传方案。内容涉及不同行业的数据规范,如内容、电商和新闻行业,以及测试数据的获取。数据上传分为启动数据和实时数据两步,提供了全服务端SDK和友盟+服务端SDK等多种上传方案。此外,还介绍了通过历史数据启动实例的方法。建议用户根据自身行业和数据情况选择合适的方案。
63 4
|
Cloud Native Linux Go
工作中你会使用到 grpcurl 吗?
工作中你会使用到 grpcurl 吗?
100 0
|
开发者
思考你的工作
为什么你明明每天工作很努力,但依然感觉自己的技术进步很慢?
66 0
有效的工作,小记
    最近做的一个功能,一个静态页面上有很多需要翻译,需要替换的文本,由于网站上有翻译界面,只需做个关键词入库操作即可, 所以简单写了几句代码,代替人工操作。     1.通过http爬取网页html,然后正则匹配标签内的文本,添加到集合     2.遍历集合做入库操作                              循环插入的性能不好,应该用批量插入的做法,不过数据不多,就没整那么复杂了。
846 0
|
Android开发
[凌浩雨] 工作一年
时间:2017.06.22-2018.06.22单位经历:诚运网络科技 -> 西北星信息技术 -> 北京乾元大通信息技术 - 诚运网络科技 在职时间:2017.02-2017.04 -- -- 大学学业只剩下最后一个学期,这个学期需要实习单位修学分,学校课程有规定实习这一学分。
1230 0
|
Web App开发 消息中间件 NoSQL