资讯专栏INFORMATION COLUMN

一个自定义扇形图表,内部嵌套折线,点

Lemon_95 / 2091人阅读

摘要:关于手机端适配方面,直接使用的来实现。因为是矢量图形,无论放大缩小都不失真,所以可以用适用各种设备且效果显示出众。公司给的设计稿是宽度,我就用了你们也可以将这个值直接设置为屏幕宽度。

设计稿:

最后实现效果图:

话不多说,直接上代码!




  
  
  
  
  体测报告


直接复制粘贴就能看到效果。
此图考察了svg的各种使用;其中包含了,绘制圆形、圆环,点,折线,多边形,水平居中文字,三角函数计算坐标。关于手机端适配方面,直接使用svg的viewbox来实现。因为svg是矢量图形,无论放大缩小都不失真,所以可以用适用各种设备且效果显示出众。
公司给的设计稿是375宽度,我就用了375.你们也可以将d_width这个值直接设置为屏幕宽度。
如果有bug请告之。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95703.html

相关文章

  • AAChartKit--- 强大、精美、易用的开源iOS图表

    摘要:可选的值有,和。布局类型或即水平布局和垂直布局默认是设定图例在图表区中的水平对齐方式,合法值有,和。垂直位置可以通过选项做进一步设定。 showImg(https://segmentfault.com/img/remote/1460000012009745?w=1240&h=653); showImg(https://segmentfault.com/img/remote/146000...

    eechen 评论0 收藏0
  • AAChartKit--- 强大、精美、易用的开源iOS图表

    摘要:可选的值有,和。布局类型或即水平布局和垂直布局默认是设定图例在图表区中的水平对齐方式,合法值有,和。垂直位置可以通过选项做进一步设定。 showImg(https://segmentfault.com/img/remote/1460000012009745?w=1240&h=653); showImg(https://segmentfault.com/img/remote/146000...

    104828720 评论0 收藏0

发表评论

0条评论

Lemon_95

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<