Spring boot+Echarts 柱状图

Spring boot+Echarts 柱状图_第1张图片

pom.xml 添加jar包

        <!--图形包-->
        <dependency>
            <groupId>org.jfree</groupId>
            <artifactId>jfreechart</artifactId>
            <version>1.0.19</version>
        </dependency>

controller

Spring boot+Echarts 柱状图_第2张图片

语句

<select id="tuxing" resultType="com.example.demo.pojo.iserf">
    select id,name,sum(value) as value from tuxingbaio   group by  name
</select>

前台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<!-- 为 ECharts做个有长宽高的大小盒子 -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>

<script type="text/javascript">
    $(function(){
        var myCharts=echarts.init(document.getElementById('main'));
        myCharts.setOption({
            color: ['#3398DB'],
            //设置标题
            title:{
                text:'ECharts 货物流动'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            //坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线
                }
            },
            legend: {
                data: ['货物']
            },
            xAxis : {
                data : []
            },
            yAxis : {

            },
            series : [
                {
                    name:'货物',
                    type:'bar',
                    data:[]
                }
            ]
        });

        //加载时显示loading动画
        myCharts.showLoading();
        //放x轴值得姓名的数组
        var name=[];

        //放y轴值得货物数量的数组
        var value=[];

        //利用ajax从后台给数组存值
        $.ajax({
            type: "get",
            url: "../pos/tuxing",     //请求发送到Controller list处
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                //请求成功时执行该函数内容,result即为服务器返回的json对象
                $(data).each(function(i,e){
                    name.push(e.name);    //取出姓名并存入数组
                    value.push(e.value);     //取出货物数量并存入数组
                });
                myCharts.hideLoading();    //隐藏加载动画
                myCharts.setOption({        //加载数据图表
                    xAxis: {
                        data: name
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '货物',
                        type:'bar',
                        barWidth: '60%',
                        data: value,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,       //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {      //数值样式
                                        color: 'black',
                                        fontSize: 12
                                    }
                                }
                            }
                        }

                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myCharts.hideLoading();
            }
        })
    });
</script>
</body>
</html>

你可能感兴趣的:(idean项目)