nbjk-xcx/src/otherPages/threeExamScore/index.vue

<template>
  <view>
    <m-nav-bar fixed title="本次考试成绩"></m-nav-bar>
    <view class="top">
      <view class="score">
        <view class="circle">
          <canvas
            id="circle1"
            class="circle-canvas"
            canvas-id="circle1"
            width="340"
            height="300"
            type="2d"
          ></canvas>
          <view style="border: none" class="wxad">
            <ad
              :ad-intervals="100"
              ad-type="banner"
              unit-id="adunit-8eb44bbd7e3147d4"
            ></ad>
          </view>
        </view>
      </view>
    </view>
    <view class="split"> </view>
    <view class="history">
      <view class="title">
        <view class="title-left">考试情况</view>
        <view class="title-right"
          >历史成绩<van-icon name="arrow" size="26rpx"
        /></view>
      </view>
      <view class="content">
        <ec-canvas
          class="uni-ec-canvas"
          :ec="ec"
          :init-chart="initChart"
          canvasId="line-canvas1"
        ></ec-canvas>
        <!-- <view style="width: 100%; height: 250rpx"></view> -->
      </view>
      <view style="width: 100%; height: 150rpx"></view>
    </view>
  </view>
</template>

<script>
import ecCanvas from "./../components/ec-canvas/index";
import * as echarts from "./../components/ec-canvas/echarts";
import api from "@/api";

export default {
  data() {
    return {
      query: {
        score: 90,
      },
      ec: {},
    };
  },
  onLoad(query) {
    this.query = {
      ...query,
      score: Number(query.score || 0),
    };
    //登记成绩
    // api.exam.studentScoreInfo({
    //   type: "三力测试",
    //   score: Number(query.score),
    // });
  },
  onReady() {
    let that = this;
    const query = wx.createSelectorQuery();

    query
      .select("#circle1")
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log(res);
        const canvas = res[0].node;
        const ctx = canvas.getContext("2d");
        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.dpr = dpr;
        ctx.scale(dpr, dpr);
        that.drawHalfCircleAndScore(ctx);
        // ctx.fillRect(0, 0, 100, 100);
      });
  },
  methods: {
    initChart: async function (canvas, width, height, dpr) {
      let that = this;
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr, // new
      });
      canvas.setChart(chart);
      let res = await api.exam.studentScoreInfoList({
        type: "三力测试",
      });
      let optionSeriesData0 = res.rows.map((item) => {
        return item.score;
      });
      optionSeriesData0.reverse();
      console.log(res);
      var option = {
        color: ["#01C18D", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          text: "",
        },
        toolbox: {
          left: "center",
          itemSize: 0,
          top: 0,
          feature: {
            dataZoom: {
              type: "inside",
              xAxisIndex: 0,
              start: 0,
              end: 100,
            },
          },
        },
        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,
            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: optionSeriesData0,
          },
        ],
      };

      chart.setOption(option);
      return chart;
    },
    /**
     * @function 绘制半圆和分数
     * @param ctx {WechatMiniprogram.CanvasContext}
     */
    drawHalfCircleAndScore(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";
      ctx.lineWidth = 40;
      ctx.strokeStyle = "#ffffff";
      ctx.beginPath();
      ctx.arc(x1, y1, r1, Math.PI, 0, false);
      ctx.stroke();

      //绘制灰环
      ctx.moveTo(x1, y1);
      ctx.lineCap = "round";
      ctx.lineWidth = 20;
      ctx.strokeStyle = "#d8d8d8";
      ctx.beginPath();
      ctx.arc(x1, y1, r1, Math.PI, 0, false);
      ctx.stroke();
      // ctx.draw()

      //绘制渐变环
      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, 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 + that.query.score / 100),
        false
      );
      ctx.stroke();
      console.log(ctx);
      // ctx.draw()
      //绘制文字

      ctx.moveTo(x1, y1);
      ctx.textAlign = "right";
      ctx.lineWidth = 1;
      ctx.font = "30px sans-serif";
      let score = that.query.score;

      console.log(scoreWidth);
      ctx.beginPath();
      ctx.fillStyle = scoreColor1;
      ctx.fillText(String(that.query.score), x1 + 10, y1);

      ctx.textAlign = "right";
      ctx.font = "14px sans-serif";
      let scoreWidth = ctx.measureText(String(score)).actualBoundingBoxRight;
      console.log(scoreWidth);
      ctx.fillText("分", x1 + scoreWidth + 30, y1);

      ctx.textAlign = "center";
      ctx.font = "14px sans-serif";
      ctx.fillStyle = "#333333";
      ctx.fillText(
        that.query.score >= 90 ? "恭喜你，成绩合格！" : "很遗憾，考试不合格！",
        x1,
        y1 + 40
      );
    },
  },
  components: { ecCanvas },
};
</script>

<style lang="less" scoped>
.vh100 {
  height: 100vh;
}
.top {
  width: 750rpx;
  height: 726rpx;
  background-image: url("https://ndata.zzxcx.net/ctjk/mp-wx/threeExamScore/topBg.png");
  background-size: 100%;
  padding: 0 30rpx;

  overflow-x: hidden;
  .score {
    background: #fff;
    width: 100%;
    height: 472rpx;
    margin-top: 150rpx;

    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .circle {
      .circle-canvas {
        width: 340rpx;
        height: 300rpx;
        margin: 0 auto;
        transform: translateY(-15%);
      }
    }
  }
}
.split {
  width: 100%;
  height: 20rpx;
  border-bottom: 2rpx dashed #888;
}
.history {
  background: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    padding-top: 40rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-size: 26rpx;
    .title-left {
      font-size: 34rpx;
      color: #0a1a33;
      font-weight: bold;
    }
    .title-right {
      color: #8a9099;
    }
  }
  .content {
    width: 750rpx;
    height: 500rpx;
    padding: 15rpx;
  }
  .uni-ec-canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>