图表构建完成

src/otherPages/components/ec-canvas/ec-canvas.js

@@ -0,0 +1,265 @@
+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts';
+
+let ctx;
+
+function compareVersion(v1, v2) {
+  v1 = v1.split('.')
+  v2 = v2.split('.')
+  const len = Math.max(v1.length, v2.length)
+
+  while (v1.length < len) {
+    v1.push('0')
+  }
+  while (v2.length < len) {
+    v2.push('0')
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i])
+    const num2 = parseInt(v2[i])
+
+    if (num1 > num2) {
+      return 1
+    } else if (num1 < num2) {
+      return -1
+    }
+  }
+  return 0
+}
+
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'ec-canvas'
+    },
+
+    ec: {
+      type: Object
+    },
+
+    forceUseOldCanvas: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  data: {
+    isUseNewCanvas: false
+  },
+
+  ready: function () {
+    // Disable prograssive because drawImage doesn't support DOM as parameter
+    // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
+    echarts.registerPreprocessor(option => {
+      if (option && option.series) {
+        if (option.series.length > 0) {
+          option.series.forEach(series => {
+            series.progressive = 0;
+          });
+        }
+        else if (typeof option.series === 'object') {
+          option.series.progressive = 0;
+        }
+      }
+    });
+
+    if (!this.data.ec) {
+      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+      return;
+    }
+
+    if (!this.data.ec.lazyLoad) {
+      this.init();
+    }
+  },
+
+  methods: {
+    init: function (callback) {
+      const version = wx.getSystemInfoSync().SDKVersion
+
+      const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
+      const forceUseOldCanvas = this.data.forceUseOldCanvas;
+      const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
+      this.setData({ isUseNewCanvas });
+
+      if (forceUseOldCanvas && canUseNewCanvas) {
+        console.warn('开发者强制使用旧canvas,建议关闭');
+      }
+
+      if (isUseNewCanvas) {
+        // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
+        // 2.9.0 可以使用 <canvas type="2d"></canvas>
+        this.initByNewWay(callback);
+      } else {
+        const isValid = compareVersion(version, '1.9.91') >= 0
+        if (!isValid) {
+          console.error('微信基础库版本过低，需大于等于 1.9.91。'
+            + '参见：https://github.com/ecomfe/echarts-for-weixin'
+            + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+          return;
+        } else {
+          console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
+          this.initByOldWay(callback);
+        }
+      }
+    },
+
+    initByOldWay(callback) {
+      // 1.9.91 <= version < 2.9.0：原来的方式初始化
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
+      const canvas = new WxCanvas(ctx, this.data.canvasId, false);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
+      const canvasDpr = 1
+      var query = wx.createSelectorQuery().in(this);
+      query.select('.ec-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height, canvasDpr);
+        }
+        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+          this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
+        }
+        else {
+          this.triggerEvent('init', {
+            canvas: canvas,
+            width: res.width,
+            height: res.height,
+            canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
+          });
+        }
+      }).exec();
+    },
+
+    initByNewWay(callback) {
+      // version >= 2.9.0：使用新的方式初始化
+      const query = wx.createSelectorQuery().in(this)
+      query
+        .select('.ec-canvas')
+        .fields({ node: true, size: true })
+        .exec(res => {
+          const canvasNode = res[0].node
+          this.canvasNode = canvasNode
+
+          const canvasDpr = wx.getSystemInfoSync().pixelRatio
+          const canvasWidth = res[0].width
+          const canvasHeight = res[0].height
+
+          const ctx = canvasNode.getContext('2d')
+
+          const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
+          echarts.setCanvasCreator(() => {
+            return canvas
+          })
+
+          if (typeof callback === 'function') {
+            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+            this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else {
+            this.triggerEvent('init', {
+              canvas: canvas,
+              width: canvasWidth,
+              height: canvasHeight,
+              dpr: canvasDpr
+            })
+          }
+        })
+    },
+    canvasToTempFilePath(opt) {
+      if (this.data.isUseNewCanvas) {
+        // 新版
+        const query = wx.createSelectorQuery().in(this)
+        query
+          .select('.ec-canvas')
+          .fields({ node: true, size: true })
+          .exec(res => {
+            const canvasNode = res[0].node
+            opt.canvas = canvasNode
+            wx.canvasToTempFilePath(opt)
+          })
+      } else {
+        // 旧的
+        if (!opt.canvasId) {
+          opt.canvasId = this.data.canvasId;
+        }
+        ctx.draw(true, () => {
+          wx.canvasToTempFilePath(opt, this);
+        });
+      }
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.processGesture(wrapTouch(e), 'start');
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.processGesture(wrapTouch(e), 'change');
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.processGesture(wrapTouch(e), 'end');
+      }
+    }
+  }
+});
+
+function wrapTouch(event) {
+  for (let i = 0; i < event.touches.length; ++i) {
+    const touch = event.touches[i];
+    touch.offsetX = touch.x;
+    touch.offsetY = touch.y;
+  }
+  return event;
+}

