echarts-all.js 報表
阿新 • • 發佈：2018-03-12
input period prop count() topo false har 出版社 rip
@{ 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 報表