$(function() {
	echart_1();
	echart_2();
	echart_3();
	echart_4();
	echart_5();
	echart_6();
	echart_7();
	echart_map();

	function echart_1() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('chart_1'));
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '2%',
				right: '4%',
				bottom: '14%',
				top: '16%',
				containLabel: true
			},

			legend: {
				data: ['2021', '2020'],
				right: 10,
				top: 12,
				textStyle: {
					color: "#fff"
				},
				itemWidth: 12,
				itemHeight: 10,
				// itemGap: 35
			},
			xAxis: {
				type: 'category',
				data: ['流通量', '总持征量', '新增持证量', '外借册次', '调阅册次', '读者活动场次', '读者活动参与人次'],
				axisLine: {
					lineStyle: {
						color: 'white'

					}
				},
				axisLabel: {
					// interval: 0,
					// rotate: 40,
					textStyle: {
						fontFamily: 'Microsoft YaHei'
					}
				},
			},

			yAxis: {
				type: 'value',
				max: '3000000',
				axisLine: {
					show: false,
					lineStyle: {
						color: 'white'
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,0.3)'
					}
				},
				axisLabel: {}
			},
			"dataZoom": [{
				"show": true,
				"height": 12,
				"xAxisIndex": [
					0
				],
				bottom: '8%',
				"start": 10,
				"end": 90,
				handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
				handleSize: '110%',
				handleStyle: {
					color: "#d3dee5",

				},
				textStyle: {
					color: "#fff"
				},
				borderColor: "#90979c"
			}, {
				"type": "inside",
				"show": true,
				"height": 15,
				"start": 1,
				"end": 35
			}],
			series: [{
					name: '2021',
					type: 'bar',
					barWidth: '15%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#fccb05'
							}, {
								offset: 1,
								color: '#f5804d'
							}]),
							barBorderRadius: 12,
						},
					},
					data: [1761057, 267034, 26482, 1074037, 10255, 914, 2966000]
				},
				{
					name: '2020',
					type: 'bar',
					barWidth: '15%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#8bd46e'
							}, {
								offset: 1,
								color: '#09bcb7'
							}]),
							barBorderRadius: 11,
						}

					},
					data: [1123272, 249472, 21698, 639054, 7537, 718, 3066000]
				},
			]
		};

		var app = {
			currentIndex: -1,
		};
		setInterval(function() {
			var dataLen = option.series[0].data.length;

			// 取消之前高亮的图形
			myChart.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				dataIndex: app.currentIndex
			});
			app.currentIndex = (app.currentIndex + 1) % dataLen;
			//console.log(app.currentIndex);
			// 高亮当前图形
			myChart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: app.currentIndex,
			});
			// 显示 tooltip
			myChart.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: app.currentIndex
			});


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

	//电子商务销售额、订单数
	function echart_2() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('chart_2'));
		let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		let goToSchool = ["137867", "114997", "142600", "119131", "123730", "132374", "187351", "182271",
			"133964",
			"155377", "132980", "119268"
		]
		let goOutSchool = ["108035", "0", "13337", "25715", "50771", "103570", "163268", "178084", "142463",
			"156507",
			"148004", "136753"
		]
		option = {
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'transparent',
				axisPointer: {
					lineStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: 'rgba(126,199,255,0)' // 0% 处的颜色
							}, {
								offset: 0.5,
								color: 'rgba(126,199,255,1)' // 100% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(126,199,255,0)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
				},
				formatter: (p) => {
					let dom = `<div style="width: 110px;
        			height: 50px;;color:#fff;position: relative;">
        				<svg style="position: absolute;top: 50%;
        			left: 50%;
        			transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="120" height="65" viewBox="0 0 84 55">
        			  <defs>
        				<style>
        				  .cls-1 {
        					fill: #07172c;
        					fill-opacity: 0.8;
        					stroke: #a7d8ff;
        					stroke-linejoin: round;
        					stroke-opacity: 0.2;
        					stroke-width: 1px;
        					fill-rule: evenodd;
        				  }
        				</style>
        			  </defs>
        					<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
        					transform="translate(-258.5 -592.5)" />
        					</svg>
        					<div style="padding: 4px 30px 4px 14px;display: flex;
        					justify-content: center;
        					align-items: center;
        					flex-direction: column;position: relative;z-index: 1;">
        						<div style="margin-bottom: 4px;width:100%;display:${p[0]?'flex':'none'};justify-content:space-between;align-items:center;">
        							<span style="font-size:14px;color:#7ec7ff;">${p[0]?p[0].seriesName:''}</span>
        							<span style="font-size:14px;color:#fff;">${p[0]?p[0].data:''}</span>
        						</div>
        						<div style="width:100%;height:100%;display:${p[1]?'flex':'none'};justify-content:space-between;align-items:center;">
        							<span style="font-size:14px;color:#7ec7ff;">${p[1]?p[1].seriesName:''}</span>
        							<span style="font-size:14px;color:#fff;">${p[1]?p[1].data:''}</span>
        						</div>
        					</div>
        				</div>`
					return dom
				}
			},
			legend: {
				align: "left",
				right: '5%',
				top: '10%',
				type: 'plain',
				textStyle: {
					color: '#7ec7ff',
					fontSize: 12
				},
				// icon:'rect',
				itemGap: 25,
				itemWidth: 22,
				icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',

				data: [{
						name: '2021'
					},
					{
						name: '2020'
					}
				]
			},
			grid: {
				top: '15%',
				left: '16%',
				right: '4%',
				bottom: '15%',
				// containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				axisLine: { //坐标轴轴线相关设置。数学上的x轴
					show: true,
					lineStyle: {
						color: '#233653'
					},
				},
				axisLabel: { //坐标轴刻度标签的相关设置
					textStyle: {
						color: '#7ec7ff',
						padding: 10,
						fontSize: 14
					},
					formatter: function(data) {
						return data
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#192a44'
					},
				},
				axisTick: {
					show: false,
				},
				data: xLabel
			}],
			yAxis: [{
				name: '人次',
				nameTextStyle: {
					color: "#7ec7ff",
					fontSize: 12,
					padding: 0
				},
				min: 0,
				splitLine: {
					show: true,
					lineStyle: {
						color: '#192a44'
					},
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "#233653"
					}

				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#7ec7ff',
						padding: 12
					},
					formatter: function(value) {
						if (value === 0) {
							return value
						}
						return value
					}
				},
				axisTick: {
					show: false,
				},
			}],
			series: [{
				name: '2021',
				type: 'line',
				symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
				showAllSymbol: true,
				symbolSize: 0,
				smooth: true,
				nameTextStyle: {
					fontSize: 18,
					padding: 10
				},
				lineStyle: {
					normal: {
						width: 5,
						color: "rgba(25,163,223,1)", // 线条颜色
					},
					borderColor: 'rgba(0,0,0,.4)',
				},
				itemStyle: {
					color: "rgba(25,163,223,1)",
					borderColor: "#646ace",
					borderWidth: 2

				},
				tooltip: {
					show: true
				},
				areaStyle: { //区域填充样式
					normal: {
						//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: "rgba(25,163,223,.3)"


							},
							{
								offset: 1,
								color: "rgba(25,163,223, 0)"
							}
						], false),
						shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
						shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
					}
				},
				data: goToSchool
			}, {
				name: '2020',
				type: 'line',
				symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
				showAllSymbol: true,
				symbolSize: 0,
				smooth: true,
				lineStyle: {
					normal: {
						width: 5,
						color: "#00FFFF", // 线条颜色
					},
					borderColor: 'rgba(0,0,0,.4)',
				},
				itemStyle: {
					color: "rgba(10,219,250,1)",
					borderColor: "#646ace",
					borderWidth: 2

				},
				tooltip: {
					show: true
				},
				areaStyle: { //区域填充样式
					normal: {
						//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: "rgba(10,219,250,.3)"
							},
							{
								offset: 1,
								color: "rgba(10,219,250, 0)"
							}
						], false),
						shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
						shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
					}
				},
				data: goOutSchool
			}]
		};
		let len = 0
		setInterval(() => {
			if (len === xLabel.length) {
				len = 0
			}
			myChart.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: len,
			})
			len++
		}, 1000)

		if (option) {
			myChart.setOption(option);
		}
	}

	function echart_4() {

		var myChart = echarts.init(document.getElementById('linshi_zdy'));
		var data = [11, 10, 10, 9, 8, 8, 8, 8, 8, 7, 6, 6, 6, 5, 5, 5];
		// 指定图表的配置项和数据
		var option = {
			dataset: {
				source: [
					['score', 'amount', 'product'],
					[89.3, 11, '安庆'],
					[57.1, 10, '芜湖'],
					[74.4, 10, '淮南'],
					[50.1, 9, '滁州'],
					[52.1, 8, '合肥'],
					[89.3, 8, '六安'],
					[89.3, 8, '马鞍山'],
					[89.3, 8, '宣城'],
					[89.3, 8, '黄山'],
					[89.3, 7, '阜阳'],
					[89.3, 6, '淮北'],
					[89.3, 6, '宿州'],
					[89.3, 6, '蚌埠'],
					[89.3, 5, '亳州'],
					[89.3, 5, '铜陵'],
					[89.3, 5, '池州'],
				]
			},
			grid: {
				containLabel: true,

				    right: -5,
				    top: 15,//拉伸距离顶部高度
				    bottom: 0,//拉伸距离底部高度
				    containLabel: true

			},
			xAxis: {
				name: 'amount',
				show: false
			},
			yAxis: {
				inverse: true,
				type: 'category',
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#fff' //这里用参数代替了
					}
				},
			},
			tooltip: {
								trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
								axisPointer: {// 坐标轴指示器，坐标轴触发有效
									type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
								}
			},
			series: [{
				type: 'bar',
				barWidth: 18,
				barCategoryGap:'80%',
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				},

				itemStyle: {
					//通常情况下：
					normal: {
						barBorderRadius: 20,
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							offset: 0,
							color: '#2550dd'
						}, {
							offset: 1,
							color: '#2cdede'
						}]),
						shadowColor: 'rgba(0, 0, 0, 0.4)',
						shadowBlur: 20
					},
				},
				label: {
					show: true, //开启显示
					position: 'right', //在上方显示
					textStyle: { //数值样式
						color: '#fff',
						fontSize: '15'
					}
				},
			}]
		};
		myChart.setOption(option);
	}

	// echart_map安徽地图
	function echart_map() {
		var myChart = echarts.init(document.getElementById('chart_map'));

		function showProvince() {
			var geoCoordMap = {

			};
			var data = [{
					name: '阜阳市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '合肥市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '芜湖市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				},
				{
					name: '马鞍山',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '淮南市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '淮北市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '安庆市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '六安市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业2家<br/>电商服务站目前数量94个站点<br/>广西乐村淘科技有限公司、广西国际电子商务中心<br/>主要推广的产品有西林沙糖桔、麻鸭、姜晶等地理标志保护产品'
					]
				}, {
					name: '池州市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '铜陵市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '黄山市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '宣城市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '亳州市',
					value: [50,
						'电商进农村示范县：<br/>项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...'
					]
				}, {
					name: '蚌埠市',
					value: [50,
						'项目承建企业1家<br/>电商服务站目前数量85个站点<br/>参加电商培训人数1500人<br/>特色粮经作物：包括蚕桑、火麻、龙骨花、中药材、红薯、马铃薯、小杂粮等。<br/>主要承建内容:县级服务中心建设、乡镇级服务站、村级服务点建设'
					]
				}, {
					name: '宿州市',
					value: [50, '项目承建企业24家<br/>电商服务站目前数量24个站点<br/>广西金岸科技有限公司等企业均以优秀标准验收<br/>主要推广特产富川脐橙...']
				}, {
					name: '滁州市',
					value: [50,
						'项目承建企业1家<br/>电商服务站目前数量60个站点<br/>参加电商培训人数1500人<br/>特色产品：靖西绣球、靖西壮锦、靖西东利大香儒<br/>主要承建内容:靖西各镇乡村服务站点建设'
					]
				}
			];
			var max = 480,
				min = 9;
			var maxSize4Pin = 50,
				minSize4Pin = 20;
			var convertData = function(data) {
				var res = [];
				for (var i = 0; i < data.length; i++) {
					var geoCoord = geoCoordMap[data[i].name];

					if (geoCoord) {
						res.push({
							name: data[i].name,
							value: geoCoord.concat(data[i].value),
						});
					}
				}
				return res;
			};

			myChart.setOption(option = {
				tooltip: {
					trigger: 'item',
					formatter: function loadData(result) {
						return result.name + '<br />' + result.value[3];
					}
				},
				geo: {
					zoom: 1.2,
					show: true,
					map: '安徽',
					mapType: '安徽',
					label: {
						normal: {
							show: true,
							textStyle: {
								color: "#4bf316"
							}
						},
						emphasis: {
							show: true,
							textStyle: {
								color: '#fff'
							}
						},
					},
					roam: true,
					itemStyle: {
						normal: {
							borderColor: 'rgba(147, 235, 248, 1)',
							borderWidth: 2,
							areaColor: {
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 0.8,
								colorStops: [{
									offset: 0,
									color: 'rgba(175,238,238, 0)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(   47,79,79, .2)' // 100% 处的颜色
								}],
								globalCoord: false // 缺省为 false
							},
							shadowColor: 'rgba(128, 217, 248, 1)',
							shadowOffsetX: -2,
							shadowOffsetY: 2,
							shadowBlur: 10
						},
						emphasis: {
							areaColor: '#389BB7',
							borderWidth: 0
						}
					}
				},
				series: [{
						name: '电商进农村示范县',
						type: 'scatter',
						coordinateSystem: 'geo',
						symbol: 'pin',
						symbolSize: function(val) {
							var a = (maxSize4Pin - minSize4Pin) / (max - min);
							var b = minSize4Pin - a * min;
							b = maxSize4Pin - a * max;
							return a * val[2] + b;
						},
						label: {
							normal: {
								formatter: '{b}',
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: 10,
								}
							}
						},
						itemStyle: {
							normal: {
								color: 'red', //标志颜色
							}
						},
						zlevel: 6,
						data: convertData(data),
					},
					{
						type: 'effectScatter',
						coordinateSystem: 'geo',
						data: convertData(data.sort(function(a, b) {
							return b.value - a.value;
						}).slice(0, 47)),
						symbolSize: function(val) {
							return val[2] / 10;
						},
						showEffectOn: 'render',
						rippleEffect: {
							brushType: 'stroke'
						},
						hoverAnimation: true,
						itemStyle: {
							normal: {
								color: '#05C3F9',
								shadowBlur: 10,
								shadowColor: '#05C3F9'
							}
						},
						zlevel: 1
					},

				]
			});
		}
		showProvince();
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	}


	function echart_3() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('chart_3'));
		var legendData = ['2021', '2020']; //图例

		var indicator = [{
				text: '成人',
				max: 20000,
			},
			{
				text: '少儿',
				max: 10000
			},
			{
				text: '残疾',
				max: 10
			},
			{
				text: '老年',
				max: 150,
				//  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
			},
			{
				text: '团体',
				max: 50
			},
			{
				text: '其他',
				max: 100
			}

		];
		var dataArr = [{
				value: [18285, 8018, 8, 108, 33, 50],
				name: legendData[0],
				label: {
					normal: {
						show: true,
						formatter: function(params) {
							return params.value;
						}
					}
				},
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#4A99FF',
							// shadowColor: '#4A99FF',
							// shadowBlur: 10,
						},
						shadowColor: '#4A99FF',
						shadowBlur: 10,
					},
				},

				areaStyle: {
					normal: { // 单项区域填充样式
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 1, //左
							y2: 1, //上
							colorStops: [{
								offset: 0,
								color: '#4A99FF'
							}, {
								offset: 0.5,
								color: 'rgba(0,0,0,0)'
							}, {
								offset: 1,
								color: '#4A99FF'
							}],
							globalCoord: false
						},
						opacity: 1 // 区域透明度
					}
				}
			},
			{
				value: [15758, 5779, 8, 100, 15, 25],
				name: legendData[1],
				label: {
					normal: {
						show: true,
						formatter: function(params) {
							return params.value;
						}
					}
				},
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#4BFFFC',
							// shadowColor: '#4BFFFC',
							// shadowBlur: 10,
						},
						shadowColor: '#4BFFFC',
						shadowBlur: 10,
					},
				},
				areaStyle: {
					normal: { // 单项区域填充样式
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 1, //左
							y2: 1, //上
							colorStops: [{
								offset: 0,
								color: '#4BFFFC'
							}, {
								offset: 0.5,
								color: 'rgba(0,0,0,0)'
							}, {
								offset: 1,
								color: '#4BFFFC'
							}],
							globalCoord: false
						},
						opacity: 1 // 区域透明度
					}
				}
			}
		];
		var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
		option = {

			title: {
				show: false,
				text: "数学薄弱知识点分析",
				x: "4%",

				textStyle: {
					color: '#fff',
					fontSize: '22'
				},
				subtextStyle: {
					color: '#90979c',
					fontSize: '16',

				},
			},
			color: colorArr,
			legend: {
				orient: 'vertical',
				icon: 'circle', //图例形状
				data: legendData,
				bottom: 35,
				right: 40,
				itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
				itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
				itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
				textStyle: {
					fontSize: 12,
					color: '#00E4FF',
				},
			},
			radar: {
				// shape: 'circle',
				name: {
					textStyle: {
						color: '#fff',
						fontSize: 12
					},
				},
				indicator: indicator,
				splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
					show: true,
					areaStyle: { // 分隔区域的样式设置。
						color: ['rgba(255,255,255,0)',
							'rgba(255,255,255,0)'
						], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
					}
				},
				axisLine: { //指向外圈文本的分隔线样式
					lineStyle: {
						color: '#153269'
					}
				},
				splitLine: {
					lineStyle: {
						color: '#113865', // 分隔线颜色
						width: 1, // 分隔线线宽
					}
				},
			},
			series: [{
				type: 'radar',
				symbolSize: 6,
				// symbol: 'angle',
				data: dataArr
			}]
		};
		myChart.setOption(option);
	}

	function echart_5() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('chart_5'));
		myChart.clear();
		option = {

			legend: {
				top: "20",
				x: "center",
				textStyle: {
					fontSize: 20,
					color: "rgba(73, 237, 255, 1.0)"
				},
				icon: "path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z",
				itemWidth: 8, // 设置宽度
				itemHeight: 8, // 设置高度、
				itemGap: 12 // 设置间距
			},
			tooltip: {
				show: true,
				trigger: "axis", //axis , item
				backgroundColor: "RGBA(0, 49, 85, 1)",
				borderColor: "rgba(0, 151, 251, 1)",
				borderWidth: 1,
				borderRadius: 0,
				textStyle: {
					color: "#36ecfc",
					fontSize: 15,
					align: "left"
				}
			},
			grid: {
				right: "5%",
				top: "20%",
				left: "5%",
				bottom: "5%",
				containLabel: true
			},
			xAxis: {
				type: "category",
				boundaryGap: true,
				data: ["1月", "2月", '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				axisLabel: {
					//坐标轴刻度标签的相关设置。
					interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
					//	margin:15,
					textStyle: {
						color: "#65D5FF",
						fontStyle: "normal",
						fontSize: 13
					}
				},
				axisTick: {
					//坐标轴刻度相关设置。
					show: false
				},
				axisLine: {
					//坐标轴轴线相关设置
					lineStyle: {
						color: "rgba(77, 128, 254, 0.2)"
					}
				},
				splitLine: {
					//坐标轴在 grid 区域中的分隔线。
					show: true,
					lineStyle: {
						color: "rgba(77, 128, 254, 0.2)"
					}
				}
			},
			yAxis: [{
				type: "value",
				splitNumber: 3,
				axisLabel: {
					textStyle: {
						color: "#65D5FF",
						fontStyle: "normal",
						fontSize: 14
					}
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "rgba(77, 128, 254, 0.2)"
					}
				}
			}],
			series: [{
				name: '2021',
				type: "pictorialBar",
				barWidth: "100%",
				stack: "总量",
				label: {
					normal: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						color: {
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: "rgba(0, 151, 251, 1)" // 0% 处的颜色
								},
								{
									offset: 1,
									color: "rgba(0, 34, 66, 0.2)" // 100% 处的颜色
								}
							],
							globalCoord: false // 缺省为 false
						} //渐变颜色
					}
				},
				symbol: "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

				data: [3585275, 3161046, 4361852, 4761753, 5096203, 4347295, 4041834, 4848033,
					2623705, 5112621, 7694815, 5887385
				]
			}, {
				name: '2020',
				type: "pictorialBar",
				barWidth: "100%",
				stack: "总量",
				label: {
					normal: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						color: {
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: "rgba(48, 236, 166, 1)" // 0% 处的颜色
								},
								{
									offset: 1,
									color: "rgba(0, 34, 66, 0.2)" // 100% 处的颜色
								}
							],
							globalCoord: false // 缺省为 false
						} //渐变颜色
					}
				},
				symbol: "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

				data: [1342623, 1927451, 1967608, 1566588, 1722415, 1702124, 1889712, 1987630,
					1845035, 1887978, 2312239, 2125446
				]
			}],
		};
		myChart.setOption(option);
	}

	function echart_6() {
		var myChart = echarts.init(document.getElementById('chart_6'));
		var img =
			'data:image/png;base64, ';

		var trafficWay = [{
			name: '社自室',
			value: 368055
		}, {
			name: '文学室',
			value: 161261
		}, {
			name: '报纸室',
			value: 139461
		}, {
			name: '期刊室',
			value: 203593
		}, {
			name: '少儿室',
			value: 238104
		}, {
			name: '低幼室',
			value: 83463
		}, {
			name: '自习室',
			value: 104055
		}, {
			name: '参考咨询',
			value: 775
		}, {
			name: '地方文献',
			value: 1692
		}, {
			name: '古籍室',
			value: 489
		}, {
			name: '残障室',
			value: 3302
		}];

		var data = [];
		var color = ['#00ffff', '#3dffc8', '#409B5C', '#27ff0f', '#006ced', '#6c17ff', '#b917ff', '#ffe000',
			'#ffa800',
			'#ff5b00', '#ff6989', '#ff3000', '#ff931f', '#FFF5EE'
		]
		for (var i = 0; i < trafficWay.length; i++) {
			data.push({
				value: trafficWay[i].value,
				name: trafficWay[i].name,
				itemStyle: {
					normal: {
						borderWidth: 5,
						shadowBlur: 20,
						borderColor: color[i],
						shadowColor: color[i]
					}
				}
			}, {
				value: 2,
				name: '',
				itemStyle: {
					normal: {
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						color: 'rgba(0, 0, 0, 0)',
						borderColor: 'rgba(0, 0, 0, 0)',
						borderWidth: 0
					}
				}
			});
		}
		var seriesOption = [{
			name: '',
			type: 'pie',
			left: '10%',
			clockWise: false,
			radius: [105, 109],
			hoverAnimation: false,
			itemStyle: {
				normal: {
					label: {
						show: true,
						position: 'outside',
						color: '#ddd',
						formatter: function(params) {
							var percent = 0;
							var total = 0;
							for (var i = 0; i < trafficWay.length; i++) {
								total += trafficWay[i].value;
							}
							percent = ((params.value / total) * 100).toFixed(2);
							if (params.name !== '') {
								return params.name + '\n' + '\n' + '占百分比：' + percent + '%';
							} else {
								return '';
							}
						},
					},
					labelLine: {
						length: 30,
						length2: 100,
						show: true,
						color: '#00ffff'
					}
				}
			},
			data: data
		}];
		option = {

			color: color,
			title: {
				text: '2021年各阅览室读者接待量',
				top: '48%',
				textAlign: "center",
				left: "49%",
				textStyle: {
					color: '#fff',
					fontSize: 15,
					fontWeight: '400'
				}
			},
			graphic: {
				elements: [{
					type: "image",
					z: 3,
					style: {
						image: img,
						width: 178,
						height: 178
					},
					left: 'center',
					top: 'center',
					position: [100, 100]
				}]
			},
			tooltip: {
				show: false
			},
			legend: {
				icon: "circle",
				orient: 'vertical',
				// x: 'left',
				data: ['社自室', '文学室', '报纸室', '期刊室', '少儿室', '低幼室', '自习室', '参考咨询', '地方文献', '古籍室', '残障室'],
				right: 0,
				bottom: 20,
				align: 'right',
				textStyle: {
					color: "#fff"
				},
				itemGap: 20
			},
			toolbox: {
				show: false
			},
			series: seriesOption
		}

		if (option) {
			myChart.setOption(option);
		}
	}

	function echart_7() {
		var myChart = echarts.init(document.getElementById('chart_7'));
		var option = {
			tooltip: {
				trigger: 'item',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '2%',
				right: '4%',
				bottom: '2%',
				top: '16%',
				containLabel: true
			},
			legend: {
				data: ['2019', '2020', '2021', '文献传递占比'],
				left: '7%',
				top: '5%',
				textStyle: {
					color: "#f4f4f4"
				},
				itemWidth: 15,
				itemHeight: 10,
				itemGap: 25
			},
			xAxis: {
				type: 'category',
				data: ['讲座', '培训', '展览', '巡展巡讲', '其他活动'],
				axisLine: {
					lineStyle: {
						color: '#ffffff'

					}
				},
				axisLabel: {
					textStyle: {
						color: "#ffffff"
					}
				},
			},

			yAxis: [{
					type: 'value',
					axisLine: {
						show: false,
						lineStyle: {
							color: '#cdd5e2'
						}
					},
					splitLine: {
						show: false,
					},
					axisLabel: {
						textStyle: {
							color: "#ffffff"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#ffffff"
						}
					},
				},
				{
					type: "value",
					name: "百分比",
					nameTextStyle: {
						color: "#ffffff"
					},
					position: "right",
					axisLine: {
						lineStyle: {
							color: "#ffffff"
						}
					},
					splitLine: {
						show: false,
					},
					axisLabel: {
						show: true,
						formatter: "{value} %", //右侧Y轴文字显示
						textStyle: {
							color: "#ffffff"
						}
					}
				}
			],
			series: [{
					name: '2019',
					type: 'bar',
					barWidth: '12px',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#29acff'
							}, {
								offset: 1,
								color: '#4bdfff'
							}]),
							barBorderRadius: 6,
						},
					},
					data: [84, 220, 22, 184, 319]
				},
				{
					name: '2020',
					type: 'bar',
					barWidth: '12px',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#3d93f2'
							}, {
								offset: 1,
								color: '#5dc1fd'
							}]),
							barBorderRadius: 6,
						}

					},
					data: [67, 166, 37, 255, 193]
				},
				{
					name: '2021',
					type: 'bar',
					barWidth: '12px',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#01c871'
							}, {
								offset: 1,
								color: '#55f49c'
							}]),
							barBorderRadius: 6,
						}
					},
					data: [70, 304, 41, 206, 293]
				}, {
					name: "文献传递占比",
					type: "line",
					yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
					smooth: false, //平滑曲线显示

					symbol: "circle", //标记的图形为实心圆
					symbolSize: 8, //标记的大小
					itemStyle: {
						normal: {
							color: '#00ffff',
							borderColor: 'rgba(0, 170, 255, 0.5)', //圆点透明 边框
							borderWidth: 5,

						},

					},
					lineStyle: {
						color: "#00ffff"
					},

					data: [31, 32, 1, 35, 1]
				}
			]
		};

		if (option) {
			myChart.setOption(option);
		}
	}
});