src/otherPages/components/ec-canvas/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <!-- 新的：接口对其了H5 -->
+  <canvas
+    v-if="isUseNewCanvas"
+    type="2d"
+    class="ec-canvas"
+    :canvas-id="canvasId"
+    :id="canvasId"
+    @init="init"
+    @touchstart="ec.disableTouch ? '' : touchStart"
+    @touchmove="ec.disableTouch ? '' : touchMove"
+    @touchend="ec.disableTouch ? '' : touchEnd"
+  ></canvas>
+  <!-- 旧的 -->
+  <canvas
+    v-else
+    class="ec-canvas"
+    :canvas-id="canvasId"
+    :id="canvasId"
+    @init="init"
+    @touchstart="ec.disableTouch ? '' : touchStart"
+    @touchmove="ec.disableTouch ? '' : touchMove"
+    @touchend="ec.disableTouch ? '' : touchEnd"
+  ></canvas>
+</template>
+
+<script>
+function compareVersion(v1, v2) {
+  v1 = v1.split(".");
+  v2 = v2.split(".");
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push("0");
+  }
+  while (v2.length < len) {
+    v2.push("0");
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i]);
+    const num2 = parseInt(v2[i]);
+
+    if (num1 > num2) {
+      return 1;
+    } else if (num1 < num2) {
+      return -1;
+    }
+  }
+  return 0;
+}
+import WxCanvas from "./wx-canvas";
+import * as echarts from "./echarts";
+console.log(echarts, "....");
+let ctx;
+export default {
+  props: {
+    canvasId: {
+      type: String,
+      value: "ec-canvas",
+    },
+
+    ec: {
+      type: Object,
+      default: {},
+    },
+    initChart: {
+      type: Function,
+      default: () => {},
+    },
+
+    forceUseOldCanvas: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    echarts.registerPreprocessor((option) => {
+      if (option && option.series) {
+        if (option.series.length > 0) {
+          option.series.forEach((series) => {
+            series.progressive = 0;
+          });
+        } else if (typeof option.series === "object") {
+          option.series.progressive = 0;
+        }
+      }
+    });
+
+    if (!this.ec) {
+      console.warn(
+        '组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
+          'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'
+      );
+      return;
+    }
+
+    if (!this.ec.lazyLoad) {
+      this.init();
+    }
+  },
+  data() {
+    return {
+      isUseNewCanvas: true,
+    };
+  },
+  methods: {
+    init: function (callback) {
+      const version = wx.getSystemInfoSync().SDKVersion;
+
+      const canUseNewCanvas = compareVersion(version, "2.9.0") >= 0;
+      const forceUseOldCanvas = this.forceUseOldCanvas;
+      const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
+      //   this.setData({ isUseNewCanvas });
+      this.isUseNewCanvas = isUseNewCanvas;
+
+      if (forceUseOldCanvas && canUseNewCanvas) {
+        console.warn("开发者强制使用旧canvas,建议关闭");
+      }
+
+      if (isUseNewCanvas) {
+        // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
+        // 2.9.0 可以使用 <canvas type="2d"></canvas>
+        this.initByNewWay(callback);
+      } else {
+        const isValid = compareVersion(version, "1.9.91") >= 0;
+        if (!isValid) {
+          console.error(
+            "微信基础库版本过低，需大于等于 1.9.91。" +
+              "参见：https://github.com/ecomfe/echarts-for-weixin" +
+              "#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82"
+          );
+          return;
+        } else {
+          console.warn(
+            "建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能"
+          );
+          this.initByOldWay(callback);
+        }
+      }
+    },
+
+    initByOldWay(callback) {
+      // 1.9.91 <= version < 2.9.0：原来的方式初始化
+      ctx = wx.createCanvasContext(this.canvasId, this);
+      const canvas = new WxCanvas(ctx, this.canvasId, false);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
+      const canvasDpr = 1;
+      var query = wx.createSelectorQuery().in(this);
+      query
+        .select(".ec-canvas")
+        .boundingClientRect((res) => {
+          if (typeof callback === "function") {
+            this.chart = callback(canvas, res.width, res.height, canvasDpr);
+          } else if (this.ec && typeof this.ec.onInit === "function") {
+            this.chart = this.ec.onInit(
+              canvas,
+              res.width,
+              res.height,
+              canvasDpr
+            );
+          } else {
+            this.$emit("init", {
+              canvas: canvas,
+              width: res.width,
+              height: res.height,
+              canvasDpr: canvasDpr, // 增加了dpr，可方便外面echarts.init
+            });
+          }
+        })
+        .exec();
+    },
+
+    initByNewWay(callback) {
+      let that = this;
+      console.log(that);
+      // version >= 2.9.0：使用新的方式初始化
+      const query = uni.createSelectorQuery().in(this);
+
+      query
+        .select(".ec-canvas")
+        .fields({ node: true, size: true })
+        .exec((res) => {
+          const canvasNode = res[0].node;
+          console.log(res);
+          this.canvasNode = canvasNode;
+
+          const canvasDpr = wx.getSystemInfoSync().pixelRatio;
+          const canvasWidth = res[0].width;
+          const canvasHeight = res[0].height;
+
+          const ctx = canvasNode.getContext("2d");
+
+          const canvas = new WxCanvas(ctx, this.canvasId, true, canvasNode);
+          echarts.setCanvasCreator(() => {
+            return canvas;
+          });
+
+          if (typeof callback === "function") {
+            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr);
+          } else if (this.ec && typeof this.initChart === "function") {
+            console.log(that)
+            this.chart = that.initChart(
+              canvas,
+              canvasWidth,
+              canvasHeight,
+              canvasDpr
+            );
+          } else {
+            console.log("执行到init", this.ec);
+            this.$emit("init", {
+              canvas: canvas,
+              width: canvasWidth,
+              height: canvasHeight,
+              dpr: canvasDpr,
+            });
+          }
+        });
+    },
+    canvasToTempFilePath(opt) {
+      if (this.isUseNewCanvas) {
+        // 新版
+        const query = wx.createSelectorQuery().in(this);
+        query
+          .select(".ec-canvas")
+          .fields({ node: true, size: true })
+          .exec((res) => {
+            const canvasNode = res[0].node;
+            opt.canvas = canvasNode;
+            wx.canvasToTempFilePath(opt);
+          });
+      } else {
+        // 旧的
+        if (!opt.canvasId) {
+          opt.canvasId = this.canvasId;
+        }
+        ctx.draw(true, () => {
+          wx.canvasToTempFilePath(opt, this);
+        });
+      }
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch("mousedown", {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {},
+        });
+        handler.dispatch("mousemove", {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {},
+        });
+        handler.processGesture(wrapTouch(e), "start");
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch("mousemove", {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {},
+        });
+        handler.processGesture(wrapTouch(e), "change");
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        var handler = this.chart.getZr().handler;
+        handler.dispatch("mouseup", {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {},
+        });
+        handler.dispatch("click", {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {},
+        });
+        handler.processGesture(wrapTouch(e), "end");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/otherPages/components/ec-canvas/wx-canvas.js

@@ -0,0 +1,111 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId, isNew, canvasNode) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+    this.isNew = isNew
+    if (isNew) {
+      this.canvasNode = canvasNode;
+    }
+    else {
+      this._initStyle(ctx);
+    }
+
+    // this._initCanvas(zrender, ctx);
+
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  addEventListener() {
+    // noop
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+      };
+    });
+  }
+
+  set width(w) {
+    if (this.canvasNode) this.canvasNode.width = w
+  }
+  set height(h) {
+    if (this.canvasNode) this.canvasNode.height = h
+  }
+
+  get width() {
+    if (this.canvasNode)
+      return this.canvasNode.width
+    return 0
+  }
+  get height() {
+    if (this.canvasNode)
+      return this.canvasNode.height
+    return 0
+  }
+}

