使用若依SpringBoot+ajax显示ECharts饼图折线

最新推荐文章于 2024-05-27 09:54:14 发布

小媛末末

最新推荐文章于 2024-05-27 09:54:14 发布

阅读量3.6k

点赞数 5

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44241551/article/details/108299170

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Echarts

参考Echarts官网示例

本篇博客只是简单的运用ajax前后交互的小案例。直接上代码

sql

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for dky_echarts
-- ----------------------------
DROP TABLE IF EXISTS `echarts`;
CREATE TABLE `echarts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(45) DEFAULT NULL,
  `num` int(11) DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of dky_echarts
-- ----------------------------
INSERT INTO `echarts` VALUES ('1', '苹果', '9');
INSERT INTO `echarts` VALUES ('2', '香蕉', '3');
INSERT INTO `echarts` VALUES ('3', '葡萄', '6');
INSERT INTO `echarts` VALUES ('4', '火龙果', '10');
INSERT INTO `echarts` VALUES ('5', '草莓', '20');

image.html

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('可视化列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-xs-6">
            <div class="ibox-content">
                <div id="lineEcharts" class="echarts"></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="ibox-content">
                <div id="pieEcharts" class="echarts"></div>
            </div>
        </div>
    </div>
    
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>

<script th:inline="javascript">
    var prefix = ctx + "state/image";

    //折线图
    $(document).ready(function () {
        //初始化ehcharts实例
        var lineChart = echarts.init(document.getElementById("lineEcharts"));
        //数据加载完之前先显示一段简单的loading动画
        lineChart.showLoading();
        //指定图表的配置项和数据
        var names = []; //类别数组（实际放x轴坐标值）
        var nums = []; //销量数组（Y坐标值）
        $.ajax({
            type: "post",
            async: "true",//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: prefix + "/list",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name);
                        nums.push(result[i].num);
                    }
                    lineChart.hideLoading();//隐藏加载动画
                    lineChart.setOption({//加载数据图表
                        title: {
                            text: '折线图',
                        },
                        //工具箱
                        //保存图片
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        //图例-每一条数据的名字叫销量
                        legend: {
                            data: ['销量']
                        },
                        //x轴
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: names
                        },
                        //y轴没有显式设置，根据值自动生成y轴
                        yAxis: {
                            type: 'value'
                        },
                        //数据-data是最终要显示的数据
                        series: [{
                            name: '销量',
                            type: 'line',
                            data: nums
                        }]
                    })
                }
            },
            error: function (errorMsg) {
                alert("图表请求数据失败");
                lineChart.hideLoading();
            }
        })
    })


    //饼图
    $(document).ready(function () {
        var pieChart = echarts.init(document.getElementById("pieEcharts"));
        //数据加载完之前先显示一段简单的loading动画
        pieChart.showLoading();
        //指定图表的配置项和数据
        var names = []; //类别数组（实际放x轴坐标值）
        var nums = []; //销量数组（Y坐标值）
        $.ajax({
            type: "post",
            async: "true",//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: prefix + "/list",
            data: {},
            dataType: "json",
            success: function (result) {
                debugger
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name);
                        var obj = new Object();
                        obj.name = result[i].name;
                        obj.value = result[i].num;
                        nums.push(obj);
                    }
                    pieChart.hideLoading();//隐藏加载动画
                    pieChart.setOption({//加载数据图表
                        title: {
                            text: '饼图',
                            x: 'center'
                        },
                        //工具箱
                        //保存图片
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: names
                        },
                        calculable: true,
                        series: [{
                            name: '销量',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: nums,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsextX: 0,
                                    shadowColor: 'rgba(0,0,0,0.5)'
                                }
                            }
                        }]

                    })

                }
            }
        })

    })

</script>
</body>
</html>

Echarts.java

public class Echarts extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    private String name;
    private int num;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getNum() {
        return num;
    }
    public void setNum(int num) {
        this.num = num;
    }
}

mapper.xml

    <select id="findAll" resultType="Echarts">
        SELECT name,num FROM dky_echarts
    </select>

mapper.java


public interface EchartsMapper {

    public List<Echarts> findAll(Echarts echarts);

}

service层省略…

EchartsController.java

package com.ruoyi.web.controller.state;

import java.util.List;

import com.google.gson.Gson;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.sate.domain.Echarts;
import com.ruoyi.sate.service.IEchartsService;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

/**
 * @author myy
 * @date 2020-08-29
 */
@Controller
@RequestMapping("/state/image")
public class EchartsController extends BaseController
{
    private String prefix = "state/image";

    private static final Logger LOG = LoggerFactory.getLogger(EchartsController.class);

    @Autowired
    private IEchartsService echartsService;

    @RequiresPermissions("state:image:view")
    @GetMapping()
    public String image()
    {
        return prefix + "/image";
    }

    /**
     * 查询echarts列表
     */
    @RequiresPermissions("state:image:list")
    @PostMapping("/list")
    @ResponseBody
    public String list(Echarts echarts)
    {
        List<Echarts> list = echartsService.findAll(echarts);
        //转换json
        Gson gson = new Gson();
        String str = gson.toJson(list);
        //获取list中第一个字段name和num
        System.err.println(list.get(0).getName()+"----"+list.get(0).getNum());
        return str;
    }


}

转换json依赖

 <!-- gson转换json-->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.2</version>
        </dependency>

界面
在这里插入图片描述

小媛末末

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
2
评论
使用若依SpringBoot+ajax显示ECharts饼图折线

Echarts参考Echarts官网示例本篇博客只是简单的运用ajax前后交互的小案例。直接上代码sqlSET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for dky_echarts-- ----------------------------DROP TABLE IF EXISTS `echarts`;CREATE TABLE `echarts` ( `id` int(11) NO
复制链接

扫一扫