<?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>
echarts图表demo
最新推荐文章于 2021-09-13 19:54:25 发布