一篇读懂springboot用echarts实现实时柱状图和饼状图查询

最新推荐文章于 2024-03-06 11:01:48 发布

One_Piece111

最新推荐文章于 2024-03-06 11:01:48 发布

阅读量1.3k

点赞数 3

分类专栏：应该没人会看文章标签： ajax js json echarts

本文链接：https://blog.csdn.net/One_Piece111/article/details/114543439

版权

应该没人会看专栏收录该内容

48 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Echarts和Highcharts库在前端展示数据库中的数据，通过柱状图和饼状图进行可视化。首先展示了柱状图的实现，包括引入必要的JS文件，设置图表选项，以及从后端获取数据并更新图表。接着，对于饼状图的创建，同样涉及到数据请求和渲染。虽然在柱状图的展示中存在一些小问题，但整体上完成了一个简单的数据可视化过程。

摘要由CSDN通过智能技术生成

1.业务说明

将数据库中的数据分别以柱状图和饼状图呈现出来
gitee项目路径：https://gitee.com/ziac/ls.git

2.1 柱状图需要引入的js

建议去echarts官网直接用方法三定制下载(本人也是如此)
地址：https://echarts.apache.org/zh/builder.html
默认，代码压缩可以不选

	<script src="/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>

2.2 柱状图具体实现

我是先在首页上暴露一个跳转的按钮

<input type="button" value="实时柱状图" onclick="location.href='/doColumnar'">

然后用springmvc进行页面跳转以Ajax方式访问

/*
        跳转到柱状图前端页面
     */
    @RequestMapping("/doColumnar")
    public String doColumnar() {

        return "merch-columnar";
    }

merch-columnar.html页面

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '商品库存实时柱状图查询'
        },
        tooltip: {},
        legend: {
            data: ['库存']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '库存',
            type: 'bar',
            data: []
        }]
    });


    // 一、将data2.json中data的name转化成数组(将名称提取出来并放到一个新数组里)
    function convertMonthToArray(resule) {
        let data = resule.data;
        let arr = [];
        for (let i = 0; i < data.length; i++) {
            // 1、获取data中的name属性
            console.log(data[i].name);
            // 2、将name属性放到一个新的数组里
            //debugger;
            arr.push(data[i].name);
        }
        console.log(arr);
        // 3、返回arr数组
        return arr;
    }

    //二、将data2.json中库存量装换成数组
    function convertIntervalDaysToArray(resule) {
        let data = resule.data;
        let arr = [];
        for (let i = 0; i < data.length; i++) {
            arr.push(data[i].stock);
        }
        return arr;
    }

    // 三、异步请求数据
    myChart.showLoading();
    $.get('http://localhost:8080/merch/findAll').done(function (resule) {
        myChart.hideLoading();
        // 获的X，函数方法要传参，不然无意义
        var xAxisMonth = convertMonthToArray(resule);
        // 获的Y
        var yAxisIntervalDays = convertIntervalDaysToArray(resule);
        myChart.setOption({
            xAxis: {
                // 根据data2.json获取需要的值
                data: xAxisMonth
            },
            yAxis: {},
            series: [{
                name: '库存',
                type: 'bar',
                // 根据data2.json获取需要的值
                data: yAxisIntervalDays
            }]
        });
    })
  </script>
</body>

	 /*
        后台查询所有商品，前台展现json(+柱状图)
     */
    @RequestMapping("merch/findAll")
    @ResponseBody
    public JsonResult findAll(){
        return new JsonResult().success(merchService.findMerchs());
    }

这里的JsonResult是个自己写的工具类API(注解方式还要导入lombok依赖)

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class JsonResult implements Serializable {
    private Integer status; //200表示成功，201表示失败
    private String msg;     //服务器返回的提示信息
    private Object data;    //服务器返回的数据
    //定义JsonResult封装对象



    public static JsonResult fail(){
        return new JsonResult(201,"服务器执行失败",null);
    }

    public static JsonResult success(Object data){
        return new JsonResult(200,"服务器执行成功",data);
    }

    public static JsonResult success(String msg, Object data){
        return new JsonResult(200,msg,data);
    }
}

service层和dao层数据库都是很简单的语句，会返回一个List<pojo对象>，如果还有点模糊的话可以往上翻翻我的gitee网站

2.3 图片展示

在这里插入图片描述
有点小bug，我前端数组里明明有全部的name属性，结果没全部展现，不过鼠标飘过它会显示，希望能有大神指点

3.1 饼状图需要引入的js

其实大致思路同上，我就直接上代码了

	<script src="/jquery.min.js"></script>
    <script src="/echarts.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

3.2 饼状图具体实现

<input type="button" value="实时饼状图" onclick="location.href='/doPieChart'">

	/*
        跳转到饼状图页面
     */
    @RequestMapping("/doPieChart")
    public String doPieChart() {
        return "merch-pieChart";
    }

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;

        option = {
            title: {
                text: '商品库存实时饼状图查询',
                subtext: '纯属虚构(才怪)',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        $(function () {
            var servicedata = [];
            $.ajax({
                url: "/merch/findAll2",
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data) {
                        var obj = eval(data);
                        for (var i = 0; i < obj.length; i++) {
                            var sum = new Object();
                            sum.name = data[i].name;
                            sum.value = data[i].stock;
                            servicedata[i] = sum;
                        }
                    }
                    myChart.setOption({
                        series: [{
                            //根据名字对应到相应的系列
                            name: '访问来源',
                            data: servicedata
                        }]
                    })
                }
            })
        })
    </script>
</body>

	/*
        后台查询所有商品,前台展现json(+饼状图)
     */
    @RequestMapping(value = "merch/findAll2",produces = "application/json;charset=utf-8", method = RequestMethod.POST)
    @ResponseBody
    public List<Merch> findAll2(){
        List<Merch> merchs = merchService.findMerchs();
        return merchs;
    }