微信小程序内使用canvas绘制自定义折线图表

话不多说,最终实现效果如下:

图中难点:

  1. 圆角矩形绘制;转载他人帖子:看此处:https://www.jb51.net/article/...
  2. 最左或者最右边的气泡需要做动态偏移

本项目是由mpvue写的小程序:所以用的是vue的书写格式(微信小程序可以自行修改):
使用方法:

  1. 将下列代码新建linechart.vue文件
  2. 再项目中调用本组件的drawAll方法传入日期和值即可

代码中有少量注解请不懂的给我留言






以上列子如有疑问,请给我留言。

你可能感兴趣的:(javascript,微信小程序,canvas,vue.js)