折线图

页面

编写一个实例数据,然后下载

https://www.echartsjs.com/examples/zh/editor.html?c=line-simple

 HTML的修改

<!--年度销售额统计开始-->
    <div class="layui-col-lg6 layui-col-md12" id="customerStatistica3">
        <blockquote class="layui-elem-quote title">客户年度月份销售额统计<i class="layui-icon layui-red"> &#xe607;</i></blockquote>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>查询条件</legend>
        </fieldset>

        <div class="layui-form">
            <div class="layui-inline">
                <div class="layui-inline">
                    <label class="layui-form-label">选择年份</label>
                    <div class="layui-input-inline">
                        <input type="text" name="yaer" class="layui-input" id="year_two" placeholder="请选择年份">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSeach"> 查 询 </button>
            </div>
        </div>
        <div id="container3" style="height: 100%"></div>
    </div>
    <!--年度销售额统计结束-->

JavaScript的修改

日期选择器的初始化渲染

laydate.render({
            elem: '#year_two'
            ,type: 'year'
            ,value: new Date()
        });

引入echarts核心js文件

<script type="text/javascript" src="/resources/common/echarts.min.js"></script>

发送请求获取动态数据

function CustomerSaleYearstatFn() {

        let year=$("#year_two").val();
        if(year===""){
            year=new Date().getFullYear();
        }
        $.get("/stat/loadCustomerMethodStat",{year:year},function (data) {
            var dom = document.getElementById("container3");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {
                title: {
                    text: '客户年度月份销售额统计',
                    subtext: '真实有效',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data,
                    type: 'line'
                }]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        });
    }

监听查询按钮的点击,再次调用发送请求的函数。

$("#doSeach").click(function () {
            CustomerSaleYearstatFn();
        });

默认加载当前年份的月份销售额,调用一下函数即可

 CustomerSaleYearstatFn();

后端

StatisticalController

/**
     * 查询客户年度月份销售额
     * @param year
     * @return
     */
    @RequestMapping("loadCustomerMethodStat")
    @ResponseBody
    public List<Double> loadCustomerMethodStat(String year){
        System.out.println(year);
        return this.statService.loadCustomerMethodStat(year);
    }

StatService

/**
     * 查询客户年度月份销售额
     * @param year
     * @return
     */
    List<Double> loadCustomerMethodStat(String year);

StatServiceImpl

/**
     * 查询客户年度月份销售额
     * @param year
     * @return
     */
    @Override
    public List<Double> loadCustomerMethodStat(String year) {
        List<Double> list = this.statMapper.loadCustomerMethodStat(year);

        for (int i = 0; i < list.size(); i++){
            if(null == list.get(i)){
                list.set(i, 0.0);
            }
        }
        return list;
    }

StatMapper

/**
     * 查询客户年度月份销售额
     * @param year
     * @return
     */
    List<Double> loadCustomerMethodStat(String year);

StatMapper.xml

<!--查询客户年度月份销售额-->
    <select id="loadCustomerMethodStat" resultType="java.lang.Double">
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"01")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"02")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"03")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"04")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"05")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"06")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"07")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"08")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"09")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"10")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"11")
        UNION ALL
        SELECT SUM(number*saleprice) FROM `bus_sales` WHERE DATE_FORMAT(salestime,"%Y%m") = CONCAT(#{year},"12")
    </select>

最终效果