不需要懂js的简单Echarts入门案例(java语言，同时解决thymeleaf在js中不方便遍历数据)

先导入需要的jra包，来自于GitHub上的大神。

 <!-- https://mvnrepository.com/artifact/com.github.abel533/EChartsjava封装 -->
        <dependency>
            <groupId>com.github.abel533</groupId>
            <artifactId>ECharts</artifactId>
            <version>3.0.0.6</version>
        </dependency>

编写一个静态页面，按照你自己的需求，放入id和js。$.get是发送ajax请求，写一个url，data就是你返回的数据，它会自己适配好，简直不要太简单。完全不需要在后端查出数据，然后在js中遍历。

           <div class="panel-heading">年度统计</div>
           <div class="panel-body">
                 <div class="echarts" id="years" style="height:300px; height:350px"></div>
           </div>

       <script src="/static/admin/js/echarts.min.js"></script>
            <script src="/static/admin/js/jquery.min.js"></script>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('years'));
        $.get('/admin/orderByYear').done(function (data) {
            // 填入数据
            console.log(data)
            myChart1.setOption(data);
        });
        // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
    </script>

接下来是controller编写。

@ResponseBody
    @RequestMapping("orderByYear")
    public Option orderByYear(){
        List<Map<String,Object>> map=adminService.adminOrder();
        Option option = new Option();
        option.title("年度统计").tooltip(Trigger.axis).legend("本年度统计");//标题
        option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);//辅助工具
        option.calculable(true);
        option.tooltip().trigger(Trigger.axis).formatter("{b}月 : 总量{c}");//出现鼠标悬停
        //设置y
        ValueAxis valueAxis = new ValueAxis();
//        valueAxis.axisLabel().formatter("{value} °C");//设置y单位
        //设置x
        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.axisLine().onZero(false);
        categoryAxis.axisLabel().formatter("{value}月");//设置x单位
        categoryAxis.boundaryGap(false);
//        categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
        Line line = new Line();
        line.smooth(true).name("(b)月与数量变化关系").itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        for (Map<String, Object> m:map
                ) {
                categoryAxis.data(m.get("date"));
                line.data(m.get("count"));
        }
        //设置布局
        Grid grid = new Grid();
        option.setGrid(grid);
        //设置图类型
        option.xAxis(categoryAxis);
        option.yAxis(valueAxis);
        option.series(line);
        return option;
    }

核心就是使用option对象，用面向对象的方式，把echarts繁杂的属性设置进去。只写我们需要的，你可以从数据库查出需要统计的数据，例如每个月的交易额，然后月份设置到坐标x或y，金额设置到line(条形图)，bar(饼图)中。效果如下: