erp/Web/ECharts/Echarts_test.aspx

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

<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 = "";
        //月每天总销量option
        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]
                }
            ]
        };


        //各个店铺每天销量
        var optionLine = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['不干胶', '海报']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    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']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '不干胶',
                    type: 'line',
                    stack: '总量',
                    areaStyle: { normal: {} },
                    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]
                },
                
                {
                    name: '海报',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: { normal: {} },
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320,555,666]
                }
            ]
        };
        var optionBar_province = {
            title: {
                text: '全国省份销量',
                subtext: '',
                x: 'center'
            },
            legend: {
                type: 'scroll'
            },
            color: ['#91cc75'],
            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]
                }
            ]
        };

        var optionPie = {
            title: {
                text: '订单占比',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['普通单', '拿样单', '微信单']
            },
            series: [
                {
                    name: '单量占比',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '普通单' },
                        { value: 310, name: '拿样单' },
                        { value: 1234, name: '微信单' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };




        function setPieData() {
            var parms = new Object();
            parms.date1 = _startTime;
            parms.date2 = _endTime;
            postAjax("get_time_type_order_count", parms, function (data) {
                var pieOp = optionPie;
                var pData = [
                    { value: data.nomal, name: '普通单' },
                    { value: data.sample, name: '拿样单' },
                    { value: data.wechat, name: '微信单' }
                ];
                pieOp.series[0].data = pData;
                var chartPie = echarts.init(document.getElementById('chartPie'));
                chartPie.setOption(pieOp);
            });
        }
        function setDayData() {
            var parms = new Object();
            parms.date1 = _startTime;
            parms.date2 = _endTime;
            postAjax("get_report_time_order_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 setProvinceData() {
            var parms = new Object();
            parms.date1 = _startTime;
            parms.date2 = _endTime;
            postAjax("get_report_province_order_count", parms, function (data) {
                console.log("xxxxxxxxxxxxprovince", data);
                var barOp = optionBar_province;
                var tData = [];
                var vData = [];
                for (var idt of data) {
                    vData.push(idt.count);
                    tData.push(idt.province);
                }

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

        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);
            setPieData();
            setDayData();
            setProvinceData();
        }

        $(function () {
            var dateList = getMonthStartAndEnd(0);
            _startTime = dateList[0];
            _endTime = dateList[1];
            mini.get("txtChartDate1").setValue(_startTime);
            mini.get("txtChartDate2").setValue(_endTime);
            setPieData();
            setDayData();
            setProvinceData();
            var chartLine = echarts.init(document.getElementById('chartLine'));
            chartLine.setOption(optionLine);
            //var chartBar2 = echarts.init(document.getElementById('chartBar2'));
            ////optionBar.color = ["#91cc75"];
            //optionBar.xAxis[0].data = ["福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南", "福建", "广东", "湖南"]
            //chartBar2.setOption(optionBar);
            //var chartPie = echarts.init(document.getElementById('chartPie'));
            //chartPie.setOption(optionPie);
        });
    </script>
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="btn" runat="Server">
   
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="content" runat="Server">
    <div class="filter_item" id="f_chart_ime" style="width: 100%;border-bottom:1px solid lightgray;">
        <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>
    <div id="content" style="width: 100%; display: flex; flex-direction: row; margin-top:60px;">
        <div id="chartBar" style="width: 48%; height: 360px;"></div>
        <div class="ct" id="chartPie" style="height: 360px; width: 50%;"></div>
    </div>
    <div id="content2" style="width: 100%; display: flex; flex-direction: row;">
        <div id="chartLine" style="width: 48%; height: 360px;"></div>
        <div id="chartBar2" style="width: 48%; height: 360px;"></div>
    </div>

</asp:Content>