首先引入js檔案

<script src="/assets/js/echarts.min.js" charset="utf-8"></script>

觸發事件

<button onclick="javascript:query()"type="button" style="margin-bottom: 10px">查詢</button>

存放圖示的div容器

<div  id="main" style="width: 100%;height:400px;"></div>

js程式碼

//多柱狀圖
function query()
 
 {
    var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title: {
                text: '研發工作量、測試工作量、Review工作量統計圖'  //標題
            },
            toolbox: {   //工具箱可切換折線圖，還有顯示資料
                show : true,
                feature : {
                    mark : {show: true
 
},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']}, 
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            tooltip: {
                   trigger: 'axis'
 
 //提示框元件 
            },
            legend: {
                data: ['研發工作量','測試工作量','Review工作量']  //圖例元件
            },
            xAxis: {  //x軸
                type: 'category',
                data: []
            },
            yAxis: {   //y軸
                name: ''
            },
            series: [{  //系列列表
                name: '研發工作量',
                type: 'bar', //bar柱狀圖,line折線圖，pie餅圖
                data: []
            },
              {
                  name: '測試工作量',
                  type: 'bar',
                  data: []
            }
            ,
              {
                  name: 'Review工作量',
                  type: 'bar',
                  data: []
            }]
        });
        myChart.showLoading();    //資料載入完之前先顯示一段簡單的loading動畫
        var names = [];    //類別陣列（實際用來盛放X軸座標值）
        //顯示資料陣列
        var Research = [];
        var Test = [];
        var Review = [];
        var name =  $("#name").val();  //引數
        var type =  $("#status").val();
        $.ajax({
            type: 'post',
            url: 'project/workloadYear/query',//請求資料的地址
            data : {
                name:name,
                type:type
                },
            dataType: "json",        //返回資料形式為json
            success: function (result) {
                //請求成功時執行該函式內容，result即為伺服器返回的json物件
                $.each(result, function (index, item) {
                    names.push(item.date);    //挨個取出類別並填入類別陣列
                    Research.push(item.research);
                    Test.push(item.test);
                    Review.push(item.review);
                });

                myChart.hideLoading();    //隱藏載入動畫
                myChart.setOption({        //載入資料圖表
                    xAxis: {    //x軸
                        data: names
                    },
                    series: [{                 //系列列表     
                        data: Research  //上面賦值的陣列
                    },
                     {                    
                         data: Test
                     }
                    ,
                     {                    
                         data: Review
                     }
                    ]

                });      
            },
            error: function (errorMsg) {
                //請求失敗時執行該函式
                alert("圖表請求資料失敗!");
                myChart.hideLoading();
            }
        });
}

後臺互動程式碼

    @ResponseBody
    @PostMapping("/query")
    @RequiresPermissions("project:workloadYear:list")
    public void save( HttpServletResponse response,String name,String type){
        List<ReportDO>  report = getReport(name, type); //根據姓名和週期類別返回資料
        String json = JSON.toJSONString(report);
        try {
            response.setCharacterEncoding("utf-8");
            response.setContentType("text/JavaScript; charset=utf-8");// json資料 
            response.getWriter().println(json);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

實體類

public class ReportDO {
    private String date ; // 日期
    private float percentage; //比例
    private float Research; //研發
    private float Test; //測試
    private float Review; //審查
//set,get...
}

效果圖


切換為折線圖