@{
    ViewBag.Title = "TrendChart";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}
<script src="~/Statics/libs/echarts/echarts.min.js?v=@(HtmlUtil.JsVersion)"></script>
<script src="~/Statics/libs/echarts/echarts-gl.min.js?v=@(HtmlUtil.JsVersion)"></script>
<div class="searchdiv">
    @Html.MyAceDropdownInput("AssetBookId", "簿记账户", AssetunitController.GetClientassetunit())
    @Html.MyAceDropdownInput2("DateSection", "时间区间", GlobalData.GetSelectItems(new List<string>
    { "最近7日", "最近30日","最近60日","最近100日","自定义" }), false, "最近30日", htmlAttributes: new { onchange = "changeDateSection()" })
    <input class="search-input datepicker" id="DateFromValueDate" name="DateFromValueDate" type="text" autocomplete="off">&nbsp;-&nbsp;
    <input class="search-input datepicker" id="DateToValueDate" name="DateToValueDate" type="text" autocomplete="off">
    @MyControls.Btn("生成收益走势图", "createTrendChart()")
</div>
<div id="divTrendChart"  style="width: 100%;height:350px;padding:15px;">

</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('divTrendChart'));
    $(function () {

        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            format: 'yyyy-mm-dd',
        });

        $("#AssetBookId").find("option").each(function () {
            $(this).attr("selected", true)
        });
        $("#AssetBookId").selectpicker("refresh");
        changeDateSection();
    });

    function changeDateSection() {
        var dateSection = $("#DateSection").val();
        if (dateSection != "自定义") {
            main.post("/risk/GetDateSection", { "DateSection": dateSection }).done(function (ret) {
                $("#DateFromValueDate").val(ret[0]);
                $("#DateToValueDate").val(ret[1]);
            });
        }
    }

    function createTrendChart() {
        if ($("#DateFromValueDate").val() == "" || $("#DateToValueDate").val() == "") {
            main.alert("请选择时间区间再生成累计走势图");
            return;
        }
        if ($("#DateFromValueDate").val()> $("#DateToValueDate").val()) {
            main.alert("开始时间不能大于结束时间");
            return;
        }

        if ($("#AssetBookId").val() == null && $("#AssetBookId").val().length > 0) {
            main.alert("请选择簿记账户再生成累计走势图");
            return;
        }
        var postData = {
            BookIds: $("#AssetBookId").val(),
            ValueDateStart: $("#DateFromValueDate").val(),
            ValueDateEnd: $("#DateToValueDate").val(),
        };
        main.post("/risk/CreateTrendChart", postData).done(function (ret) {
            if (ret!=null) {
                setOption(ret);
            } else {
                main.alert(ret.msg);
            }

        });
    }

    function setOption(obj) {
        var types = ['整体业务', '场外期权', '场内期权', '标的交易', '远期', '收益互换'];
        option = {
            legend: {
                data: types
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                // 鼠标悬浮提示框显示 X和Y 轴数据
                trigger: 'axis',
                backgroundColor: 'rgba(32, 33, 36,.7)',
                borderColor: 'rgba(32, 33, 36,0.20)',
                borderWidth: 1,
                textStyle: {
                    // 文字提示样式
                    color: '#fff',
                    fontSize: '12'
                }
            },
            series: []
        };
        option.xAxis.data = obj.XAxisData;
        if (obj.YAxisData.length > 0) {
            obj.YAxisData.forEach((a, index) => {
                var seriesModel = {};
                seriesModel.name = types[index];
                seriesModel.data = obj.YAxisData[index]
                seriesModel.smooth = true;
                seriesModel.symbol = "none";
                seriesModel.type = 'line';
                option.series.push(seriesModel);
            });
        }

        myChart.setOption(option);
    }

</script>