echarts-all.js 报表

@{
    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" οnchange="ChangeYear('start')">
                        @foreach (int item in ViewBag.yearListBegin)
                        {
                            <option value="@item">@item</option>
                        }
                    </select>
                    <select class="sear_select" data-class="stop" οnchange="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);
        }

  

转载于:https://www.cnblogs.com/caolingyi/p/8548357.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页