巡检app端图表

manifest.json

@@ -122,10 +122,10 @@
         "title" : "智慧消防",
         "router" : {
             "mode" : "hash",
-            "base" : "work"
+            "base" : ""
         },
         "devServer" : {
-            "https" : false,
+            "https" : true,
             "proxy" : {
                 "/web" : {
                     "target" : "https://wx.ewoogi.com/wx",

pages/xunJian/planInnerList/components/chart.vue

@@ -1,13 +1,15 @@
 <template>
 	<view class="content">
-		<view @click="echarts.onClick"  :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
+		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts2"
+			class="echarts"></view>
 
 	</view>
 </template>
 
 <script>
+	let title = '总数';
+
 	export default {
-		name: 'chart',
 		props: {
 			bindData: {
 				type: Object,
@@ -15,22 +17,91 @@
 			}
 		},
 		data() {
+			console.log('bindData')
+			console.log(this.bindData)
+
 			return {
 				
-			}
-		},
-		onLoad() {
+				option:{
+									title: {
+										text: '{name|' + parseInt(this.bindData.completion)+'%}\n{val|任务完成率}',
+										x: 'center',
+										y: 'center',
+										textStyle: {
+											rich: {
+												name: {
+													fontSize: 32,
+													fontWeight: 'normal',
+													color: '#24F0E4',
+													fontFamily: 'IMPACT',
+				
+													padding: [8, 0]
+												},
+												val: {
+													fontSize: 16,
+													color: '#333333',
+												}
+											}
+										}
+									},
+									color: ['#F4F5F7'],
+									legend: {
+										show: false,
+										data: []
+									},
+				
+									series: [{
+										name: 'Line 1',
+										type: 'pie',
+										clockWise: true,
+										radius: ['64%', '80%'],
+										itemStyle: {
+											normal: {
+												label: {
+													show: false
+												},
+												labelLine: {
+													show: false
+												}
+											}
+										},
+										hoverAnimation: false,
+										data: [{
+											value: parseInt(this.bindData.completion),
+											name: '',
+											itemStyle: {
+												normal: {
+													color: { // 完成的圆环的颜色
+														colorStops: [{
+										offset: 0,
+										color: '#0BA0D7' // 0% 处的颜色
+									}, {
+										offset: 1,
+										color: '#24F0E4' // 100% 处的颜色
+									}]
+													},
+													label: {
+														show: false
+													},
+													labelLine: {
+														show: false
+													}
+												}
+											}
+										}, {
+											name: '',
+											value: 100 - parseInt(this.bindData.completion)
+										}]
+									}]
+								}
+								
+							
+				
+				}
 			
-
 		},
+		onLoad() {},
 		methods: {
-			// changeOption() {
-			// 	const data = this.option.series[0].data
-			// 	// 随机更新示例数据
-			// 	data.forEach((item, index) => {
-			// 		data.splice(index, 1, Math.random() * 40)
-			// 	})
-			// },
 			onViewClick(options) {
 				console.log(options)
 			}
@@ -48,98 +119,16 @@
 				// 动态引入较大类库避免影响页面展示
 				const script = document.createElement('script')
 				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
-				script.src = '/static/echarts.min.js' 
+				script.src = 'static/echarts.min.js'
 				script.onload = this.initEcharts.bind(this)
 				document.head.appendChild(script)
 			}
 		},
 		methods: {
 			initEcharts() {
-
-				var fontColor = "#fff";
-				let noramlSize = 16;
-				var datas = {
-					// value:11,
-					value:  parseInt(this.bindData.completion),
-					company: "%",
-					ringColor: [{
-						offset: 0,
-						color: '#0BA0D7' // 0% 处的颜色
-					}, {
-						offset: 1,
-						color: '#24F0E4' // 100% 处的颜色
-					}]
-				},
-
-
-				myChart = echarts.init(document.getElementById('echarts'))
+				myChart = echarts.init(document.getElementById('echarts2'))
 				// 观测更新的数据在 view 层可以直接访问到
-				myChart.setOption({
-					title: {
-						text: '{name|' + datas.value + datas.company + '}\n{val|任务完成率}',
-						x: 'center',
-						y: 'center',
-						textStyle: {
-							rich: {
-								name: {
-									fontSize: 32,
-									fontWeight: 'normal',
-									color: '#24F0E4',
-									fontFamily: 'IMPACT',
-
-									padding: [8, 0]
-								},
-								val: {
-									fontSize: 16,
-									color: '#333333',
-								}
-							}
-						}
-					},
-					color: ['#F4F5F7'],
-					legend: {
-						show: false,
-						data: []
-					},
-
-					series: [{
-						name: 'Line 1',
-						type: 'pie',
-						clockWise: true,
-						radius: ['64%', '80%'],
-						itemStyle: {
-							normal: {
-								label: {
-									show: false
-								},
-								labelLine: {
-									show: false
-								}
-							}
-						},
-						hoverAnimation: false,
-						data: [{
-							value: datas.value,
-							name: '',
-							itemStyle: {
-								normal: {
-									color: { // 完成的圆环的颜色
-										colorStops: datas.ringColor
-									},
-									label: {
-										show: false
-									},
-									labelLine: {
-										show: false
-									}
-								}
-							}
-						}, {
-							name: '',
-							value: 100 - datas.value
-						}]
-					}]
-				})
+				myChart.setOption(this.option)
 			},
 			updateEcharts(newValue, oldValue, ownerInstance, instance) {
 				// 监听 service 层数据变更
@@ -166,6 +155,6 @@
 	.echarts {
 		width: 100%;
 		height: 400rpx;
-
+		margin-top: 70rpx;
 	}
 </style>