@{ ???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); ???????}
echarts-all.js 报表
原文地址：https://www.cnblogs.com/caolingyi/p/8548357.html