yiliangyiyun-app/pages/user/report.vue

<template>
	<view>
	
	<web-view :src="url" class="map"></web-view>
	<view class="charts-box">
	  <qiun-data-charts
	 @getIndex='getdata'
	    type="ring"
		:opts='ringoptions'
	    :chartData="Ring"
		background= "#24262D"
	  />
	  <qiun-data-charts
	  @getIndex='getdata'
	     type="ring"
	  		:opts='ringoptions1'
	     :chartData="Ring1"
	  		background= "#24262D"
	   />
	  <qiun-data-charts
	  @getIndex='getdata'
	     type="column"
	     :chartData="chartData"
	     background="none"
	   />
	</view>	
	</view>
	
	<!-- <web-view v-if="flag" :src="url"></web-view> -->
	<!-- <iframe v-else :src="url" width="340" height="360" allowfullscreen allow="autoplay; fullscreen; microphone;"></iframe> -->
</template>

<script>
	export default {
		data() {
			return {
				// url:"https://datav.aliyuncs.com/share/235518097ffd673bc1eb05011b9a02b6",
				url: 'http://192.168.1.116:8011',
				flag: true,
				chartData:{
				 categories:['2016','2017','2018','2019','2020','2021'],
				 series:[{
				  name:'目标值',
				  data:[35, 36, 31, 33, 13, 34]
				 },{
				  name:'完成量',
				  data:[18, 27, 21, 24, 6, 28]
				 }]
				},
				ringoptions:{
					"type": "ring",
					"canvasId": "",
					"canvas2d": false,
					"background": "#24262D",
					"borderColor":'#24262D',
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
						'#75d1f4', '#3a3b40'
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 13,
					"fontColor": "#666666",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": false,
					"dataPointShapeType": "solid",
					"tapLegend": true,
					"legend": {
						"show": true,
						"position": "top",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#fff",
						"lineHeight": 25,
						"hiddenColor": "#CECECE",
						"itemGap": 10
					},
					"title": {
						"name": "总量合计",
						"fontSize": 15,
						"color": "#fff",
					},
					"subtitle": {
						"name": "70%",
						"fontSize": 25,
						"color": "#fff",
					},
					"extra": {
						"ring": {
							"ringWidth": 20,
							"centerColor": "#24262D",
							"activeOpacity": 0.5,
							"activeRadius": 10,
							"offsetAngle": 0,
							"customRadius": 0,
							"labelWidth": 15,
							"border": true,
							"borderWidth": 3,
							"borderColor": "#24262D",
							"linearType": "none"
						},
					}
				},
				ringoptions1:{
					"type": "ring",
					"canvasId": "",
					"canvas2d": false,
					"background": "#24262D",
					"borderColor":'#24262D',
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
						'#247ef4', '#3a3b40'
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 13,
					"fontColor": "#666666",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": false,
					"dataPointShapeType": "solid",
					"tapLegend": true,
					"legend": {
						"show": true,
						"position": "top",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#fff",
						"lineHeight": 25,
						"hiddenColor": "#CECECE",
						"itemGap": 10
					},
					"title": {
						"name": "总量合计",
						"fontSize": 15,
						"color": "#fff",
					},
					"subtitle": {
						"name": "70%",
						"fontSize": 25,
						"color": "#fff",
					},
					"extra": {
						"ring": {
							"ringWidth": 20,
							"centerColor": "#24262D",
							"activeOpacity": 0.5,
							"activeRadius": 10,
							"offsetAngle": 0,
							"customRadius": 0,
							"labelWidth": 15,
							"border": true,
							"borderWidth": 3,
							"borderColor": "#24262D",
							"linearType": "none"
						},
					}
				},
				"Ring":{
				"series":[{
				"name":"已完成量",
				"data":50
				},{
				"name":"未完成量",
				"data":30
				}]
				},
				"Ring1":{
				"series":[{
				"name":"已开票",
				"data":50
				},{
				"name":"未开票",
				"data":30
				}]
				}
			}
		},
		onLoad: function(option) {
			if (option.url) {
				this.url = option.url;
				uni.setNavigationBarTitle({
					title: "库点监控"
				})
				this.flag = false
			}
		},
		methods: {}
	}
</script>



<style>
	/* .map {
		position:relative;
		height: 400px;
	} */
	.charts-box{
		position:relative;
		top:70vh;
	}
</style>