Echarts进行异步调用数据。（柱状图和折线图，饼状图）以及查询十二月份复杂的数据显示。

淡淡的烟草味﹌ 2021-09-28 09:10 266阅读 0赞

**1 饼状图**  
示例图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70]  
前台代码html：

前台代码js:

数据库部分：  
1 环：  
![在这里插入图片描述][20190327154005601.png]  
2 环：  
![在这里插入图片描述][20190327154022221.png]  
3 环：  
![在这里插入图片描述][20190327154036284.png]  
java后台Sql方法：

<select id="yhpczlWtyhzhfx_1List"  resultType="map">
            SELECT
            *
            FROM
            yhpczl_wtyhzhfx_1
        </select>
        <select id="yhpczlWtyhzhfx_2List"  resultType="map">
            SELECT
            *
            FROM
            yhpczl_wtyhzhfx_2
        </select>
        <select id="yhpczlWtyhzhfx_3List"  resultType="map">
            SELECT
            *
            FROM
            yhpczl_wtyhzhfx_3
        </select>

java后台Controller：

public JSONObject yhpczlWtyhzhfx(){
            JSONObject jsonObject = new JSONObject();
            List<YhpczlWtyhzhfx_1>  list1 = iThreeInOneInfoService.yhpczlWtyhzhfx_1List();
            List<YhpczlWtyhzhfx_2>  list2 = iThreeInOneInfoService.yhpczlWtyhzhfx_2List();
            List<YhpczlWtyhzhfx_3>  list3 = iThreeInOneInfoService.yhpczlWtyhzhfx_3List();
            jsonObject.put("list1",list1);
            jsonObject.put("list2",list2);
            jsonObject.put("list3",list3);
            return jsonObject;
        }

**2 柱状图**  
示例图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 1]

前台html代码：

前台js代码：

数据库部分：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 2]

后台Sql代码：

<select id="yhpczlAqfxqdzhfxList"  resultType="map">
            SELECT
            *
            FROM
            yhpczl_aqfxqdzhfx
        </select>

后台Contorller代码:

public JSONObject yhpczlAqfxqdzhfx(){
            JSONObject jsonObject = new JSONObject();
    
            List<YhpczlAqfxqdzhfx>  list = iThreeInOneInfoService.yhpczlAqfxqdzhfxList();
            jsonObject.put("list",list);
            return jsonObject;
        }

**3 折线图：**  
示例图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 3]  
前台html代码：

前台js代码：

数据库部分：  
![在这里插入图片描述][20190327160708960.png]  
后台Sql代码：

<select id="yhpczlWtyhqsfxList"  resultType="map">
            SELECT
            *
            FROM
            yhpczl_wtyhqsfx
        </select>

后台Controller:

public JSONObject yhpczlWtyhqsfx(){
            JSONObject jsonObject = new JSONObject();
    
            List<YhpczlWtyhqsfx>  list = iThreeInOneInfoService.yhpczlWtyhqsfxList();
            jsonObject.put("list",list);
            return jsonObject;
        }

复杂的十二月份的需求图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 4]  
复杂的十二月份的示例图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 5]

因为查询的数据是一年的数据这一年的数据没有需求的数据多，所以有什么显示什么。

前台html：

<div  class='navTtitle'>
                            <h4>安全生产标准化趋势分析</h4>
                        </div>
                        <div>
                            <div id="yhqsfx"></div>
                        </div>

前台js：

=\[0,0,0,0,0,0,0,0,0,0,0,0\]初始化十二个月的值。  
.substr(mon.length-2) 是因为后台传入的数据为201802,这样的数据，我们需要把这个最后的月份获取到，插入到对应的月份中的下标。  
month-1是因为数组下标为0开头，后台获得的数据是1开头。

后台sql:

select d.CHECK_YEAR as year, d.YIXUANZEPROJECTS_NAME as name, count(*) as value from f_swyt_view_bzh_plan d
            where d.COALMINE_CODE = #{coalMineCode}
            and CHECK_TYPE = #{checkType}
            and d.CHECK_YEAR <![CDATA[>]]>#{startTime}
            and d.CHECK_YEAR <![CDATA[<]]>#{endTime}
            group by  d.YIXUANZEPROJECTS_NAME;

数据库显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 6]  
后台Controller:

JSONObject jsonObject = new JSONObject();
            List<Map>  list = iThreeInOneInfoAqschbzfxService.aqscbzhtjfxQsfxList(startTime,endTime,coalMineCode,checkType);
            jsonObject.put("list",list);
            return jsonObject;

**以上四种Echarts图都是在data部分进行将后台获取的数据添加进去。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70]: /images/20210923/f5fcd953e8844b13a6273c298599b230.png
[20190327154005601.png]: /images/20210923/d6a4d4fe953c4d108d95ff2ffbb748c6.png
[20190327154022221.png]: /images/20210923/fbbfed7646d74ab9a376466079911784.png
[20190327154036284.png]: /images/20210923/7d6f3098af7348e7b7696605c2c8e59e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 1]: /images/20210923/19489614bea1453aafc1783d99e8696a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 2]: /images/20210923/54c4ecf64927430baa34eec04586bffb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 3]: /images/20210923/db5ddcb3971e4fc3810b8eee47736c8a.png
[20190327160708960.png]: /images/20210923/1ab2152090054b35817de80012b79d37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 4]: /images/20210923/a3b4848a0b3745c3b294bb293198f509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 5]: /images/20210923/76f96ec40dc9413d96710a523733b552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyMjMwMzA5_size_16_color_FFFFFF_t_70 6]: /images/20210923/fa363da37e9c4ebf8bfb35604a05ba82.png