进入：http://echarts.baidu.com/官网找到你想用的统计图
@{
ViewBag.Title = "注册折线图";
}
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<script src="~/Content/datePicker/WdatePicker.js"></script>
<div class="form-inline mt-20 ml-100" >
<div class="form-group">
<label for="exampleInputName2">时间：</label>
<input type='text' class="form-control" id="tisStartTime" name='bdate' onclick="WdatePicker();" readonly value="@ViewBag.bdate" />
<label for="exampleInputName2">到</label>
<input type='text' class="form-control" id="titsEndTime" name='edate' onclick="WdatePicker();" readonly value="@ViewBag.edate" />
</div>
<button type="submit" class="btn btn-default" id="formSubmit" onclick="formSubmit()">检索</button>
<div class="form-control">
最大新增：<label id="maxNum">0</label> 最小新增：<label id="minNum">0</label>
</div>
</div>
<div id="container" style="height: 90%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var option = {
title: {
text: '注册新增折线图',
subtext: '当前仅显示七天数据'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [],
type: 'line',
}]
};
//请求数据初始化图表
function LineInit() {
var bdate = $("#tisStartTime").val();
var edate = $("#titsEndTime").val();
$.get("请求接口", { bdate: bdate, edate: edate }, function (datas) {
//注意这里是从后台获取数据，传到前端是一个json数据，然后给横坐标和纵坐标赋值，这是需要转化成数组
option.xAxis.data = [];
option.series[0].data = [];
$('#maxNum').html(datas.max);
$('#minNum').html(datas.min);
$.each(datas.data, function () {
option.xAxis.data.push(this.idate);
option.series[0].data.push(this.register);
})
var chart = echarts.init(document.getElementById("container"));
chart.setOption(option);
}, 'json');
}
$(function () {
LineInit();
});
function formSubmit() {
LineInit();
}
</script>
</body>
</html>