feat:dashboard proogress

components/DashboardProgress/DashboardProgress.vue

+<template>
+	<view>
+		<uni-ec-canvas class="uni-ec-canvas" id="dashboard-progress" ref="dashboardProgressCanvas"
+			canvas-id="dashboard-progress-chart" :ec="ec"></uni-ec-canvas>
+	</view>
+</template>
+
+<script>
+	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
+	import * as echarts from '@/components/uni-ec-canvas/echarts'
+	import echartElementData from '@/mixins/echartElementData.js'
+	let chart = null
+
+	export default {
+		name: "DashboardProgress",
+		mixins: [echartElementData],
+
+		data() {
+			return {
+				ec: {
+					lazyLoad: true
+				}
+			};
+		},
+
+		onReady() {
+
+		},
+
+		components: {
+			uniEcCanvas
+		},
+
+		methods: {
+			initChart() {
+				this.$nextTick(() => {
+					this.$refs['dashboardProgressCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = echarts.init(canvas, null, {
+							width: width,
+							height: height,
+							devicePixelRatio: canvasDpr
+						})
+						canvas.setChart(chart)
+						const guageChart = [{
+							name: "",
+							value: this.elementData.dataList.endVal
+						}]
+						const color = [
+							[this.elementData.dataList.endVal / 100, this.elementInfo.option.progress
+								.strokeColor
+							],
+							[1, this.elementInfo.option.progress.trailColor]
+						]
+						const strokeWidth = this.elementInfo.option.progress.strokeWidth
+						const options = {
+							...this.elementInfo.option,
+							tooltip: {
+								formatter: '{a} <br/>{b} : {c}%'
+							},
+							title: [{
+								text: this.elementData.dataList.endVal + '%',
+								x: 'center',
+								top: '45%',
+								textStyle: {
+									fontSize: 30,
+									color: '#000000',
+								},
+							}],
+							series: [{
+								type: 'gauge',
+								// center: ['50%', '50%'],
+								radius: '50%',
+								startAngle: '180',
+								endAngle: '0',
+								pointer: {
+									show: false,
+								},
+								axisLine: {
+									show: true,
+									lineStyle: {
+										color: color,
+										width: strokeWidth,
+										shadowOffsetX: 0,
+										shadowOffsetY: 0,
+										opacity: 1,
+									},
+								},
+								splitLine: {
+									show: false
+								},
+								axisLabel: {
+									show: false
+								},
+								axisTick: {
+									show: false
+								},
+
+								radius: '90%',
+								// data: guageChart
+							}]
+						}
+						chart.setOption(options)
+						return chart
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

components/NormalProgress/NormalProgress.vue

@@ -22,6 +22,8 @@
         :bg-color="00000000">
             <view class="u-progress-text">{{elementInfo.data.dataList.endVal}}%</view>
         </u-circle-progress>
+		<DashboardProgress v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress>
+		
 	</view>
 </template>
 
@@ -47,6 +49,8 @@ export default {
 	  uniEcCanvas
 	},
 	methods: {
+		initChart(){
+		}
 	}
 }
 </script>