lincaoju.git - Gitblit

			@@ -1,7 +1,7 @@
			<!DOCTYPE html>
			<html>
			<head>
			<title>chart.html</title>
			<title>R1.html</title>
			<meta http-equiv="Expires" content="0" />
			<meta http-equiv="Cache" content="no-cache" />
			<meta http-equiv="Pragma" content="no-cache" />
			@@ -11,16 +11,29 @@
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
			<style>
			html, body, #main {
			html, body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			font-family: "Microsoft YaHei", sansserif;
			}

			#main {
			width: 530px;
			height: 100%;
			padding: 10px;
			box-sizing: border-box;
			background-color: #023852;
			}

			#yulian img:hover {
			box-sizing: border-box;
			border-bottom: 2px solid #3DC2E1;
			}
			</style>
			<script src="js/jquery-1.11.3.min.js"></script>
			<script src="js/echarts.js"></script>
			<script src="../js/echarts.js"></script>
			<script>
			function getQueryString(name) {
			var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)", "i");
			@@ -31,48 +44,191 @@
			return null;
			}

			$(function () {
			init();
			});
			window.onload = function () {
			init1();
			init2();
			}

			function init() {
			// 基于准备好的dom，初始化echarts图表
			var myChart = echarts.init(document.getElementById('main'));

			function init1() {
			var c1 = echarts.init(document.getElementById('c1'));
			var option = {
			tooltip: {
			show: true
			toolbox: {
			show: false,
			},
			calculable: true,
			series: [
			{
			name: "c1",
			type: 'pie',
			radius: ['100%', '70%'],
			center: ['30%', '50%'],
			itemStyle: {
			normal: {
			label: {
			show: false
			},
			labelLine: {
			show: false
			}
			},
			emphasis: {
			label: {
			show: true,
			position: 'center',
			textStyle: {
			fontSize: '15',
			fontWeight: 'bold'
			}
			}
			}
			},
			data: [
			{ value: 15, name: '专业大户' },
			{ value: 23, name: '民宿' },
			{ value: 0, name: '家族农场' },
			{ value: 2, name: '农民合作社' },
			{ value: 0, name: '产业化企业' },
			{ value: 8, name: '其它' }
			]
			}
			],
			legend: {
			data: ['销量']
			orient: 'vertical',
			x: 'right',
			y: 'center',
			textStyle: {
			color: '#fff',
			fontSize: 14
			},
			itemHeight: 22,
			data: ['专业大户', '民宿', '家族农场', '农民合作社', '产业化企业', '其它']
			}
			};
			c1.setOption(option);
			}

			function init2() {
			var c2 = echarts.init(document.getElementById('c2'));
			var option = {
			title: {
			text: " 接待游客数（人次）",
			show: true,
			textStyle: {
			color: '#41C2E1',
			fontSize: 16
			}
			},
			tooltip: {
			trigger: 'axis'
			},
			grid: {
			left: '0%',
			top: '0%',
			right: '0%',
			bottom: '0%',
			borderWidth: 0,
			containLabel: false
			},
			calculable: true,
			xAxis: [
			{
			type: 'category',
			data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
			boundaryGap: false,
			splitLine: {
			show: false
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#fff',
			fontSize: 14
			}
			},
			data: ['2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03']
			}
			],
			yAxis: [
			{
			type: 'value'
			type: 'value',
			splitLine: {
			show: false
			},
			axisLabel: {
			show: false,
			textStyle: {
			color: '#fff',
			fontSize: 14
			}
			}
			}
			],
			series: [
			{
			"name": "销量",
			"type": "bar",
			"data": [5, 20, 40, 10, 10, 20]
			name: "接待人次",
			type: 'line',
			smooth: true,
			itemStyle: {
			normal: {
			areaStyle: {
			type: 'default'
			}
			}
			},
			data: [2080, 1320, 1407, 1720, 1636, 1901]
			}
			]
			};

			// 为echarts对象加载数据
			myChart.setOption(option);
			c2.setOption(option);
			}
			</script>
			</head>
			<body>
			<div id="main">
			<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
			<span style="font-size: 20px; color: white; font-weight:600;">乡村产业概况</span>
			</div>

			<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style=" float: left; box-sizing: border-box; padding: 20px 0 0 20px;">
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>经济总产值</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">120</span> <span>万元</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>党组织数</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1.1</span> <span>个</span>
			</div>
			</div>
			</div>

			<div style="height: 250px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div id="c1" style="float: left; box-sizing: border-box; padding: 0 35px 0 20px; width: 100%; height: 100%;">
			</div>
			</div>

			<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style=" float: left; box-sizing: border-box; padding: 20px 0px 0 20px;">
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>民宿总收入</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1200</span> <span>万元</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>接待游客</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">28</span> <span>万人</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>民宿</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">23</span> <span>家</span>
			</div>
			</div>
			</div>

			<div style="height: 200px; width: 100%; float: left; padding-left: 0px; box-sizing: border-box;">
			<div id="c2" style="width: 110%; height: 120%; margin: 0 0 0 -30px;">
			</div>
			</div>
			</div>
			</body>
			</html>