Springboot + Echarts 生成柱形图和饼状图

最新推荐文章于 2024-05-12 06:55:17 发布

心向光明顶

最新推荐文章于 2024-05-12 06:55:17 发布

阅读量2.3k

点赞数 3

文章标签： Echarts 柱形图

本文链接：https://blog.csdn.net/weixin_43398895/article/details/103050349

版权

主要技术: Springboot + SpringDataJpa
数据库:mysql

首先需要去Echarts 官方找到需要的素材模板
并制作并生成一个 echarts.min.js 文件

创建Spring boot项目和一张简单的表
在这里插入图片描述
接下来后台调用查询方法就不写了调个Controller吧


@Controller
public class EchartController {

	@Autowired
	EchartsService echartsService;

	@GetMapping ("/")
	public String index1() {
		return "index1";
	}

	@GetMapping ("/index2")
	public String index2() {
		return "index2";
	}

	@GetMapping ("/getCate")
	@ResponseBody
	public List<Echarts> getCate() {
		return echartsService.getCate();
	}
}

在html中需引入三个文件

 	<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>

html部分:
柱形图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱形图</title>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
</body>
<script>
    $(function () {
        $.ajax({
            url: "/getCate",
            dataType: "json",
            success: function (data) {
                var cate = [];
                var da = [];

                for (var i = 0; i < data.length; i++) {
                    cate.push(data[i].categories)
                    da.push(data[i].data)

                }

                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',   //指定dom元素的id
                        type: 'column'   //指定类型--->柱形图
                    },
                    title: {   //设置顶部标题
                        text: '柱形图'
                    },
                    xAxis: {   //x轴的内容
                        categories: cate
                    },
                    yAxis: {  //y'轴的内容
                        title: {   //y轴标题
                            text: '人口(百万)'
                        },
                    },
                    plotOptions: {   //设置柱状内容
                        column: {
                            dataLabels: {
                                border: 1,
                                align: 'left',
                                enabled: true,
                                rotation: 270,
                                x: 2,  //设置字体角度旋转
                                y: -10,
                                inside: true,  //设置是否将数值存在柱状条里面
                                style: {   //设置字体
                                    fontWeight: 'bold',
                                    fontSize: '14px',
                                    color: 'black'
                                }
                            }
                        }
                    },
                    series: [{   //柱状条的数值
                        // data: data
                        data: da
                    }]
                });
            }
        })

    });

</script>
</html>

饼状图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼状图</title>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
</body>
<script>
    $(function () {
        $.ajax({
            url: "/getCate",
            dataType: "json",
            success: function (data) {
                var cate = [];
                var da = [];
                for (var i = 0; i < data.length; i++) {
                    cate.push(data[i].categories)
                    da.push(data[i].data)
                }
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'pie'
                    },
                    title: {
                        text: '柱形图'
                    },
                    tooltip: {
                        headerFormat: '{series.name}<br>',
                        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                // softConnector: true // by default
                                enabled: true,
                                softConnector: false,
                                formatter: function () {
                                    //this 为当前的点（扇区）对象，可以通过  console.log(this) 来查看详细信息
                                    return '<span style="color: ' + this.point.color + '"> ' + this.point.name + '值：' + this.y + '，占比' + this.percentage + '%</span>';
                                }
                            }
                        },
                        showInLegend: true  // 显示在图例中
                    },
                    series: [{
                        type: 'pie',
                        name: '全球人口排行',
                        data: da,
                    }]
                });

            }
        })

    });

</script>
</html>

效果展示:
在这里插入图片描述

心向光明顶

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Springboot + Echarts 生成柱形图和饼状图

Springboot + Echarts 写的一个柱状图下面进入主题使用技术:后台 Springboot +JPA数据库 mysql首先需要去Echarts官方找到需要的素材模板并制作并生成一个 echarts.min.js 文件Echarts 官方链接创建Spring boot项目创建一个简单的表在Springboot目录下创建接下来后台调用查询方法就不写了调个Co...
复制链接

扫一扫