echarts图表demo

最新推荐文章于 2021-09-13 19:54:25 发布

影天

最新推荐文章于 2021-09-13 19:54:25 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xwlyun/article/details/43793893

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<?php

$header = 'line';

?>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>line</title>
<script type="text/javascript" src="js/jquery_172.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="main">
	<?php include_once('global/nav.php');?>
	<div class="mcontent">
		<table class="tablist" width="100%" border="0" cellspacing="0" cellpadding="0">
			<thead>
			<tr>
				<td>line demo</td>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>
					<div id="demo1" style="height:400px;"></div>
				</td>
			</tr>
			</tbody>
			<tfoot>
			<tr>
				<td></td>
			</tr>
			</tfoot>
		</table>
	</div>
</div>

<!-- 根须需要引用必要的js -->
<script type="text/javascript" src="js/echarts/dist/echarts.js"></script>
<script type="text/javascript" src="js/echarts/dist/chart/line.js"></script>
<script type="text/javascript" src="js/echarts/dist/chart/bar.js"></script>

<script type="text/javascript">

	// echarts引用文件路径
	require.config({
		path:{echarts:'js/echarts/dist'}
	});

	require(
		[
			'echarts',
			'echarts/chart/line',
			'echarts/chart/bar'
		],
		function (ec){
			var myChart = ec.init(document.getElementById('demo1'));
			var option = {
				title:{
					text:'标准折线图',
					subtext:'子标题'
				},
				tooltip : {
					trigger: 'axis'	// item点/axis线
				},
				legend:{
					data: ['data1','data2']
				},
				toolbox: {
					show : true,
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						magicType : {show: true, type: ['line', 'bar']},	// 折线/柱形图切换注意对line.js/bar.js的引用
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				xAxis:[	// x轴
					{
						type:'category',	// 类型
						boundaryGap : false,	// true两边留空/false两边顶头
						data:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					}
				],
				yAxis:[	// y轴
					{
						type:'value',
						axisLabel : {
							formatter: '{value} °C'	// format字符串
						}
					}
				],
				series:[	// 数据集
					{
						name:'data1',
						type:'line',
						data:[112, 23, 45, 56, 233, 343, 454, 89, 1343, 123, 45, 123],
						markPoint : {	// 标记点
							data : [
								{type : 'max', name: '最大值'},
								{type : 'min', name: '最小值'}
							]
						},
						markLine : {	// 辅助线
							data : [
								{type : 'average', name: '平均值'}
							]
						}
					},
					{
						name:'data2',
						type:'line',
						data:[45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
					}
				]
			}
			myChart.setOption(option);
		}
	);

</script>

</body>
</html>