erp/Web/ECharts/ProductGather.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/ErpView.master" AutoEventWireup="true" CodeFile="ProductGather.aspx.cs" Inherits="ECharts_ProductGather" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script type="text/javascript" >

        var weekAddTag = 0;
        var monthAddTag = 0;
        var _startTime = "";
        var _endTime = "";

        var optionBar = {
            title: {
                text: '产品月销量',
                subtext: '',
                x: 'center'
            },
            legend: {
                type: 'scroll'
            },
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '月销量',
                    type: 'bar',
                    barWidth: 15,
                    barGap: '80%',/*多个并排柱子设置柱子之间的间距*/
                    barCategoryGap: '50%',
                    data: [10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220, 200, 334]
                }
            ]
        };

        //查询按钮
        function searchFn() {
            var form = new mini.Form("#ctl00_f_all");
            var data = form.getData(true, false);
            var s = data;
   
            grid.load({
                 date1: s.date1, date2: s.date2
            });
        }


        function clickPreNextDate(btnType) {
            var dateList = "";
            if (btnType == 1) {
                monthAddTag = monthAddTag - 1;
                dateList = getMonthStartAndEnd(monthAddTag);
            }
            else if (btnType == 2) {
                weekAddTag = weekAddTag - 1;
                dateList = getWeekStartAndEnd(weekAddTag);
            }
            else if (btnType == 3) {
                weekAddTag = weekAddTag + 1;
                dateList = getWeekStartAndEnd(weekAddTag);
            }
            else if (btnType == 4) {
                monthAddTag = monthAddTag + 1;
                dateList = getMonthStartAndEnd(monthAddTag);
            }
            _startTime = dateList[0];
            _endTime = dateList[1];
            mini.get("txtChartDate1").setValue(_startTime);
            mini.get("txtChartDate2").setValue(_endTime);
            grid.load({
                date1: _startTime, date2: _endTime
            });
        }

        //清除查询内容
        function clearFn() {
            //$("#ctl00_f_all").find("input").val("");
            var form = new mini.Form("#ctl00_f_all");
            form.clear();

            mini.get("aSearchMonth").setChecked(false);
            mini.get("aSearchDay").setChecked(false);
            mini.get("aSearchWeek").setChecked(false);
        }

        function actionRenderer(e) {
            var record = e.record;
            var pname = record.pname;
            var html = "";
            html += getGridBtn("edit", "月走势图", "chartsFn('" + pname + "')");

            return html;
        }

        function chartsFn(pname) {
            mini.get("charts_win").show();
            var parms = new Object();
            parms.ProductName = pname;
            postAjax("get_report_product_month_count", parms, function (data) {
                console.log("xxxxxxxxxxxx", data);
                var barOp = optionBar;
                var tData = [];
                var vData = [];
                for (var idt of data) {
                    vData.push(idt.count);
                    tData.push(idt.ctime);
                }

                barOp.xAxis[0].data = tData;
                barOp.series[0].data = vData;
                var chartBar = echarts.init(document.getElementById('chartBar'));
                chartBar.setOption(barOp);
            });
            
        }

        $(function () {
            var dateList = getMonthStartAndEnd(0);
            _startTime = dateList[0];
            _endTime = dateList[1];
            //mini.get("txtChartDate1").setValue(_startTime);
            //mini.get("txtChartDate2").setValue(_endTime);
            grid.load({
                date1: _startTime, date2: _endTime
            });
        });
    </script>        
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="btn" runat="Server">
    <div class="filter_item" id="f_chart_ime">
        <a class="mini-button" style="background-color:#ECF6ED;color:#088615;border:1px solid #66E873;" iconCls="icon-upload" onclick="clickPreNextDate(1)">上一月</a>
        <a class="mini-button" style="background-color:#F3F7F7;color:#16AAF7;border:1px solid #90D3F6;" iconCls="icon-upload" onclick="clickPreNextDate(2)">上一周</a>
        <input id="txtChartDate1" name="date1" class="mini-datepicker inp-time" />
        <span class="sp">-</span>
        <input id="txtChartDate2" name="date2" class="mini-datepicker inp-time" />
        <a class="mini-button" style="background-color:#F3F7F7;color:#16AAF7;border:1px solid #90D3F6;" iconCls="icon-download" onclick="clickPreNextDate(3)">下一周</a>
        <a class="mini-button" style="background-color:#ECF6ED;color:#088615;border:1px solid #66E873;"  iconCls="icon-download" onclick="clickPreNextDate(4)">下一月</a>
    </div>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="content" runat="Server">
    <div class="mini-fit">
        <div id="m_grid" class="mini-datagrid" showpager="false" showemptytext="true" emptytext="暂无记录" url="../handler/sync.ashx?t=get_report_product_order_count">
            <div property="columns">
                <div type="indexcolumn" width="20"></div>
                <div type="checkcolumn" width="20"></div>
                <div field="pname" width="60" align="center" headeralign="center">产品名</div>
                <div field="count" width="60" align="center" headeralign="center">总数量</div>
                <div field="amount" width="60" align="center" headeralign="center">总金额</div>
                <div name="action" width="60" headeralign="center" align="center" renderer="actionRenderer" cellstyle="padding:0;">#</div>
            </div>
        </div>
    </div>


    <div id="charts_win" class="mini-window" title="走势图" style="width: 850px; height: 560px; position: relative; display: none">
        <div id="content" style="width: 100%; display: flex; flex-direction: row; margin-top: 60px;">
            <div id="chartBar" style="width: 98%; height: 380px;"></div>
        </div>
    </div>
</asp:Content>