index.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <view >
  3. <canvas canvas-id="canvas"
  4. @touchstart="touchstart"
  5. @touchmove="touchmove"
  6. @touchend="touchend"
  7. style="width: 750rpx; height: 600rpx;"></canvas>
  8. </view>
  9. </template>
  10. <script>
  11. import canvas from '@/components/curve-charts/canvas.js';
  12. import option from '@/components/curve-charts/datas.js'
  13. export default {
  14. data() {
  15. return {
  16. cWidth: 0,
  17. cHeight: 0
  18. }
  19. },
  20. onLoad() {
  21. },
  22. onReady() {
  23. let width = this.cWidth = uni.upx2px(750);
  24. let height = this.cHeight = uni.upx2px(600);
  25. let context = uni.createCanvasContext('canvas', this)
  26. this.ctx = new this.canvasDraw({context,width,height}, option);
  27. },
  28. methods: {
  29. ...canvas,
  30. }
  31. }
  32. </script>
  33. <style>
  34. .content {
  35. display: flex;
  36. flex-direction: column;
  37. align-items: center;
  38. justify-content: center;
  39. }
  40. .logo {
  41. height: 200rpx;
  42. width: 200rpx;
  43. margin-top: 200rpx;
  44. margin-left: auto;
  45. margin-right: auto;
  46. margin-bottom: 50rpx;
  47. }
  48. .text-area {
  49. display: flex;
  50. justify-content: center;
  51. }
  52. .title {
  53. font-size: 36rpx;
  54. color: #8f8f94;
  55. }
  56. </style>