@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Scripts.Render("~/bundles/CusJS")
@Styles.Render("~/Content/CusCSS")
</head>
<body>
<div class="index_det">
<header class="in_header">
<a href="index.html" class="logo_a"><img src="~/images/index01.png"></a>
<div class="index_menu">
@Html.Partial("_MenuPartial")
@Html.Action("LoginPartial", new { controller = "UserPartial" })
</div>
<div class="clear"></div>
</header>
<div class="clear"></div>
</div>
<div class="detail_con">
<div class="w1200">
<h2 class="his_h2">历史趋势图</h2>
<div class="his_map">
<div class="his_sear">
<span>请输入关键词</span>
<input type="text" class="sear_input" id="keyWord1" placeholder="">
<span class="sear_span01">+</span>
<input type="text" class="sear_input" id="keyWord2" placeholder="">
<span class="sear_span01">+</span>
<input type="text" class="sear_input" id="keyWord3" placeholder="">
<a class="sear_a01">查 询</a>
<span class="sear_span02">在结果中选择时间段</span>
<select class="sear_select" data-class="start" onchange="ChangeYear('start')">
@foreach (int item in ViewBag.yearListBegin)
{
<option value="@item">@item</option>
}
</select>
<select class="sear_select" data-class="stop" onchange="ChangeYear('stop')">
@foreach (int item in ViewBag.yearListEnd)
{
<option value="@item">@item</option>
}
</select>
<span>年</span>
</div>
<div class="map_line" id="main">
</div>
<script src="~/js/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis'
},
dataZoom: {
handleColor: '#ad8a64',
fillerColor: '#f1e6d8',
show: true,
start: 0,
end: 100
},
legend: {
//data: ['海关', '口岸', '关税']
data: ['']
},
backgroundColor: '#F3F2F1',
color: [
'#db0000', '#cade9a', '#ff8e4c', '#32cd32', '#6495ed',
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
],
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#e20800'
}
},
axisTick: {
lineStyle: {
color: '#e20800'
}
},
boundaryGap: false,
splitNumber: 10,
//data后面是一个数组对象，里面数据对应X轴的值，从后台传过来，现在是随机生成
data: [""]
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#dc143c'
}
},
}
],
series: [
{
name: '海关',
type: 'line',
stack: '总量',
itemStyle: { normal: { label: { show: true, position: 'top' } } },
//data后面是一个数组对象，里面数据对应Y轴的值，从后台传过来，现在是随机生成
data: [""]
}
]
};
function ChangePartiaOption(start, end) {
option.dataZoom.start = start;
option.dataZoom.end = end;
}
function LoadData() {
myChart.clear();
myChart.setOption(option);
myChart.setTheme("macarons");
};
function ChangeYear(type) {
var startoption = $(".sear_select[data-class='start']").find("option:selected").val()
var stopoption = $(".sear_select[data-class='stop']").find("option:selected").val()
if (parseInt(stopoption) < parseInt(startoption)) {
alert("截止日期不能小于起始日期！");
$(".sear_select[data-class='stop']").find("option[value='" + startoption + "']").prop("selected", true);
return;
}
//if (type == "start") {
// start = (startoption - 1850) * ((1940 - 1850) / 100);
// ChangePartiaOption(start, end);
//} else {
// end = (stopoption - 1850) * ((1940 - 1850) / 100);
// ChangePartiaOption(startoption, end);
//}
var start = (startoption - 1850) / (1940 - 1850) * 100;
var end = (stopoption - 1850) /(1940 - 1850) * 100;
ChangePartiaOption(start, end);
LoadData();
};
function SearchData(searchKey) {
$.ajax({
type: 'POST',
url: "/Home/EchartsSearch",
data: {
searchKey: searchKey
},
success: function (data) {
if (data != null) {
option.legend.data = data.legend;
option.xAxis[0].data = data.xarix;
var series = new Array();
for (var i = 0; i < data.legend.length; i++) {
series[i] = new Series(data.legend[i], "line", "总量", data.yarix[i]);
}
option.series = series;
}
myChart.setOption(option);
myChart.setTheme("macarons");
}
});
};
function Series(name, type, stack, data) {
this.name = name;
this.type = type;
this.stack = stack;
this.itemStyle = { normal: { label: { show: true, position: 'top' } } };
this.data = data;
};
$(function () {
// 为echarts对象加载数据
SearchData("");
//查询按钮
$(".sear_a01").click(function () {
//$("#main").empty();
//var myChart = echarts.init(document.getElementById('main'));
var searchkeyword = "";
if ($("#keyWord1").val() != "") {
searchkeyword += $("#keyWord1").val() + ",";
}
if ($("#keyWord2").val() != "") {
searchkeyword += $("#keyWord2").val() + ",";
}
if ($("#keyWord3").val() != "") {
searchkeyword += $("#keyWord3").val() + ",";
}
if (searchkeyword.length > 0) {
//searchkeyword = searchkeyword.RTrim(",");
searchkeyword = searchkeyword.substr(0, searchkeyword.length - 1);
}
SearchData(searchkeyword);
});
});
</script>
</div>
</div>
</div>
<footer class="index_foot">
<p class="foot_p"><span>Copyright 2010 中国海关出版社</span><span>版权所有 京ICP备10022862号</span><span>京公网安备1101054539号</span></p>
<p class="foot_p"><span>社址：北京市朝阳区东四环南路甲1号海关信息出版大楼6层 </span><span>邮编：100023</span><span>电话：010-65194242</span></p>
<p class="foot_p"><span>书店：北京市建国门内大街6号海关总署东配楼一层</span> <span>邮编：100730</span><span>电话：010-65195616</span></p>
</footer>
</body>
</html>
public class EchartViewModel
{
public List<int> xarix = new List<int>();
public List<string> legend = new List<string>();
public List<List<int>> yarix = new List<List<int>>();
}
public ActionResult EchartsSearch(string searchKey)
{
string[] listsearchKey = null;
//int[] listintperiod = new int[2];
int bYear = BeginYear;
int eYear = EndYear;
EchartViewModel echart = new EchartViewModel();
if (!string.IsNullOrEmpty(searchKey))
{
listsearchKey = searchKey.Split(',');
for (int i = 0; i < listsearchKey.Count(); i++)
{
string tempsear = listsearchKey[i];
List<TradeArchive> templist = db.TradeArchives.Where(p => p.Title.Contains(tempsear) || p.Content.Contains(tempsear)).ToList();
echart.legend.Add(listsearchKey[i]);
List<int> tempcount = new List<int>();
for (int j = 0; j <= eYear - bYear; j++)
{
int tempyear = bYear + j;
if (i == 0)
{
echart.xarix.Add(bYear + j);
}
tempcount.Add(templist.Where(p => p.BeginDate <= tempyear && p.EndDate >= tempyear).Count());
}
echart.yarix.Add(tempcount);
}
}
else
{
List<TradeArchive> templist = null;
//templist = db.TradeArchives.Where(p => p.BeginDate >= bYear || p.EndDate <= eYear).ToList();
templist = db.TradeArchives.ToList(); ;
echart.legend.Add("全部");
List<int> tempcount = new List<int>();
for (int j = 0; j <= eYear - bYear; j++)
{
int tempyear = bYear + j;
echart.xarix.Add(bYear + j);
tempcount.Add(templist.Where(p => p.BeginDate <= tempyear && p.EndDate >= tempyear).Count());
}
echart.yarix.Add(tempcount);
}
return Json(echart);
}