ffpark_front.git

New file
			@@ -0,0 +1,3500 @@
			<template>
			<div class="show-index">
			<div class="show-index-title">
			<h1>峰峰矿区综合行政执法局智慧泊车平台</h1>
			</div>
			<div class="show-index-main">
			<div class="show-index-main-left">
			<div class="show-index-main-left-line">
			<div class="show-index-main-left-block">
			<div class="show-block-title">
			<h1>智慧泊车基础数据</h1>
			</div>
			<div class="show-block-main">
			<div class="main-inside-block">
			<div class="main-inside-line1">
			<h1>2,818.9</h1>
			<h2>m²</h2>
			</div>
			<div class="main-inside-line2">
			<img src="../../../assets/images/show-block-icon1.png" alt="">
			<h1>停车场总面积</h1>
			</div>
			</div>
			<div class="main-inside-block">
			<div class="main-inside-line1">
			<h1>382</h1>
			<h2>个</h2>
			</div>
			<div class="main-inside-line2">
			<img src="../../../assets/images/show-block-icon2.png" alt="">
			<h1>监控总数</h1>
			</div>
			</div>
			<div class="main-inside-block">
			<div class="main-inside-line1">
			<h1>108</h1>
			<h2>人</h2>
			</div>
			<div class="main-inside-line2">
			<img src="../../../assets/images/show-block-icon3.png" alt="">
			<h1>工作人员总数</h1>
			</div>
			</div>
			<div class="main-inside-block">
			<div class="main-inside-line1">
			<h1>2,818.9</h1>
			<h2>辆</h2>
			</div>
			<div class="main-inside-line2">
			<img src="../../../assets/images/show-block-icon4.png" alt="">
			<h1>当前停车总数</h1>
			</div>
			</div>
			<div class="main-inside-block">
			<div class="main-inside-line1">
			<h1>2,818.9</h1>
			<h2>人</h2>
			</div>
			<div class="main-inside-line2">
			<img src="../../../assets/images/show-block-icon5.png" alt="">
			<h1>执法人员总数</h1>
			</div>
			</div>
			<div class="main-inside-block">
			<div class="main-inside-line1">
			<h1>60</h1>
			<h2>台</h2>
			</div>
			<div class="main-inside-line2">
			<img src="../../../assets/images/show-block-icon6.png" alt="">
			<h1>停车场设备总数</h1>
			</div>
			</div>
			</div>
			</div>
			<div class="show-index-main-left-block">
			<div class="show-block-title">
			<h1>智慧泊车月度车场统计</h1>
			</div>
			<div class="show-block-main">
			<div class="tclyvEcharts" id="tclyvEcharts"></div>
			<div class="tcpmEcharts" id="tcpmEcharts"></div>
			</div>
			</div>
			</div>
			<div class="show-index-main-left-line">
			<div class="show-index-main-left-block dingdan-num-block">
			<div class="show-block-title">
			<h1>智慧泊车月度订单统计</h1>
			</div>
			<div class="show-block-main dingdan-num-box">
			<div class="main-inside-line3">
			<div class="dingdan-block show-month1">
			<div class="dingdan-num-title">
			<h1>累计订单量数量</h1>
			</div>
			<div class="dingdan-num">
			<h1>6355</h1>
			<h2>单</h2>
			</div>
			</div>
			<div class="dingdan-block show-month2">
			<div class="dingdan-num-title">
			<h1>累计订单金额</h1>
			</div>
			<div class="dingdan-num">
			<h1>126355</h1>
			<h2>元</h2>
			</div>
			</div>
			</div>
			<div class="dingdanNumEcharts" id="ddtjEcharts"></div>
			</div>
			</div>
			<div class="show-index-main-left-block dingdan-tongji-block">
			<div class="show-block-title">
			<h1>智慧泊车月度出入场统计</h1>
			</div>
			<div class="show-block-main dingdan-num-box">
			<div class="main-inside-line3">
			<div class="dingdan-block show-month3">
			<div class="dingdan-num-title">
			<h1>累计订单量数量</h1>
			</div>
			<div class="dingdan-num">
			<h1>6355</h1>
			<h2>单</h2>
			</div>
			</div>
			<div class="dingdan-block show-month4">
			<div class="dingdan-num-title">
			<h1>累计订单量数量</h1>
			</div>
			<div class="dingdan-num">
			<h1>6355</h1>
			<h2>单</h2>
			</div>
			</div>
			</div>
			<div class="chuchangEcharts" id="crMonthEcharts"></div>
			</div>
			</div>
			</div>
			<div class="show-index-main-left-line">
			<div class="show-index-main-left-block fadan-tongji-box">
			<div class="show-block-title2">
			<h1>智慧泊车月度停车场进出入车辆与罚单统计</h1>
			</div>
			<div class="show-block-main">
			<div class="fadantongjiEcharts" id="jcAndFdEcharts"></div>
			</div>
			</div>
			</div>
			</div>
			<div class="show-index-main-middle">
			<div class="show-main-middle-title">
			<h1>2021年5月6日 10:28:59 星期四</h1>
			</div>
			<div class="show-main-middle-inside" id="mapMain">
			</div>
			<div class="menu-box menu-box-position1">
			<div class="menu-box-inside">
			<div class="menu-box-rel">
			<h1>598</h1>
			<h2>万辆</h2>
			</div>
			</div>

			</div>
			<div class="menu-box menu-box-position2">
			<div class="menu-box-inside">
			<div class="menu-box-rel">
			<h1>598</h1>
			<h2>万辆</h2>
			</div>
			</div>

			</div>
			<div class="menu-box menu-box-position3">
			<div class="menu-box-inside">
			<div class="menu-box-rel">
			<h1>598</h1>
			<h2>万辆</h2>
			</div>
			</div>

			</div>
			<div class="menu-box menu-box-position4">
			<div class="menu-box-inside">
			<div class="menu-box-rel">
			<h1>598</h1>
			<h2>万辆</h2>
			</div>
			</div>

			</div>
			<div class="menu-box menu-box-position5">
			<div class="menu-box-inside">
			<div class="menu-box-rel">
			<h1>598</h1>
			<h2>万辆</h2>
			</div>
			</div>

			</div>
			<div class="menu-box menu-box-position6">
			<div class="menu-box-inside">
			<div class="menu-box-rel">
			<h1>598</h1>
			<h2>万辆</h2>
			</div>
			</div>

			</div>
			<div class="menu-box-position7 dingdanMoney1">
			<div class="money-line">
			<h1>48</h1>
			<h2>元</h2>
			</div>
			<h3>今日泊车订单金额</h3>
			</div>
			<div class="menu-box-position7 dingdanMoney2">
			<div class="money-line">
			<h1>3960</h1>
			<h2>元</h2>
			</div>
			<h3>今日违法车辆订单金额</h3>
			</div>
			</div>
			<div class="show-index-main-left">
			<div class="show-index-main-left-line">
			<div class="show-index-main-left-block">
			<div class="show-block-title">
			<h1>智慧泊车月度执法人员统计</h1>
			</div>
			<div class="show-block-main">
			<div class="tclyvEcharts" id="fkdclEcharts"></div>
			<div class="tcpmEcharts" id="moneypmEcharts"></div>
			</div>
			</div>
			<div class="show-index-main-left-block">
			<div class="show-block-title">
			<h1>智慧泊车案件来源比例统计</h1>
			</div>
			<div class="show-block-main4">
			<div class="from-box-line">
			<div class="dayXjPieEcharts" id="dayXjPieEcharts"></div>
			<div class="dayXjPieEcharts" id="shangjiPieEcharts"></div>

			</div>
			<div class="from-box-line2">
			<div class="dayXjZhuEcharts" id="dayXjZhuEcharts"></div>
			<!--<div class="dayXjZhuEcharts" id="shangjiZhuEcharts"></div>-->
			</div>
			</div>
			</div>

			</div>
			<div class="show-index-main-left-line">
			<div class="show-index-main-left-block dingdan-num-block2">
			<div class="show-block-title">
			<h1>智慧泊车月度违法车辆统计</h1>
			</div>
			<div class="show-block-main dingdan-num-box">
			<div class="main-inside-line3">
			<div class="dingdan-block show-month2">
			<div class="dingdan-num-title">
			<h1>违法车辆订单金额</h1>
			</div>
			<div class="dingdan-num">
			<h1>6355</h1>
			<h2>元</h2>
			</div>
			</div>
			<div class="dingdan-block show-month5">
			<div class="dingdan-num-title">
			<h1>违法车辆订单数量</h1>
			</div>
			<div class="dingdan-num">
			<h1>126355</h1>
			<h2>单</h2>
			</div>
			</div>
			</div>
			<div class="dingdanNumEcharts" id="mouthCltjEcharts"></div>
			</div>
			</div>
			<div class="show-index-main-left-block dingdan-num-block">
			<div class="show-block-title">
			<h1>智慧泊车黑名单统计</h1>
			</div>
			<div class="show-block-main dingdan-num-box">
			<div class="main-inside-line4">
			<img src="../../../assets/images/black-icon1.png" alt="">
			<div class="black-box">
			<div class="black-num-box">
			<h1>4369</h1>
			<h2>人</h2>
			</div>
			<h3>当前黑名单总数</h3>
			</div>
			</div>
			<div class="chuchangEcharts" id="blackEcharts"></div>
			</div>
			</div>
			</div>
			<div class="show-index-main-left-line">
			<div class="show-index-main-left-block">
			<div class="show-block-title">
			<h1>智慧泊车缴费时效统计</h1>
			</div>
			<div class="show-block-main" id="weifaEcharts">
			</div>
			</div>
			<div class="show-index-main-left-block">
			<div class="show-block-title">
			<h1>智慧泊车黑名单重点车辆</h1>
			</div>
			<div class="show-block-main3">
			<div class="black-important-title">
			<div class="xuhao">
			<h1>序号</h1>
			</div>
			<div class="black-name">
			<h1>车牌号</h1>
			</div>
			<div class="black-name">
			<h1>违法未处理事件</h1>
			</div>
			<div class="black-name">
			<h1>地点</h1>
			</div>
			<div class="black-name">
			<h1>违法时间</h1>
			</div>
			<div class="xuhao">
			<h1>逾期</h1>
			</div>
			</div>
			<div class="black-important-card">
			<div class="black-important-card-inside">
			<vue-seamless-scroll :data="scrollList" :class-option="classOption" class="table-conten">
			<div class="black-important-card-line" v-for="(item,index) in scrollList" :key="index">
			<div class="xuhao2">
			<h1>{{index + 1}}</h1>
			</div>
			<div class="black-name2">
			<h1>{{item.chepai}}</h1>
			</div>
			<div class="black-name2">
			<h1>{{item.tingche}}</h1>
			</div>
			<div class="black-name2">
			<h1>{{item.adress}}</h1>
			</div>
			<div class="black-name2">
			<h1>{{item.date}}</h1>
			</div>
			<div class="xuhao2">
			<h1>{{item.shijianLenght}}</h1>
			</div>
			</div>
			<!--<div class="black-important-card-line">
			<div class="xuhao2">
			<h1>1</h1>
			</div>
			<div class="black-name2">
			<h1>冀AV7238</h1>
			</div>
			<div class="black-name2">
			<h1>违法停车</h1>
			</div>
			<div class="black-name2">
			<h1>中山路建华大街交口</h1>
			</div>
			<div class="black-name2">
			<h1>2021.05.22</h1>
			</div>
			<div class="xuhao2">
			<h1>3个月</h1>
			</div>
			</div>
			<div class="black-important-card-line">
			<div class="xuhao2">
			<h1>1</h1>
			</div>
			<div class="black-name2">
			<h1>冀AV7238</h1>
			</div>
			<div class="black-name2">
			<h1>违法停车</h1>
			</div>
			<div class="black-name2">
			<h1>中山路建华大街交口</h1>
			</div>
			<div class="black-name2">
			<h1>2021.05.22</h1>
			</div>
			<div class="xuhao2">
			<h1>3个月</h1>
			</div>
			</div>
			<div class="black-important-card-line">
			<div class="xuhao2">
			<h1>1</h1>
			</div>
			<div class="black-name2">
			<h1>冀AV7238</h1>
			</div>
			<div class="black-name2">
			<h1>违法停车</h1>
			</div>
			<div class="black-name2">
			<h1>中山路建华大街交口</h1>
			</div>
			<div class="black-name2">
			<h1>2021.05.22</h1>
			</div>
			<div class="xuhao2">
			<h1>3个月</h1>
			</div>
			</div>
			<div class="black-important-card-line">
			<div class="xuhao2">
			<h1>1</h1>
			</div>
			<div class="black-name2">
			<h1>冀AV7238</h1>
			</div>
			<div class="black-name2">
			<h1>违法停车</h1>
			</div>
			<div class="black-name2">
			<h1>中山路建华大街交口</h1>
			</div>
			<div class="black-name2">
			<h1>2021.05.22</h1>
			</div>
			<div class="xuhao2">
			<h1>3个月</h1>
			</div>
			</div>
			<div class="black-important-card-line">
			<div class="xuhao2">
			<h1>1</h1>
			</div>
			<div class="black-name2">
			<h1>冀AV7238</h1>
			</div>
			<div class="black-name2">
			<h1>违法停车</h1>
			</div>
			<div class="black-name2">
			<h1>中山路建华大街交口</h1>
			</div>
			<div class="black-name2">
			<h1>2021.05.22</h1>
			</div>
			<div class="xuhao2">
			<h1>3个月</h1>
			</div>
			</div>-->
			</vue-seamless-scroll>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</template>

			<script>
			import echarts from "echarts/lib/echarts";
			export default {
			name: "show-index",
			data() {
			return {
			avater:require('../../../assets/images/daping-title.png'),
			scrollList:[
			{
			chepai:'冀AV7238',
			tingche:'违法停车',
			adress:'中山路建华大街交口',
			date:'2021.05.22',
			shijianLenght:'3个月',
			},
			{
			chepai:'冀AV7238',
			tingche:'违法停车',
			adress:'中山路建华大街交口',
			date:'2021.05.22',
			shijianLenght:'3个月',
			},
			{
			chepai:'冀AV7238',
			tingche:'违法停车',
			adress:'中山路建华大街交口',
			date:'2021.05.22',
			shijianLenght:'3个月',
			}
			]
			}
			},
			computed:{
			classOption() {
			return {
			step: 0.6, // 数值越大速度滚动越快
			limitMoveNum: this.scrollList.length, // 开始无缝滚动的数据量 this.dataList.length
			hoverStop: true, // 是否开启鼠标悬停stop
			direction: 1, // 0向下 1向上 2向左 3向右
			openWatch: true, // 开启数据实时监控刷新dom
			singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
			singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
			waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			}
			}
			},
			mounted() {
			this.tclyvEcharts()
			this.tcpmEcharts()
			this.ddtjEcharts()
			this.jcAndFdEcharts()
			this.crMonthEcharts()
			this.fkdclEcharts()
			this.moneypmEcharts()
			this.mouthCltjEcharts()
			this.blackEcharts()
			this.weifaEcharts()
			this.dayXjPieEcharts()
			this.shangjiPieEcharts()
			this.dayXjZhuEcharts()
			this.mapMain()

			},
			methods: {
			//整体车位利用率
			tclyvEcharts() {
			//https://www.makeapie.com/editor.html?c=xFkzKG-bpl
			let myEchart = this.$echarts.init(document.getElementById('tclyvEcharts'))
			let angle = 0;//角度，用来做简单的动画效果的
			let value = 55.33;
			let option = {
			title: {
			text: '{a\|'+ value +'}{c\|%}',
			x: 'center',
			y: 'center',
			textStyle: {
			rich:{
			a: {
			fontSize: 40,
			color: '#29EEF3'
			},

			c: {
			fontSize: 18,
			color: '#ffffff',
			// padding: [5,0]
			}
			}
			}
			},
			graphic: [{
			type: 'text',
			z: 100,
			left: 'center',
			top: '90%',
			style: {
			fill: '#34fff8',
			text: '整体车位利用率',
			// text: [
			// '横轴表示温度，单位是°C',
			// '纵轴表示高度，单位是km',
			// '右上角有一个图片做的水印',
			// '这个文本块可以放在图中各',
			// '种位置'
			// ].join('\n'),
			font: '20px Microsoft YaHei'
			}
			}],
			legend: { show: false },
			series: [ {
			name: "ring5",
			type: 'custom',
			coordinateSystem: "none",
			renderItem: function(params, api) {
			return {
			type: 'arc',
			shape: {
			cx: api.getWidth() / 2,
			cy: api.getHeight() / 2,
			r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
			startAngle: (0+angle) * Math.PI / 180,
			endAngle: (90+angle) * Math.PI / 180
			},
			style: {
			stroke: "#0CD3DB",
			fill: "transparent",
			lineWidth: 1.5
			},
			silent: true
			};
			},
			data: [0]
			}, {
			name: "ring5",
			type: 'custom',
			coordinateSystem: "none",
			renderItem: function(params, api) {
			return {
			type: 'arc',
			shape: {
			cx: api.getWidth() / 2,
			cy: api.getHeight() / 2,
			r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
			startAngle: (180+angle) * Math.PI / 180,
			endAngle: (270+angle) * Math.PI / 180
			},
			style: {
			stroke: "#0CD3DB",
			fill: "transparent",
			lineWidth: 1.5
			},
			silent: true
			};
			},
			data: [0]
			}, {
			name: "ring5",
			type: 'custom',
			coordinateSystem: "none",
			renderItem: function(params, api) {
			return {
			type: 'arc',
			shape: {
			cx: api.getWidth() / 2,
			cy: api.getHeight() / 2,
			r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
			startAngle: (270+-angle) * Math.PI / 180,
			endAngle: (40+-angle) * Math.PI / 180
			},
			style: {
			stroke: "#0CD3DB",
			fill: "transparent",
			lineWidth: 1.5
			},
			silent: true
			};
			},
			data: [0]
			}, {
			name: "ring5",
			type: 'custom',
			coordinateSystem: "none",
			renderItem: function(params, api) {
			return {
			type: 'arc',
			shape: {
			cx: api.getWidth() / 2,
			cy: api.getHeight() / 2,
			r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
			startAngle: (90+-angle) * Math.PI / 180,
			endAngle: (220+-angle) * Math.PI / 180
			},
			style: {
			stroke: "#0CD3DB",
			fill: "transparent",
			lineWidth: 1.5
			},
			silent: true
			};
			},
			data: [0]
			}, {
			name: "ring5",
			type: 'custom',
			coordinateSystem: "none",
			renderItem: function(params, api) {
			let x0 = api.getWidth() / 2;
			let y0 = api.getHeight() / 2;
			let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
			let point = getCirlPoint(x0, y0, r, (90+-angle))
			return {
			type: 'circle',
			shape: {
			cx: point.x,
			cy: point.y,
			r: 4
			},
			style: {
			stroke: "#0CD3DB",//粉
			fill: "#0CD3DB"
			},
			silent: true
			};
			},
			data: [0]
			}, {
			name: "ring5", //绿点
			type: 'custom',
			coordinateSystem: "none",
			renderItem: function(params, api) {
			let x0 = api.getWidth() / 2;
			let y0 = api.getHeight() / 2;
			let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
			let point = getCirlPoint(x0, y0, r, (270+-angle))
			return {
			type: 'circle',
			shape: {
			cx: point.x,
			cy: point.y,
			r: 4
			},
			style: {
			stroke: "#0CD3DB", //绿
			fill: "#0CD3DB"
			},
			silent: true
			};
			},
			data: [0]
			}, {
			name: '吃猪肉频率',
			type: 'pie',
			radius: ['58%', '45%'],
			silent: true,
			clockwise: true,
			startAngle: 90,
			z: 0,
			zlevel: 0,
			label: {
			normal: {
			position: "center",

			}
			},
			data: [{
			value: value,
			name: "",
			itemStyle: {
			normal: {
			color: { // 完成的圆环的颜色
			colorStops: [{
			offset: 0,
			color: '#34fff8' // 0% 处的颜色
			}, {
			offset: 1,
			color: '#a7fffc' // 100% 处的颜色
			}]
			},
			}
			}
			},
			{
			value: 100-value,
			name: "",
			label: {
			normal: {
			show: false
			}
			},
			itemStyle: {
			normal: {
			color: "#021c2c"
			}
			}
			}
			]
			},

			{
			name: "",
			type: "gauge",
			radius: "58%",
			center: ['50%', '50%'],
			startAngle: 0,
			endAngle: 359.9,
			splitNumber: 8,
			hoverAnimation: true,
			axisTick: {
			show: false
			},
			splitLine: {
			length: 60,
			lineStyle: {
			width: 5,
			color: "#011020"
			}
			},
			axisLabel: {
			show: false
			},
			pointer: {
			show: false
			},
			axisLine: {
			lineStyle: {
			opacity: 0
			}
			},
			detail: {
			show: false
			},
			data: [{
			value: 0,
			name: ""
			}]
			},

			]
			};
			//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
			function getCirlPoint(x0, y0, r, angle) {
			let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
			let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
			return {
			x: x1,
			y: y1
			}
			}
			function draw(){
			angle = angle+3
			myEchart.setOption(option, true)
			//window.requestAnimationFrame(draw);
			}
			setInterval(function() {
			//用setInterval做动画感觉有问题
			draw()
			}, 100);
			// myEchart.setOption(option,false)
			},

			//停车场率用率排名
			tcpmEcharts() {
			//https://www.makeapie.com/editor.html?c=xiiP_yJDT
			let myEchart = this.$echarts.init(document.getElementById('tcpmEcharts'))
			var charts = { // 按顺序排列从大到小
			cityList: ['A1停车场', 'A2停车场', 'A3停车场', 'A4停车场', 'A5停车场'],
			cityData: [7500, 6200, 5700, 4200, 3500]
			}
			var top10CityList = charts.cityList
			var top10CityData = charts.cityData
			var color = ['#ff9500', '#02d8f9', '#027fff']
			var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']

			let lineY = []
			let lineT = []
			for (var i = 0; i < charts.cityList.length; i++) {
			var x = i
			if (x > 1) {
			x = 2
			}
			var data = {
			name: charts.cityList[i],
			color: color[x],
			value: top10CityData[i],
			barGap: '-100%',
			itemStyle: {
			normal: {
			show: true,
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: color[x]
			}, {
			offset: 1,
			color: color1[x]
			}], false),
			barBorderRadius: 10
			},
			emphasis: {
			shadowBlur: 15,
			shadowColor: 'rgba(0, 0, 0, 0.1)'
			}
			}
			}
			var data1 = {
			value: top10CityData[0],
			itemStyle: {
			color: '#001235',
			barBorderRadius: 10
			}
			}
			lineY.push(data)
			lineT.push(data1)
			}

			let option = {
			title: {
			text: '停车场利用率排名top5',
			textStyle: {
			align: 'center',
			color: '#ff8a00',
			fontSize: 20,
			},
			top: '1%',
			left: 'center',
			},
			tooltip: {
			trigger: 'item',
			formatter: (p) => {
			if (p.seriesName === 'total') {
			return ''
			}
			return `${p.name}<br/>${p.value}`
			}
			},
			grid: {
			borderWidth: 0,
			top: '20%',
			left: '35%',
			right: '20%',
			bottom: '3%'
			},
			color: color,
			yAxis: [{
			type: 'category',
			inverse: true,
			axisTick: {
			show: false
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			show: false,
			inside: false
			},
			data: top10CityList
			}, {
			type: 'category',
			axisLine: {
			show: false
			},
			axisTick: {
			show: false
			},
			axisLabel: {
			show: true,
			inside: false,
			lineHeight: '40',
			textStyle: {
			color: '#b3ccf8',
			fontSize: '16',
			fontFamily: 'PingFangSC-Regular'
			},
			formatter: function(val) {
			return `${val}`
			}
			},
			splitArea: {
			show: false
			},
			splitLine: {
			show: false
			},
			data: top10CityData
			}],
			xAxis: {
			type: 'value',
			axisTick: {
			show: false
			},
			axisLine: {
			show: false
			},
			splitLine: {
			show: false
			},
			axisLabel: {
			show: false
			}
			},
			series: [{
			name: 'total',
			type: 'bar',
			zlevel: 1,
			barGap: '-100%',
			barWidth: '10px',
			data: lineT,
			legendHoverLink: false
			}, {
			name: 'bar',
			type: 'bar',
			zlevel: 2,
			barWidth: '10px',
			data: lineY,
			label: {
			normal: {
			color: '#b3ccf8',
			show: true,
			position: ['-100px', '-5px'],
			textStyle: {
			fontSize: 16
			},
			formatter: function(a) {
			let num = ''
			let str = ''
			if (a.dataIndex + 1 < 10) {
			num = '0' + (a.dataIndex + 1);
			} else {
			num = (a.dataIndex + 1);
			}
			if (a.dataIndex === 0) {
			str = `{color1\|${num}} {color4\|${a.name}}`
			} else if (a.dataIndex === 1) {
			str = `{color2\|${num}} {color4\|${a.name}}`
			} else {
			str = `{color3\|${num}} {color4\|${a.name}}`
			}
			return str;
			},
			rich: {
			color1: {
			color: '#ff9500',
			fontWeight: 700
			},
			color2: {
			color: '#02d8f9',
			fontWeight: 700
			},
			color3: {
			color: '#027fff',
			fontWeight: 700
			},
			color4: {
			color: '#e5eaff'
			}
			}
			}
			}
			}],
			}
			myEchart.setOption(option,false)
			},

			//月度泊车订单数量变化
			ddtjEcharts() {
			//https://www.makeapie.com/editor.html?c=xTsu_f6uCC
			let myEchart = this.$echarts.init(document.getElementById('ddtjEcharts'))
			var fontColor = '#f3ffff';
			let option ={
			title: {
			text: '月度泊车订单数量变化',
			textStyle: {
			align: 'center',
			color: '#ff8a00',
			fontSize: 20,
			},
			top: '10%',
			left: 'center',
			},
			grid: {
			left: '5%',
			right: '10%',
			top:'30%',
			bottom: '5%',
			containLabel: true
			},
			tooltip : {
			show: true,
			trigger: 'item'
			},
			xAxis : [
			{
			type : 'category',
			boundaryGap : false,
			axisLabel:{
			color: fontColor,
			fontSize: 16
			},
			axisLine:{
			show:false,
			lineStyle:{
			color:'#333f4c'
			}
			},
			axisTick:{
			show:false,
			},
			splitLine:{
			show:false,
			lineStyle:{
			color:'#333f4c'
			}
			},
			data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			}
			],
			yAxis : [
			{
			type : 'value',
			name : '(单)',
			min:0,
			max:800,
			axisLabel : {
			formatter: '{value}',
			textStyle:{
			color:'#f3ffff',
			fontSize: 16
			}
			},
			axisLine:{
			show:false,
			lineStyle:{
			color:'#27b4c2'
			}
			},
			axisTick:{
			show:false,
			},
			splitLine:{
			show:true,
			lineStyle:{
			color:'#333f4c'
			}
			}
			},
			],
			series : [
			{
			name:'已采纳',
			type:'line',
			stack: '总量',
			symbol:'circle',
			symbolSize: 8,
			itemStyle: {
			normal: {
			color:'#0092f6',
			lineStyle: {
			color: "#10d0d3",
			width:2
			},
			areaStyle: {
			//color: '#94C9EC'
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			offset: 0,
			color: 'rgba(1,87,105,0.1)'
			}, {
			offset: 1,
			color: 'rgba(1,87,105,0.9)'
			}]),
			}
			}
			},
			markPoint:{
			itemStyle:{
			normal:{
			color:'red'
			}
			}
			},
			data:[80, 132, 101, 334, 90, 230, 210, 582, 191, 234, 290, 330]
			},
			]
			};
			myEchart.setOption(option, true)
			},

			//智慧泊车月度停车场进出入车辆与罚单统计
			jcAndFdEcharts() {
			//https://www.makeapie.com/editor.html?c=xDirb7FouD
			let myEchart = this.$echarts.init(document.getElementById('jcAndFdEcharts'))
			var getsyzl=['A1','A2','A3','A4','A5','A6','A7','A8','A9','A10','A11','A12','A13','A14','A15','A16','A17','A18','A19','A20'];
			var getwkrs=[826,673,588,782,779,855,826,673,588,782,779,855,826,673,588,782,779,855,826,826];
			var getlkrs=[686,703,788,882,779,785,673,588,782,779,855,826,673,588,782,779,855,779,855,826];
			let option= {
			grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '3%',
			containLabel: true
			},
			legend: {
			data: ['进出入车辆','发单车辆'],
			right: "5%",
			top:"8%",
			textStyle: {
			color: "#A1D5FF",
			fontSize: 12
			},
			itemWidth: 12, // 设置宽度
			itemHeight:16, // 设置高度
			itemGap: 12 // 设置间距
			},
			xAxis: [{
			data: getsyzl,
			axisLabel: {
			margin: 10,
			color: '#f3ffff',
			textStyle: {
			fontSize: 16
			},
			},
			axisLine: {
			lineStyle: {
			color: '#102E74',
			}
			},
			axisTick: {
			show: false
			},
			}],
			yAxis: [{
			type:'value',
			axisLabel: {
			color: '#f3ffff',
			textStyle: {
			fontSize: 16
			},
			},
			axisLine: {
			show:false,
			},
			axisTick: {
			show: false
			},
			splitLine: {
			lineStyle: {
			color: '#102E74',
			}
			}
			}],
			series: [
			{
			name: "进出入车辆",
			type: 'bar',
			data: getwkrs,
			barWidth: '16px',
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: 'rgba(18,231,232,1)' // 0% 处的颜色
			}, {
			offset: 1,
			color: 'rgba(159,255,255,1)' // 100% 处的颜色
			}], false),
			barBorderRadius: [30, 30, 0, 0],
			}
			},
			},{
			name: "发单车辆",
			type: 'bar',
			data: getlkrs,
			barWidth: '16px',
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: 'rgba(232,18,214,0.9)' // 0% 处的颜色
			}, {
			offset: 1,
			color: 'rgba(198,173,255,0.9)' // 100% 处的颜色
			}], false),
			barBorderRadius: [30, 30, 0, 0],
			}
			},
			}
			]
			}
			myEchart.setOption(option, true)
			},

			//智慧泊车月度出入场统计
			crMonthEcharts() {
			//https://www.makeapie.com/editor.html?c=xLalwfP12d
			let myEchart = this.$echarts.init(document.getElementById('crMonthEcharts'))
			let dataText = [{
			name: '进',
			type: 'line',
			smooth: true,
			symbolSize: 8,
			data: [127, 224, 120, 278, 227, 237],
			barWidth: '30%',
			itemStyle: {
			normal: {
			color: '#f0c725'
			}
			}
			}, {
			name: '出',
			type: 'line',
			smooth: true,
			symbolSize: 8,
			data: [27, 124, 70, 178, 127, 157],
			barWidth: '30%',
			itemStyle: {
			normal: {
			color: '#16f892'
			}
			}
			},
			]
			let dataObj = {
			year: ['2015', '2016', '2017', '2018', '2019', '2010'],
			data: {
			value: [{
			name: '进',
			value: [127, 224, 120, 278, 227, 237]
			}, {
			name: '出',
			value: [27, 124, 70, 178, 127, 157]
			}]
			}
			}
			let dataArr = []

			dataObj.data.value.map(item => {
			let datachild = []
			let newArr = {
			name: item.name,
			type: 'line',
			smooth: true,
			symbolSize: 8,
			data: item.value,
			barWidth: '30%',
			itemStyle: {
			normal: {
			color: item.name ==='进'?'#f0c725':item.name ==='出'?'#0BE3FF':'#16f892'
			}
			}
			}

			dataArr.push(newArr)
			})
			console.log(dataArr)
			let option = {
			color: ['#8debfa', '#ffbe33'],
			title: {
			left: 'center',
			top:'30',
			text: '月度泊车进出场数量变化',
			textStyle: {
			color: '#ff8a00',
			fontSize: '20',
			}
			},
			tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
			type: 'shadow' // 默认为直线，可选为：'line' \| 'shadow'
			}
			},
			legend: {
			right: '30',
			top: '30',
			textStyle: {
			color: '#c1cadf',
			"fontSize": 14
			}
			},
			grid: {
			left: '5%',
			right: '6%',
			top: '25%',
			bottom: '3%',
			containLabel: true
			},
			toolbox: {
			show: true,
			orient: 'vertical',
			x: 'right',
			y: 'center'
			},
			xAxis: [{
			type: 'category',
			boundaryGap: false,
			data: dataObj.year,
			axisLine: {
			lineStyle: {
			color: '#102E74'
			}
			},
			axisLabel: {
			interval: 0,
			color: '#f3ffff',
			fontSize:'16'
			}
			}],
			yAxis: [{
			type: 'value',
			name: '(辆)',
			nameTextStyle: {
			color: '#f3ffff',
			align: 'right',
			lineHeight: 20
			},
			axisLine: {
			lineStyle: {
			color: '#102E74'
			}
			},
			axisLabel: {
			interval: 0,
			color: '#f3ffff',
			fontSize:'16'
			},
			splitLine: {
			lineStyle: {
			color: '#102E74',
			}
			}
			}],
			series: dataArr
			};
			myEchart.setOption(option,false)
			},
			//罚款车辆达成率
			fkdclEcharts() {
			//https://www.makeapie.com/editor.html?c=xOB_SkK40D
			let myEchart = this.$echarts.init(document.getElementById('fkdclEcharts'))
			let value = 98;
			let int = value.toFixed(2).split('.')[0];
			let float = value.toFixed(2).split('.')[1];
			let option = {
			title: {
			text: '{a\|'+ value +'}{c\|%}',
			x: 'center',
			y: 'center',
			textStyle: {
			rich: {
			a: {
			fontSize: 48,
			color: '#fff',
			fontWeight:'600',
			},
			b: {
			fontSize: 20,
			color: '#fff',
			padding: [0, 0, 14, 0]
			},
			c: {
			fontSize: 20,
			color: '#fff',
			padding: [5, 0]
			}
			}
			}
			},
			graphic: [{
			type: 'text',
			z: 100,
			left: 'center',
			top: '90%',
			style: {
			fill: '#ffd701',
			text: '罚款车辆达成率',
			// text: [
			// '横轴表示温度，单位是°C',
			// '纵轴表示高度，单位是km',
			// '右上角有一个图片做的水印',
			// '这个文本块可以放在图中各',
			// '种位置'
			// ].join('\n'),
			font: '20px Microsoft YaHei'
			}
			}],
			series: [
			{
			type: 'gauge',
			radius: '70%',
			clockwise: false,
			startAngle: '90',
			endAngle: '-269.9999',
			splitNumber: 30,
			detail: {
			offsetCenter: [0, -20],
			formatter: ' '
			},
			pointer: {
			show: false
			},
			axisLine: {
			show: true,
			lineStyle: {
			color: [
			[0, 'rgba(255,215,1,0.2)'],
			[36.7 / 100, 'rgba(255,215,1,0.2)'],
			[1, '#ffc705']
			],
			width: 20
			}
			},
			axisTick: {
			show: false
			},
			splitLine: {
			show: true,
			length: 100,
			lineStyle: {
			shadowBlur: 10,
			shadowColor: 'rgba(0, 255, 255, 1)',
			shadowOffsetY:'0',
			color: '#020f18',
			width: 2
			}
			},
			axisLabel: {
			show: false
			}
			},
			{
			type: 'pie',
			radius: ['44%', '45%'],
			hoverAnimation: false,
			clockWise: false,
			itemStyle: {
			normal: {
			color: '#0C355E'
			}
			},
			label: {
			show: false
			},
			data: _dashed()
			},

			{
			type: 'pie',
			radius: [0, '40%'],
			hoverAnimation: false,
			clockWise: false,
			itemStyle: {
			normal: {
			shadowBlur: 20,
			shadowColor: '#000',
			color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
			offset: 0,
			color: '#174a74',
			}, {
			offset: 1,
			color: '#060f20'
			}])
			}
			},
			label: {
			show: false
			},
			data: [100]
			},
			{
			type: 'pie',
			radius: ['64%', '65.5%'],
			hoverAnimation: false,
			clockWise: false,
			itemStyle: {
			normal: {
			shadowBlur: 20,
			shadowColor: 'rgba(0, 255, 255,.3)',
			color: '#0f232e'
			}
			},
			label: {
			show: false
			},
			data: [100]
			},
			{
			type: 'pie',
			radius: ['68%', '69.5%'],
			hoverAnimation: false,
			clockWise: false,
			itemStyle: {
			normal: {
			shadowBlur: 20,
			shadowColor: 'rgba(0, 255, 255,.3)',
			color: 'rgba(15, 35, 46,.6)',
			}
			},
			label: {
			show: false
			},
			data: [100]
			},
			]
			};

			function _dashed() {
			let dataArr = [];
			for (var i = 0; i < 100; i++) {
			if (i % 2 === 0) {
			dataArr.push({
			name: (i + 1).toString(),
			value: 20,
			itemStyle: {
			normal: {
			color: 'rgb(0,255,255,.3)',
			}
			}
			})
			} else {
			dataArr.push({
			name: (i + 1).toString(),
			value: 20,
			itemStyle: {
			normal: {
			color: 'rgb(0,0,0,0)',
			borderWidth: 1,
			borderColor: "#fff09f"
			}
			}
			})
			}

			}
			return dataArr

			}

			function doing() {
			let option = myEchart.getOption();
			option.series[1].startAngle = option.series[1].startAngle - 1;
			myEchart.setOption(option);
			}
			function startTimer() {
			let timer = setInterval(doing, 100);
			}
			setTimeout(startTimer, 0);
			myEchart.setOption(option,true)
			},

			//当月执法人员罚没金额排名
			moneypmEcharts() {
			//https://www.makeapie.com/editor.html?c=xiiP_yJDT
			let myEchart = this.$echarts.init(document.getElementById('moneypmEcharts'))
			var charts = { // 按顺序排列从大到小
			cityList: ['A1停车场', 'A2停车场', 'A3停车场', 'A4停车场', 'A5停车场'],
			cityData: [7500, 6200, 5700, 4200, 3500]
			}
			var top10CityList = charts.cityList
			var top10CityData = charts.cityData
			var color = ['#ff9500', '#02d8f9', '#027fff']
			var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']

			let lineY = []
			let lineT = []
			for (var i = 0; i < charts.cityList.length; i++) {
			var x = i
			if (x > 1) {
			x = 2
			}
			var data = {
			name: charts.cityList[i],
			color: color[x],
			value: top10CityData[i],
			barGap: '-100%',
			itemStyle: {
			normal: {
			show: true,
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: color[x]
			}, {
			offset: 1,
			color: color1[x]
			}], false),
			barBorderRadius: 10
			},
			emphasis: {
			shadowBlur: 15,
			shadowColor: 'rgba(0, 0, 0, 0.1)'
			}
			}
			}
			var data1 = {
			value: top10CityData[0],
			itemStyle: {
			color: '#001235',
			barBorderRadius: 10
			}
			}
			lineY.push(data)
			lineT.push(data1)
			}

			let option = {
			title: {
			text: '当月执法人员罚没金额排名',
			textStyle: {
			align: 'center',
			color: '#ff8a00',
			fontSize: 20,
			},
			top: '1%',
			left: 'center',
			},
			tooltip: {
			trigger: 'item',
			formatter: (p) => {
			if (p.seriesName === 'total') {
			return ''
			}
			return `${p.name}<br/>${p.value}`
			}
			},
			grid: {
			borderWidth: 0,
			top: '20%',
			left: '35%',
			right: '20%',
			bottom: '3%'
			},
			color: color,
			yAxis: [{
			type: 'category',
			inverse: true,
			axisTick: {
			show: false
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			show: false,
			inside: false
			},
			data: top10CityList
			}, {
			type: 'category',
			axisLine: {
			show: false
			},
			axisTick: {
			show: false
			},
			axisLabel: {
			show: true,
			inside: false,
			lineHeight: '40',
			textStyle: {
			color: '#b3ccf8',
			fontSize: '16',
			fontFamily: 'PingFangSC-Regular'
			},
			formatter: function(val) {
			return `${val}`
			}
			},
			splitArea: {
			show: false
			},
			splitLine: {
			show: false
			},
			data: top10CityData
			}],
			xAxis: {
			type: 'value',
			axisTick: {
			show: false
			},
			axisLine: {
			show: false
			},
			splitLine: {
			show: false
			},
			axisLabel: {
			show: false
			}
			},
			series: [{
			name: 'total',
			type: 'bar',
			zlevel: 1,
			barGap: '-100%',
			barWidth: '10px',
			data: lineT,
			legendHoverLink: false
			}, {
			name: 'bar',
			type: 'bar',
			zlevel: 2,
			barWidth: '10px',
			data: lineY,
			label: {
			normal: {
			color: '#b3ccf8',
			show: true,
			position: ['-100px', '-5px'],
			textStyle: {
			fontSize: 16
			},
			formatter: function(a) {
			let num = ''
			let str = ''
			if (a.dataIndex + 1 < 10) {
			num = '0' + (a.dataIndex + 1);
			} else {
			num = (a.dataIndex + 1);
			}
			if (a.dataIndex === 0) {
			str = `{color1\|${num}} {color4\|${a.name}}`
			} else if (a.dataIndex === 1) {
			str = `{color2\|${num}} {color4\|${a.name}}`
			} else {
			str = `{color3\|${num}} {color4\|${a.name}}`
			}
			return str;
			},
			rich: {
			color1: {
			color: '#ff9500',
			fontWeight: 700
			},
			color2: {
			color: '#02d8f9',
			fontWeight: 700
			},
			color3: {
			color: '#027fff',
			fontWeight: 700
			},
			color4: {
			color: '#e5eaff'
			}
			}
			}
			}
			}],
			}
			myEchart.setOption(option,false)
			},

			//月度违法车数量统计
			mouthCltjEcharts() {
			//https://www.makeapie.com/editor.html?c=xTsu_f6uCC
			let myEchart = this.$echarts.init(document.getElementById('mouthCltjEcharts'))
			var fontColor = '#f3ffff';
			let option ={
			title: {
			text: '月度违法车数量统计',
			textStyle: {
			align: 'center',
			color: '#ff8a00',
			fontSize: 20,
			},
			top: '10%',
			left: 'center',
			},
			grid: {
			left: '5%',
			right: '10%',
			top:'30%',
			bottom: '5%',
			containLabel: true
			},
			tooltip : {
			show: true,
			trigger: 'item'
			},
			xAxis : [
			{
			type : 'category',
			boundaryGap : false,
			axisLabel:{
			color: fontColor,
			fontSize: 16
			},
			axisLine:{
			show:false,
			lineStyle:{
			color:'#333f4c'
			}
			},
			axisTick:{
			show:false,
			},
			splitLine:{
			show:false,
			lineStyle:{
			color:'#333f4c'
			}
			},
			data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			}
			],
			yAxis : [
			{
			type : 'value',
			name : '(单)',
			min:0,
			max:800,
			axisLabel : {
			formatter: '{value}',
			textStyle:{
			color:'#f3ffff',
			fontSize: 16
			}
			},
			axisLine:{
			show:false,
			lineStyle:{
			color:'#27b4c2'
			}
			},
			axisTick:{
			show:false,
			},
			splitLine:{
			show:true,
			lineStyle:{
			color:'#333f4c'
			}
			}
			},
			],
			series : [
			{
			name:'已采纳',
			type:'line',
			stack: '总量',
			symbol:'circle',
			symbolSize: 8,
			itemStyle: {
			normal: {
			color:'#0092f6',
			lineStyle: {
			color: "#10d0d3",
			width:2
			},
			areaStyle: {
			//color: '#94C9EC'
			color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
			offset: 0,
			color: 'rgba(1,87,105,0.1)'
			}, {
			offset: 1,
			color: 'rgba(1,87,105,0.9)'
			}]),
			}
			}
			},
			markPoint:{
			itemStyle:{
			normal:{
			color:'red'
			}
			}
			},
			data:[80, 132, 101, 334, 90, 230, 210, 582, 191, 234, 290, 330]
			},
			]
			};
			myEchart.setOption(option, true)
			},

			blackEcharts() {
			//https://www.makeapie.com/editor.html?c=xDirb7FouD
			let myEchart = this.$echarts.init(document.getElementById('blackEcharts'))
			let option = {
			title: {
			text: '黑名单车辆分布情况',
			textStyle: {
			align: 'center',
			color: '#ff8a00',
			fontSize: 20,
			},
			top: '5%',
			left: 'center',
			},
			grid: {
			left: '5%',
			right: '10%',
			top:'20%',
			bottom: '5%',
			containLabel: true
			},
			xAxis: {
			data: ['1-3个月', '3-6个月', '6-9个月', '9-12个月'],
			axisLine: {
			lineStyle: {
			color: '#333f4c'
			}
			},
			axisLabel: {
			color: '#fff',
			fontSize: 16
			}
			},
			yAxis: {
			name: "（辆）",
			nameTextStyle: {
			color: '#fff',
			fontSize: 16
			},
			axisLine: {
			lineStyle: {
			color: '#333f4c'
			}
			},
			axisLabel: {
			color: '#fff',
			fontSize: 16
			},
			splitLine: {
			show:false,
			lineStyle: {
			color: '#0177d4'
			}
			},
			interval:500,
			max:4000

			},
			series: [{
			type: 'bar',
			barWidth: 28,
			itemStyle:{
			normal:{
			color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: '#00fcff'
			}, {
			offset: 0.8,
			color: '#087bde'
			}], false),
			barBorderRadius: [50, 50, 0, 0] //柱状图圆角
			}
			},
			data: [254, 3254, 1654, 2454, 4757, 2011, 1211]
			}]
			};
			myEchart.setOption(option, true)
			},
			//实际违法处理时间统计
			weifaEcharts() {
			//https://www.makeapie.com/editor.html?c=xH0E6KFMcG
			let myEchart = this.$echarts.init(document.getElementById('weifaEcharts'))
			const CubeLeft = echarts.graphic.extendShape({
			shape: {
			x: 0,
			y: 0
			},
			buildPath: function(ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c0 = [shape.x, shape.y]
			const c1 = [shape.x - 9, shape.y - 9]
			const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
			const c3 = [xAxisPoint[0], xAxisPoint[1]]
			ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
			}
			})
			const CubeRight = echarts.graphic.extendShape({
			shape: {
			x: 0,
			y: 0
			},
			buildPath: function(ctx, shape) {
			const xAxisPoint = shape.xAxisPoint
			const c1 = [shape.x, shape.y]
			const c2 = [xAxisPoint[0], xAxisPoint[1]]
			const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
			const c4 = [shape.x + 18, shape.y - 9]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
			}
			})
			const CubeTop = echarts.graphic.extendShape({
			shape: {
			x: 0,
			y: 0
			},
			buildPath: function(ctx, shape) {
			const c1 = [shape.x, shape.y]
			const c2 = [shape.x + 18, shape.y - 9]
			const c3 = [shape.x + 9, shape.y - 18]
			const c4 = [shape.x - 9, shape.y - 9]
			ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
			}
			})
			echarts.graphic.registerShape('CubeLeft', CubeLeft)
			echarts.graphic.registerShape('CubeRight', CubeRight)
			echarts.graphic.registerShape('CubeTop', CubeTop)
			const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
			const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
			let option = {
			title: {
			text: '实际违法处理时间统计',
			top: 20,
			left: 'center',
			textStyle: {
			color: '#ff8a00',
			fontSize: 20
			}
			},
			grid: {
			left: 20,
			right: 40,
			bottom: '19%',
			top: 107,
			containLabel: true
			},
			xAxis: {
			type: 'category',
			data: ['德州', '德城区', '陵城区', '禹城市', '乐陵市', '临邑县',
			'平原县', '夏津县', '武城县', '庆云县', '宁津县', '齐河县'
			],
			axisLine: {
			show: true,
			lineStyle: {
			color: 'white'
			}
			},
			offset: 20,
			axisTick: {
			show: false,
			length: 9,
			alignWithLabel: true,
			lineStyle: {
			color: '#7DFFFD'
			}
			},
			axisLabel: {
			fontSize: 10
			}
			},
			yAxis: {
			type: 'value',
			axisLine: {
			show: true,
			lineStyle: {
			color: 'white'
			}
			},
			splitLine: {
			show: false
			},
			axisTick: {
			show: false
			},
			axisLabel: {
			fontSize: 16
			},
			boundaryGap: ['20%', '20%']
			},
			series: [{
			type: 'custom',
			renderItem: function(params, api) {
			const location = api.coord([api.value(0), api.value(1)])
			return {
			type: 'group',
			children: [{
			type: 'CubeLeft',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: 'rgba(7,29,97,.6)'
			}
			}, {
			type: 'CubeRight',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: 'rgba(10,35,108,.7)'
			}
			}, {
			type: 'CubeTop',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: 'rgba(11,42,106,.8)'
			}
			}]
			}
			},
			data: MAX
			}, {
			type: 'custom',
			renderItem: (params, api) => {
			const location = api.coord([api.value(0), api.value(1)])
			return {
			type: 'group',
			children: [{
			type: 'CubeLeft',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: '#3B80E2'
			},
			{
			offset: 1,
			color: '#49BEE5'
			}
			])
			}
			}, {
			type: 'CubeRight',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: '#3B80E2'
			},
			{
			offset: 1,
			color: '#49BEE5'
			}
			])
			}
			}, {
			type: 'CubeTop',
			shape: {
			api,
			xValue: api.value(0),
			yValue: api.value(1),
			x: location[0],
			y: location[1],
			xAxisPoint: api.coord([api.value(0), 0])
			},
			style: {
			fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			color: '#3B80E2'
			},
			{
			offset: 1,
			color: '#49BEE5'
			}
			])
			}
			}]
			}
			},
			data: VALUE
			}, {
			type: 'bar',
			label: {
			normal: {
			show: true,
			position: 'top',
			formatter: (e) => {
			switch (e.name) {
			case '10kV线路':
			return VALUE[0]
			case '公用配变':
			return VALUE[1]
			case '35kV主变':
			return VALUE[2]
			case '水':

			}
			},
			fontSize: 16,
			color: '#fff',
			offset: [4, -25]
			}
			},
			itemStyle: {
			color: 'transparent'
			},
			data: MAX
			}]
			}
			myEchart.setOption(option, true)
			},

			dayXjPieEcharts() {
			//https://www.makeapie.com/editor.html?c=xN_ckhLnbC
			let myEchart = this.$echarts.init(document.getElementById('dayXjPieEcharts'))
			let option = {
			title: [{
			text: '75%',
			left: '50%',
			top: '42%',
			textAlign: 'center',
			textStyle: {
			fontSize: '30',
			fontWeight: '100',
			color: '#ffffff',
			textAlign: 'center',
			},
			}],
			polar: {
			radius: ['74%', '86%'],
			center: ['50%', '50%'],
			},
			angleAxis: {
			max: 100,
			show: false,
			startAngle: 0,
			},
			radiusAxis: {
			type: 'category',
			show: true,
			axisLabel: {
			show: false,
			},
			axisLine: {
			show: false,

			},
			axisTick: {
			show: false
			},
			},
			series: [{
			name: '',
			type: 'bar',
			roundCap: true,
			barWidth: 60,
			showBackground: true,
			backgroundStyle: {
			color: '#00227d',
			},
			data: [75],
			coordinateSystem: 'polar',
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
			offset: 0,
			color: '#4bf3f9'
			}, {
			offset: 1,
			color: '#4bf3f9'
			}]),
			}
			}
			},
			{
			type: 'pie',
			radius: ['60%', '63%'],
			center: ['50%', '50%'],
			data: [{
			hoverOffset: 1,
			value: 100,
			name: '',
			itemStyle: {
			color: '#91a9ff',
			},
			label: {
			show: false
			},
			labelLine: {
			normal: {
			smooth: true,
			lineStyle: {
			width: 0
			}
			}
			},
			hoverAnimation: false,
			}
			]
			},
			]
			};
			myEchart.setOption(option,false)
			},

			shangjiPieEcharts() {
			//https://www.makeapie.com/editor.html?c=xN_ckhLnbC
			let myEchart = this.$echarts.init(document.getElementById('shangjiPieEcharts'))
			let option = {
			title: [{
			text: '75%',
			left: '50%',
			top: '42%',
			textAlign: 'center',
			textStyle: {
			fontSize: '30',
			fontWeight: '100',
			color: '#ffffff',
			textAlign: 'center',
			},
			}],
			polar: {
			radius: ['74%', '86%'],
			center: ['50%', '50%'],
			},
			angleAxis: {
			max: 100,
			show: false,
			startAngle: 0,
			},
			radiusAxis: {
			type: 'category',
			show: true,
			axisLabel: {
			show: false,
			},
			axisLine: {
			show: false,

			},
			axisTick: {
			show: false
			},
			},
			series: [{
			name: '',
			type: 'bar',
			roundCap: true,
			barWidth: 60,
			showBackground: true,
			backgroundStyle: {
			color: '#00227d',
			},
			data: [75],
			coordinateSystem: 'polar',
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
			offset: 0,
			color: '#4bf3f9'
			}, {
			offset: 1,
			color: '#4bf3f9'
			}]),
			}
			}
			},
			{
			type: 'pie',
			radius: ['60%', '63%'],
			center: ['50%', '50%'],
			data: [{
			hoverOffset: 1,
			value: 100,
			name: '',
			itemStyle: {
			color: '#91a9ff',
			},
			label: {
			show: false
			},
			labelLine: {
			normal: {
			smooth: true,
			lineStyle: {
			width: 0
			}
			}
			},
			hoverAnimation: false,
			}
			]
			}
			]
			};
			myEchart.setOption(option,false)
			},

			dayXjZhuEcharts() {
			//https://www.makeapie.com/editor.html?c=xtb1sE6zH
			let myEchart = this.$echarts.init(document.getElementById('dayXjZhuEcharts'))

			var category= [{
			name: "日常巡街",
			value: 2500,
			date:'来源日期 2021-06-01'
			},
			{
			name: "上级指派",
			value: 8000,
			date:'来源日期 2021-06-01'
			}
			]; // 类别
			var total = 10000; // 数据总数
			var datas = [];
			var dates = [];
			category.forEach(value => {
			datas.push(value.value);
			dates.push(value.date);
			});

			let option = {
			xAxis: {
			max: total,
			splitLine: {
			show: false
			},
			axisLine: {
			show: false
			},
			axisLabel: {
			show: false
			},
			axisTick: {
			show: false
			}
			},
			grid: {
			left: 80,
			top: 20, // 设置条形图的边距
			right: 80,
			bottom: 20
			},
			yAxis: [{
			type: "category",
			inverse: false,
			data: dates,
			axisLine: {
			show: false
			},
			axisTick: {
			show: false
			},
			axisLabel: {
			interval: 0,
			margin: 0,
			align: 'left',
			padding: [50, 0, 0, 0],
			textStyle: {
			color: '#ffffff',
			fontSize: 16
			}
			}
			}],
			series: [{
			// 内
			type: "bar",
			barWidth: 18,

			legendHoverLink: false,
			silent: true,
			itemStyle: {
			normal: {
			color: function(params) {
			var color;
			if(params.dataIndex==19){
			color = {
			type: "linear",
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
			offset: 0,
			color: "#44e2f1" // 0% 处的颜色
			},
			{
			offset: 1,
			color: "#011753" // 100% 处的颜色
			}
			]
			}
			}else if(params.dataIndex==18){
			color = {
			type: "linear",
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
			offset: 0,
			color: "#FFA048" // 0% 处的颜色
			},
			{
			offset: 1,
			color: "#B25E14" // 100% 处的颜色
			}
			]
			}
			}else if(params.dataIndex==17){
			color = {
			type: "linear",
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
			offset: 0,
			color: "#F8E972" // 0% 处的颜色
			},
			{
			offset: 1,
			color: "#E5C206" // 100% 处的颜色
			}
			]
			}
			}else{
			color = {
			type: "linear",
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
			offset: 0,
			color: "#1588D1" // 0% 处的颜色
			},
			{
			offset: 1,
			color: "#0F4071" // 100% 处的颜色
			}
			]
			}
			}
			return color;
			},
			}
			},
			label: {
			normal: {
			show: true,
			position: "left",
			formatter: "{b}",
			textStyle: {
			color: "#fff",
			fontSize: 14
			}
			}
			},
			data: category,
			z: 1,
			animationEasing: "elasticOut"
			},
			{
			// 分隔
			type: "pictorialBar",
			itemStyle: {
			normal:{
			color:"#061348"
			}
			},
			symbolRepeat: "fixed",
			symbolMargin: 16,
			symbol: "rect",
			symbolClip: true,
			symbolSize: [1, 21],
			symbolPosition: "start",
			symbolOffset: [1, -1],
			symbolBoundingData: this.total,
			data: category,
			z: 2,
			animationEasing: "elasticOut"
			},
			{
			// 外边框
			type: "pictorialBar",
			symbol: "rect",
			symbolBoundingData: total,
			itemStyle: {
			normal: {
			color: "none"
			}
			},
			label: {
			normal: {
			formatter: (params) => {
			var text;
			if(params.dataIndex==1){
			text = '{a\| 100%}{f\| '+params.data+'}';
			}else if(params.dataIndex==2){
			text = '{b\| 100%}{f\| '+params.data+'}';
			}else if(params.dataIndex==3){
			text = '{c\| 100%}{f\| '+params.data+'}';
			}else{
			text = '{d\| 100%}{f\| '+params.data+'}';
			}
			return text;
			},
			rich:{
			a: {
			color: 'red'
			},
			b: {
			color: 'blue'
			},
			c:{
			color: 'yellow'
			},
			d:{
			color:"green"
			},
			f:{
			color:"#ffffff"
			}
			},
			position: 'right',
			distance: 0, // 向右偏移位置
			show: true
			}
			},
			data: datas,
			z: 0,
			animationEasing: "elasticOut"
			},
			{
			name: "外框",
			type: "bar",
			barGap: "-120%", // 设置外框粗细
			data: [total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total],
			barWidth: 25,
			itemStyle: {
			normal: {
			color: "transparent", // 填充色
			barBorderColor: "#91a9ff", // 边框色
			barBorderWidth: 1, // 边框宽度
			// barBorderRadius: 0, //圆角半径
			label: {
			// 标签显示位置
			show: false,
			position: "top" // insideTop 或者横向的 insideLeft
			}
			}
			},
			z: 0
			}
			]
			};

			myEchart.setOption(option,false)
			},

			mapMain() {
			//https://www.makeapie.com/editor.html?c=xlm3WHfbw2
			let that = this
			let myChart = this.$echarts.init(document.getElementById('mapMain'))
			let JJJ = "json/fengfeng.json";
			let iconWZ = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMzBDNUMxRUNBN0IxMUVCQjZEOTg4RDlCOUE0RTg1RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMzBDNUMxRkNBN0IxMUVCQjZEOTg4RDlCOUE0RTg1RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIzMEM1QzFDQ0E3QjExRUJCNkQ5ODhEOUI5QTRFODVFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkIzMEM1QzFEQ0E3QjExRUJCNkQ5ODhEOUI5QTRFODVFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0R7NnQAADDZJREFUeNrcWwlsHOUV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'
			// const JJJ = "/asset/get/s/data-1568010881871-0of0Mrx7V.json";

			$.getJSON(JJJ, mapData => {
			echarts.registerMap('JJJ', mapData);
			// myChart.hideLoading();

			const geoCoordMap = {
			'厦门市':[114.177462, 36.35074, 20],
			'福州市': [114.283143, 36.551067, 60],
			'泉州市': [114.283994, 36.550934, 35],
			'漳州市': [114.237671, 36.417724, 53],
			'龙岩市':[114.284436, 36.545072, 50],
			'莆田市':[114.310323, 36.464424, 88],
			};
			// [{
			// "name": "厦门市",
			// "value":
			// }, {
			// "name": "福州市",
			// "value":
			// }, {
			// "name": "泉州市",
			// "value": [118.589421, 24.908853, 5]
			// }, {
			// "name": "漳州市",
			// "value": [117.661801, 24.510897, 1]
			// }, {
			// "name": "龙岩市",
			// "value": [117.02978, 25.091603, 1]
			// }, {
			// "name": "莆田市",
			// "value": [119.007558, 25.431011, 1]
			// }]
			let seriesData = [{
			"dsid": 592,
			"name": "厦门市",
			"value": [114.283143, 36.551067, 60]
			}, {
			"dsid": 591,
			"name": "福州市",
			"value": [114.310323, 36.464424, 18]
			}, {
			"dsid": 595,
			"name": "泉州市",
			"value": [114.283994, 36.550934, 5]
			}, {
			"dsid": 596,
			"name": "漳州市",
			"value": [114.284436, 36.545072, 20]
			}, {
			"dsid": 597,
			"name": "龙岩市",
			"value": [
			114.152929,
			36.362106
			]
			}, {
			"dsid": 594,
			"name": "莆田市",
			"value": [
			114.114453,
			36.375544
			]
			}];
			let convertData = function(data) {
			let scatterData = [];
			for (var i = 0; i < data.length; i++) {
			var geoCoord = geoCoordMap[data[i].name];
			if (geoCoord) {
			scatterData.push({
			name: data[i].name,
			value: geoCoord.concat(data[i].value)
			});
			}
			}
			return scatterData;
			};
			let option = {
			// backgroundColor: 'transparent',
			title: {
			text: '',
			subtext: '',
			x: 'center'
			},
			tooltip: { //提示框组件。
			trigger: 'item', //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
			formatter: '{a} <br/> {b}: {c}',
			textStyle: {
			fontSize: '24px'
			}
			},
			legend: {
			show: false,
			orient: 'horizontal', //图例的排列方向
			x: 'left', //图例的位置
			data: ['']
			},
			geo: {
			map: 'JJJ',
			left: 'center',
			zoom:1.2,
			itemStyle: { //地图区域的多边形图形样式
			// color: 'rgba(209,250,12,0.5)',
			normal: { //是图形在默认状态下的样式
			color: 'rgba(37,124,169)',
			label: {
			show: true, //是否显示标签
			textStyle: {
			color: 'rgb(249, 249, 249)'
			},
			},

			borderWidth: 3,
			borderColor: 'rgba(37,124,169)',
			// areaColor: 'rgba(37,124,169)',
			shadowColor: 'rgba(37,124,169)',
			shadowOffsetY: 15,
			shadowOffsetX: 8,
			// shadowBlur: 3,

			},

			},

			// layoutCenter: ['50%', '30%'],
			//如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
			// layoutSize: 100,
			},
			visualMap: { //颜色的设置 dataRange
			show: false,
			x: 'left',
			y: 'center',
			seriesIndex: [0],

			min: 5000,
			max: 3000,
			// splitList: [


			// ],
			// min: 0,
			// max: 2500,
			// calculable : true,//颜色呈条状
			text: ['高', '低'], // 文本，默认为数值文本
			color: ['rgb(11,85,142)', 'rgb(13,106,177)'],
			textStyle: {
			color: '#fff'
			},

			},
			roamController: { //控制地图的上下左右放大缩小图上没有显示
			show: false,
			x: 'right',
			mapTypeControl: {
			'china': false
			}
			},
			series: [{
			name: `行业：'全部'`,
			type: 'map',
			mapType: 'JJJ',
			// map: 'JJJ',
			// top: '90%',//组件距离容器的距离
			left: 'center',
			zoom: 1.2,
			roam: false, //是否开启鼠标缩放和平移漫游
			itemStyle: { //地图区域的多边形图形样式
			color: ['rgb(11,85,142)', 'rgb(13,106,177)'],
			normal: { //是图形在默认状态下的样式
			label: {
			show: true, //是否显示标签
			textStyle: {
			color: 'rgb(249, 249, 249)'
			},
			// shadowColor:'rgba(17,84,148,0.8)',
			},

			borderWidth: 3,
			borderColor: 'rgba(37,124,169)',
			areaColor: 'rgba(20,78,139,1)',
			// shadowColor: 'rgba(20,78,139,1)',
			// shadowOffsetY: 15,
			// shadowOffsetX: 15,
			// // shadowBlur: 100,
			},
			emphasis: { //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
			label: {
			show: true
			},
			borderColor: '#3baced',
			areaColor: '#0b558e',
			}
			},

			data: seriesData
			},
			/*{
			name: '', // hover标题
			type: 'custom',
			coordinateSystem: 'geo',
			renderItem(params, api) {
			console.log('params=======',params)
			console.log('api=======',api)
			console.log('that.avater=======',that.avater)
			// 具体实现自定义图标的方法
			return {
			type: 'image',
			style: {
			image: that.avater,
			x: api.coord([
			seriesData.value,
			])[0],
			y: api.coord([
			seriesData.value,
			])[1],
			width: '1000',
			height: '200'
			}
			}
			},
			data: convertData(seriesData),
			},*/
			{
			name: '物资',
			type: 'scatter',
			coordinateSystem: 'geo',
			data: seriesData,
			symbol: iconWZ,
			symbolSize: 60,
			label: {
			normal: {
			show: true,
			formatter: function(params) {
			console.log(params)
			return params.name
			},
			position: 'bottom',
			color: '#fff',
			fontSize: '11'
			},
			emphasis: {
			show: false,
			color: '#00d5e9',
			}
			},
			},
			{
			name: '',
			type: 'effectScatter',
			coordinateSystem: 'geo',
			color: 'rgba(209,250,12,0.5)',
			// symbolSize:50, //function (val) {
			// var a = (maxSize4Pin - minSize4Pin) / (max - min);
			// var b = minSize4Pin - a*min;
			// b = maxSize4Pin - a*max;
			// return a*val[2]+b;
			// },
			symbolSize: function(value) {
			return value[2] / 1;
			},
			tooltip: {
			show: false
			},
			label: {
			normal: {
			show: false,
			textStyle: {
			color: '#fff',
			fontSize: 9,
			}
			}
			},

			itemStyle: {
			normal: {
			color: 'rgba(209,250,12,0.5)', //标志颜色
			}
			},
			zlevel: 1,
			data: convertData(seriesData),
			},

			]
			};
			myChart.setOption(option);
			});
			},

			}
			}
			</script>

			<style lang="scss" scoped>
			h1,h2,h3,h4,h5,h6{
			font-weight: normal;
			}
			.show-index{
			width: 7680px;
			height: 2160px;
			background:url("../../../assets/images/daping-bj.jpg") no-repeat center;
			background-size: 100% 100%;
			}
			.show-index-title{
			width: 7680px;
			height: 264px;
			background:url("../../../assets/images/daping-title.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			h1{
			font-size: 60px;
			color: #fff;
			font-family: '苹方常规';
			font-weight: normal;
			margin-bottom: 22px;
			}
			}
			.show-index-main{
			width: 7680px;
			height: calc(2160 - 264px);
			padding:30px;
			box-sizing: border-box;
			display: flex;
			}
			.show-index-main-left-line{
			display: flex;
			margin-top: 40px;
			}
			.show-index-main-left-block{
			width: 1043px;
			height: 485px;
			background:url("../../../assets/images/daping-kuang1.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding:20px;
			box-sizing: border-box;
			margin:0 30px;
			}
			.show-block-title,.show-block-title2{
			width: 802px;
			height: 43px;
			background:url("../../../assets/images/block-title.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			h1{
			font-size: 28px;
			color: #1af1e9;
			}
			}
			.show-block-title2{
			background:url("../../../assets/images/block-title2.png") no-repeat center;
			}
			.main-inside-line1{
			display: flex;
			align-items: baseline;
			h1{
			color:#34fff8;
			font-size: 40px;
			}
			h2{
			color:#f3ffff;
			font-size: 20px;
			}
			}
			.main-inside-line2{
			display: flex;
			img{
			width: 32px;
			height: 32px;
			}
			h1{
			font-size: 22px;
			color:#f3ffff;
			margin-left:20px;
			}
			}
			.show-block-main,.show-block-main3,.show-block-main4{
			width: 100%;
			height: calc(100% - 50px);
			padding:40px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			.main-inside-block{
			width: calc(33.3% - 40px);
			margin:20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			}
			}
			.show-block-main4{
			padding:0;
			}
			.tclyvEcharts{
			width: 320px;
			height: 100%;
			}
			.tcpmEcharts{
			width: calc(100% - 320px);
			height: 100%;
			}
			.main-inside-line3{
			width: 100%;
			display: flex;
			justify-content: space-around;
			}
			.dingdan-block{
			width: 330px;
			height: 116px;
			position: relative;
			.dingdan-num-title{
			position: absolute;
			right: 20px;
			h1{
			font-size: 23px;
			color:#fff;
			}
			}
			.dingdan-num{
			position: absolute;
			right: 40px;
			top:35px;
			display: flex;
			align-items: baseline;
			h1{
			font-size: 50px;
			color:#fff;
			}
			h2{
			font-size: 18px;
			color:#fff;
			}
			}
			}
			.show-month1{
			background:url("../../../assets/images/show-month-icon1.png") no-repeat center;
			background-size: 100% 100%;
			}
			.show-month2{
			background:url("../../../assets/images/show-month-icon2.png") no-repeat center;
			background-size: 100% 100%;
			}
			.show-month3{
			background:url("../../../assets/images/show-month-icon3.png") no-repeat center;
			background-size: 100% 100%;
			}
			.show-month4{
			background:url("../../../assets/images/show-month-icon4.png") no-repeat center;
			background-size: 100% 100%;
			}
			.show-month5{
			background:url("../../../assets/images/show-month-icon5.png") no-repeat center;
			background-size: 100% 100%;
			}
			.dingdan-num-block{
			background:url("../../../assets/images/daping-kuang2.png") no-repeat center;
			background-size: 100% 100%;
			height: 678px;
			}
			.dingdan-num-box{
			flex-direction: column;
			}
			.dingdan-num-block2{
			background:url("../../../assets/images/daping-kuang5.png") no-repeat center;
			background-size: 100% 100%;
			height: 678px;
			flex-direction: column;
			}
			.dingdan-tongji-block{
			background:url("../../../assets/images/daping-kuang3.png") no-repeat center;
			background-size: 100% 100%;
			height: 678px;
			}
			.dingdanNumEcharts,.chuchangEcharts{
			width: 100%;
			height: calc(100% - 120px);
			}
			.fadan-tongji-box{
			width: 2150px;
			background:url("../../../assets/images/daping-kuang4.png") no-repeat center;
			background-size: 100% 100%;
			height: 484px;
			}
			.show-index-main-middle{
			width: 3026px;
			height: 1694px;
			background:url("../../../assets/images/daping-middle-kuang.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			}
			.show-index-main-middle{
			position: relative;

			}
			.show-main-middle-inside{
			width: 2300px;
			height: 1310px;
			border-radius: 50% / 50%;
			border:20px solid rgba(0,123,255,0.3);
			position: relative;
			}
			.menu-box{
			width: 403px;
			height: 208px;
			.menu-box-inside{
			position: relative;
			}
			.menu-box-rel{
			display: flex;
			align-items: baseline;
			position: absolute;
			top:-20px;
			left:140px;
			h1{
			color: #fff;
			font-size: 48px;
			}
			h2{
			color: #fff;
			font-size: 20px;
			}
			}
			}
			.menu-box-position1{
			position: absolute;
			left: 420px;
			top: 26px;
			background:url("../../../assets/images/midlle-icon1.png") no-repeat center;
			background-size: 100% 100%;
			}
			.menu-box-position2{
			position: absolute;
			left: 75px;
			top: 400px;
			background:url("../../../assets/images/midlle-icon2.png") no-repeat center;
			background-size: 100% 100%;
			}
			.menu-box-position3{
			position: absolute;
			left: 88px;
			bottom: 473px;
			background:url("../../../assets/images/midlle-icon3.png") no-repeat center;
			background-size: 100% 100%;
			}
			.menu-box-position4{
			position: absolute;
			right: 420px;
			top: 26px;
			background:url("../../../assets/images/midlle-icon4.png") no-repeat center;
			background-size: 100% 100%;
			}
			.menu-box-position5{
			position: absolute;
			right: 75px;
			top: 400px;
			background:url("../../../assets/images/midlle-icon5.png") no-repeat center;
			background-size: 100% 100%;
			}
			.menu-box-position6{
			position: absolute;
			right: 88px;
			bottom: 473px;
			background:url("../../../assets/images/midlle-icon6.png") no-repeat center;
			background-size: 100% 100%;
			}
			.menu-box-position7{
			position: absolute;
			width: 410px;
			height: 154px;
			background:url("../../../assets/images/midlle-icon7.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.money-line{
			display: flex;
			align-items: baseline;
			justify-content: center;
			h1{
			font-size: 48px;
			color: #fff;
			}
			h2{
			font-size: 22px;
			color: #fff;
			}

			}
			h3{
			font-family: '微软雅黑';
			color: #fff;
			font-size: 22px;
			text-align: center;
			}
			}
			.dingdanMoney1{
			left: 384px;
			bottom: 110px;
			}
			.dingdanMoney2{
			right: 384px;
			bottom: 110px;
			}
			.show-main-middle-title{
			width: 878px;
			height: 90px;
			background:url("../../../assets/images/midlle-title-bj.png") no-repeat center;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40px;
			h1{
			color:#20fbf4;
			font-size: 40px;
			}
			}
			.main-inside-line4{
			display: flex;
			justify-content: center;
			img{
			width: 88px;
			height: 88px;
			}
			.black-box{
			display: flex;
			flex-direction: column;
			margin-left: 20px;
			.black-num-box{
			display: flex;
			align-items: baseline;
			h1{
			color: #00feff;
			font-size: 46px;
			}
			h2{
			color: #fff;
			font-size: 20px;
			}
			}
			h3{
			color: #fff;
			font-size: 20px;
			}
			}
			}
			.black-important-card{

			}
			.black-important-title{
			background:rgba(28,255,252,0.1);
			height: 40px;
			width: 100%;
			display: flex;
			}
			.black-important-card{
			display: flex;
			flex-direction: column;
			width: 100%;
			}
			.xuhao{
			width: 88px;
			text-align: center;
			h1{
			color: #fff;
			font-size: 18px;
			line-height: 40px;
			}
			}
			.xuhao2{
			width: 88px;
			text-align: center;
			h1{
			color: #1af1e9;
			font-size: 18px;
			line-height: 40px;
			}
			}
			.black-name2{
			flex: 1;
			text-align: center;
			h1{
			color: #1af1e9;
			font-size: 18px;
			line-height: 40px;
			}
			}
			.black-name{
			flex: 1;
			text-align: center;
			h1{
			color: #fff;
			font-size: 18px;
			line-height: 40px;
			}
			}
			.show-block-main2{
			width: 100%;
			padding:40px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			}
			.black-important-card-inside{
			width: 100%;
			display: flex;
			flex-direction: column;
			}
			.black-important-card-line{
			display: flex;
			width: 100%;
			padding:4px 0;
			}
			.fadantongjiEcharts{
			width: 100%;
			height: 100%;
			}
			.from-box-line{
			width: 40%;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 20px;
			}
			.from-box-line2{
			width: 60%;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 20px;
			}
			.dayXjPieEcharts{
			width: 100%;
			height: 50%;

			}
			.dayXjZhuEcharts{
			width: 100%;
			height: 100%;
			}
			.table-conten{
			height: 570px;
			overflow: hidden;
			}
			</style>