src/otherPages/threeExamScore/index.vue

@@ -26,14 +26,129 @@
     <view class="history">
       <view class="title">
         <view class="title-left">考试情况</view>
-        <view class="title-right">历史成绩<van-icon name="arrow" size="26rpx" /></view>
-       
+        <view class="title-right"
+          >历史成绩<van-icon name="arrow" size="26rpx"
+        /></view>
+      </view>
+      <view class="content">
+        <ec-canva
+          :ec="ec"
+          :init-chart="initChart"
+          canvasId="line-canvas1"
+        ></ec-canva>
       </view>
     </view>
   </view>
 </template>
 
 <script>
+import ecCanva from "./../components/ec-canvas/index";
+import * as echarts from "./../components/ec-canvas/echarts";
+
+function initChart(canvas, width, height, dpr) {
+  const chart = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+    devicePixelRatio: dpr, // new
+  });
+  canvas.setChart(chart);
+
+  var option = {
+    color: ["#01C18D", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        label: {
+          backgroundColor: "#6a7985",
+        },
+      },
+    },
+    legend: {
+      data: [],
+    },
+
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: true,
+        data: [],
+        axisLine: {
+          lineStyle: {
+            color: "#F0F0F0",
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        max: 100,
+        minInterval: 30,
+      },
+    ],
+    series: [
+      {
+        name: "Line 1",
+        type: "line",
+        stack: "Total",
+        smooth: false,
+        lineStyle: {
+          width: 2,
+        },
+        markLine: {
+          data: [
+            [
+              {
+                name: "及格线",
+                yAxis: 90,
+                x: "10%",
+                label: {
+                  color: "#01C18D",
+                },
+              },
+              {
+                name: "及格线",
+                yAxis: 90,
+                x: "85%",
+              },
+            ],
+          ],
+        },
+        showSymbol: true,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(1, 0, 1, 1, [
+            {
+              offset: 0,
+              color: "#E1F8F1",
+            },
+            {
+              offset: 1,
+              color: "#FEFEFE",
+            },
+          ]),
+        },
+        emphasis: {
+          focus: "series",
+        },
+        data: [20, 40, 70, 60, 50],
+      },
+    ],
+  };
+
+  chart.setOption(option);
+  return chart;
+}
 
 export default {
   data() {
@@ -41,6 +156,7 @@ export default {
       query: {
         score: 90,
       },
+      ec: {},
     };
   },
   onLoad(query) {
@@ -67,15 +183,16 @@ export default {
       });
   },
   methods: {
+    initChart,
     /**
      * @function 绘制半圆和分数
      * @param ctx {WechatMiniprogram.CanvasContext}
      */
     drawHalfCircleAndScore(ctx) {
-      console.log(ctx);
       let x1 = ctx.canvas.width / ctx.dpr / 2;
       let y1 = 100;
       let r1 = 70;
+      let that = this;
       //绘制白环
       ctx.moveTo(x1, y1);
       ctx.lineCap = "round";
@@ -97,14 +214,24 @@ export default {
 
       //绘制渐变环
       ctx.moveTo(x1, y1);
+      let scoreColor1 = that.query.score>=90?"#01C18D":"#FF6D4E";
+      let scoreColor2 = that.query.score>=90?"#3ED2AA":"#FE3B2B";
+
       var arcColor = ctx.createLinearGradient(15, 125, 155, 125);
-      arcColor.addColorStop(0, "#FF6D4E");
-      arcColor.addColorStop(1, "#FE3B2B");
+      arcColor.addColorStop(0, scoreColor1);
+      arcColor.addColorStop(1, scoreColor2);
       ctx.strokeStyle = arcColor;
       ctx.lineCap = "round";
       ctx.lineWidth = 20;
       ctx.beginPath();
-      ctx.arc(x1, y1, r1, Math.PI, Math.PI * 1.1, false);
+      ctx.arc(
+        x1,
+        y1,
+        r1,
+        Math.PI,
+        Math.PI * (1 + that.query.score / 100),
+        false
+      );
       ctx.stroke();
       console.log(ctx);
       // ctx.draw()
@@ -114,26 +241,26 @@ export default {
       ctx.textAlign = "right";
       ctx.lineWidth = 1;
       ctx.font = "30px sans-serif";
-      let score = 0;
-      let scoreWidth = ctx.measureText(String(score)).width;
+      let score = that.query.score;
+
       console.log(scoreWidth);
       ctx.beginPath();
-      ctx.fillStyle = "#FF4D53";
-      ctx.fillText("10", x1 + 10, y1);
+      ctx.fillStyle = scoreColor1;
+      ctx.fillText(String(that.query.score), x1 + 10, y1);
 
       ctx.textAlign = "right";
       ctx.font = "14px sans-serif";
-      ctx.fillText("分", x1 + 10 + scoreWidth, y1);
+      let scoreWidth = ctx.measureText(String(score)).actualBoundingBoxRight;
+      console.log(scoreWidth);
+      ctx.fillText("分", x1 + scoreWidth + 30, y1);
 
       ctx.textAlign = "center";
       ctx.font = "18px sans-serif";
       ctx.fillStyle = "#333333";
-      ctx.fillText("很遗憾考试不合格", x1, y1 + 40);
+      ctx.fillText(that.query.score>=90?"恭喜你，成绩合格！":"很遗憾，考试不合格！", x1, y1 + 40);
     },
   },
-  components: {
-
-  },
+  components: { ecCanva },
 };
 </script>
 
@@ -182,9 +309,14 @@ export default {
       color: #0a1a33;
       font-weight: bold;
     }
-    .title-right{
-      color: #8A9099;
+    .title-right {
+      color: #8a9099;
     }
   }
+  .content {
+    width: 750rpx;
+    height: 500rpx;
+    padding: 15rpx;
+  }
 }
 </style>

src/pages.json

@@ -267,7 +267,11 @@
           "path":"threeExamScore/index",
           "style": {
             "navigationBarTitleText": "三力测试结果",
-            "navigationStyle": "default"
+            "navigationStyle": "default",
+            "usingComponents":{
+             
+            }
+            
           }
 
         },