话不多说，最终实现效果如下： 图中难点： 圆角矩形绘制；转载他人帖子：看此处：[链接] 最左或者最右边的气泡需要做动态偏移 本项目是由mpvue写的小程序：所以用的是vue的书写格式（微信小程序可以自行修改）：使用方法： 将下列代码新建linechart.vue文件 再项目中调用本组件的drawAll方法传入日期和值即可 代码中有少...

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

直接上代码，拷贝到文件里直接运行就能看到效果；插件地址jCanvaScript：[链接] {代码...}

上面的代码直接复制进你的html文件里打开就能看到效果。注意事项：开始时按240像素大小的画布写，最后发现放在分辨率高的手机上全是锯齿，所以最后采用960的宽高来写。绘制完图片（头像）会覆盖整个画布，所以图片得最后绘制。弧形文字需要一点一旦调整弧度。留言：如有疑问关注我给我留言，我们一起成为大牛！