highchart

highchart与Spring data jpa 整合

介绍

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表

优点

主题多
动态交互不错
操作简单

特点

1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；
HighCharts的几种基本的官方图表示例
HighCharts的几种基本的官方图表示例(6张)
2.图表类型：HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。
3.不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。
4.提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。
5.放大功能：HighCharts可以大量数据集中显示，并且可以放大某一部分的图形，将图表的精度增大，进行详细的显示，可以选择横向或者纵向放大。
6.时间轴：可以精确到毫秒。
7.导出：表格可导出为 PDF/ PNG/ JPG / SVG 格式
8.输出：网页输出图表。
9.可变焦：选中图表部分放大，近距离观察图表；
10.外部数据：从服务器载入动态数据。
11.文字旋转：支持在任意方向的标签旋转。

后台配置

在昨天学的Spring data jpa的基础上添加几个yml的配置和pom.xml的jar包引用

yml配置

thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    cache: false

pom.xml的jar包引用

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>

前台页面

新建一个html网页
引用两个环境配置

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

创建一个div装图形

<div id="main2" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>

最后就是写jQuery代码

圆饼型

<script type="text/javascript">
    var option;
    var arr1=[]
    var arr2=[]
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main2'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id

    // 指定图表的配置项和数据
    $.get("list",function(result) {
        arr1 = result;
        $.each(result, function (index, item) {
            arr1.push(item.id);
            arr2.push(item.name);
        })
        option = {
            title: {
                text: '班级人数统计',
                subtext: '人数',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: arr2
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: arr1,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    })
</script>

效果图

条形图

<script type="text/javascript">
        var option;
        var arr1=[]
        var arr2=[]
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        $.get("list",function (result) {
            $.each(result,function (index,item) {
                arr1.push(item.name);
                arr2.push(item.number);
            })
            option = {
                title: {
                    text: '班级人数统计图'
                },
                tooltip: {},
                legend: {
                    data:['人数']
                },
                xAxis: {
                    data: arr1
                },
                yAxis: {},
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: arr2
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    </script>

效果图