esswisdom_ipad_V1/uni_modules/jerry-gauge/index.vue

<template>
  <view class="gauge-container">
    <canvas class="canvas" canvas-id="canvas2"></canvas>
	
  </view>
</template>

<script>
import Gauge from "./index.js";
	import {
		mapState
	} from 'vuex';
export default {
  name: "gauge",
  data() {
    return {};
  },
  computed: {
  	...mapState({
  		uidatasdata: state => state.uidatasdata
  	})
  },
  mounted() {
 let SOC =''
 if((this.$store.state.uidatasdata.SOC * 1).toFixed(0)){
	SOC = (this.$store.state.uidatasdata.SOC * 1).toFixed(0) 
 }else{
	SOC = 10 
 }
 new Gauge({
 	canvasId: "canvas2",
 	value: SOC,
 	lineWidth: 20,
 	progressColor: ["#B0D0FF", "#5B8FF9"],
 	valueColor: "blue",
 });
  },
};
</script>

<style>
.gauge-container {
  padding: 0rpx 20rpx;
  text-align: left;
}
.title {
  color: #000;
  font-size: 32rpx;
  font-weight: 500;
}
.canvas {
  width: 180px;
  height: 150px;
  margin-top: 10rpx;
}
</style>