master

分支 (1)

管理

管理

master

echarts_chart_collection
/
echart.html

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>图表合集</title>
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="./css/step.css">
		<link rel="stylesheet" href="./css/index.css">
	</head>

	<body>
		<div class="daohang">
			<ul class="nav nav-pills nav-stacked">
				<li role="presentation" class="active">
					<a href="#index_line">折线图</a>
				</li>
				<li role="presentation">
					<a href="#index_bar">柱形图</a>
				</li>
				<li role="presentation">
					<a href="#index_pie">饼图</a>
				</li>
				<li role="presentation">
					<a href="#index_gauge">仪表盘</a>
				</li>
				<li role="presentation">
					<a href="#index_water">水滴图</a>
				</li>
				<li role="presentation">
					<a href="#index_radar">雷达图</a>
				</li>
				<li role="presentation">
					<a href="#index_bing">3D饼图</a>
				</li>
				<li role="presentation">
					<a href="#index_other">其他</a>
				</li>
				<li role="presentation">
					<a href="#index_progress">进度条</a>
				</li>
				<li role="presentation">
					<a href="#index_bzt">步骤条</a>
				</li>
				<li role="presentation">
					<a href="#index_map">地图</a>
				</li>
			</ul>
		</div>

		<div class="container">
			<h1 id="index_line">折线图</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-3"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-4"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-5"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-6"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-7"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="line-8"></div>
					</div>
				</div>
			</div>

			<h1 id="index_bar">柱形图</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-3"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-4"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-5"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-6"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-7"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-8"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-9"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-10"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-11"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-12"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-13"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-14"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-15"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-16"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-17"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-18"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-19"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-20"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-21"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-22"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-23"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-24"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-25"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-26"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-27"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bar-28"></div>
					</div>
				</div>
			</div>
			<h1 id="index_pie">饼图</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-3"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-4"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-5"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-6"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-7"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-8"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-9"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-10"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-11"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie-12"></div>
					</div>
				</div>
			</div>
			<h1 id="index_gauge">仪表盘</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-3"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-4"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-5"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-6"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-7"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="gauge-8"></div>
					</div>
				</div>
			</div>
			<h1 id="index_water">水滴图</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="water-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="water-2"></div>
					</div>
				</div>
			</div>
			<h1 id="index_radar">雷达图</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 7rem;">
						<div class="chart text-center" id="radar-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 7rem;">
						<div class="chart text-center" id="radar-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 7rem;">
						<div class="chart text-center" style="background: #07183E;" id="radar-3"></div>
					</div>
				</div>
			</div>
			<h1 id="index_bing">3D饼图</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bing-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="bing-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie_3d"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie_3d-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="pie_3d-3"></div>
					</div>
				</div>
			</div>
			<h1 id="index_other">其他</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="other-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="other-2"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="other-3"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="chart_word"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="chart_circle"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="chart_text"></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="other-4"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center" id="chart_text2"></div>
					</div>
				</div>
			</div>
			<h1 id="index_progress">进度条</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6">
					<div class="chart-wrap" style="height: 5rem;">
						<div class="chart text-center circleChart" id="circle-1"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="mid-rank-wrap">
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目1</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">80%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目2</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">70%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目3</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">65%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目4</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">50%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目5</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">48%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目6</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">48%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目7</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">48%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">项目8</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">48%</div>
							</div>
						</div>
						<div class="mid-rank-item">
							<div class="flex align-center justify-center">
								<div class="mid-rank-item-left">其他</div>
								<div class="flex-item mid-rank-item-center">
									<div class="bt-progress">
										<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
										</div>
									</div>
								</div>
								<div class="mid-rank-item-right">45%</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<h1 id="index_bzt">步骤条</h1>
			<div class="row">
				<div class="col-sm-12 col-md-6 ">
					<div class="box">
						<div class="eis-stepContents">
							<div class="eis-stepContent">
								<h2>第一步</h2>
							</div>
							<div class="eis-stepContent">
								<h2>第二步</h2>
							</div>
							<div class="eis-stepContent">
								<h2>第三步</h2>
							</div>
							<div class="eis-stepContent">
								<h2>第四步</h2>
							</div>
							<div class="eis-stepContent">
								<h2>第五步</h2>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-12 col-md-6 ">
					<div class="box2">
						<div class="eis-stepContents">
							<div class="eis-stepContent">
								<h2>第一步</h2>
							</div>
							<div class="eis-stepContent">
								<h2>第二步</h2>
							</div>
							<div class="eis-stepContent">
								<h2>第三步</h2>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12 col-md-6">
					<div class="common-tabbar-wrap tabbar1">
						<div class="common-tabbar-item tabbar-active" data-type="1">全市工业企业开工情况</div>
						<div class="common-tabbar-item" data-type="2">全市第三产业复工情况</div>
					</div>
				</div>
			</div>
			<h1 id="index_map">地图：基础版本</h1>
			<!-- <div class="row">
				<div class="col-sm-12 col-md-12">
					<div class="iframe-wrap">
						<iframe src="map_1.html" frameborder="0"></iframe>
					</div>
				</div>
			</div> -->

			<h1>地图：分段图例</h1>
			<!-- <div class="row">
				<div class="col-sm-12 col-md-12">
					<div class="iframe-wrap">
						<iframe src="map_2.html" frameborder="0"></iframe>
					</div>
				</div>
			</div> -->

			<h1>地图：密集区域分隔</h1>
			<!-- <div class="row">
				<div class="col-sm-12 col-md-12">
					<div class="iframe-wrap">
						<iframe src="./map_line.html" frameborder="0"></iframe>
					</div>
				</div>
			</div> -->

			<!-- <h1>地图：带坐标点</h1>
    <div class="row">
      <div class="col-sm-12 col-md-12">
        <div class="iframe-wrap">
          <iframe src="map_3.html" frameborder="0"></iframe>
        </div>
      </div>
    </div> -->

		</div>

		<script src="./js/rem.js"></script>
		<script src="./js/jquery-1.8.3.min.js"></script>
		<script src="./js/echarts4.9.min.js"></script>
		<script src="./js/echarts-wordcloud.js"></script>
		<!-- <script src="./js/rc_ksh.js"></script> -->
		<script src="./js/echarts-liquidfill.min.js"></script>
		<script src="./js/highcharts.js"></script>
		<script src="./js/highcharts-3d.js"></script>
		<script src="./js/highcharts-zh_CN.js"></script>
		<script src="./js/radialindicator.js"></script>
		<script src="./js/circleChart.min.js"></script>
		<script src="./js/step.js"></script>
		<script src="./js/common.js"></script>
		<script src="./js/S_mock.js"></script>
		<script src="./js/chart.js"></script>
		<script src="./js/chart-bar.js"></script>
		<script src="./js/chart-other.js"></script>
		<script src="./js/chart-pie.js"></script>
		<script src="./js/index.js"></script>
		<script>
			$('.daohang li').click(function() {
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
			})
			$('.common-tabbar-item').click(function() {
				$(this).siblings().removeClass('tabbar-active');
				$(this).addClass('tabbar-active');
				var type = $(this).attr('data-type');
			})
		</script>
	</body>

</html>