学习记录----echarts组件的使用

最新推荐文章于 2024-02-12 23:10:51 发布

坚持、再坚持

最新推荐文章于 2024-02-12 23:10:51 发布

阅读量269

点赞数 1

本文链接：https://blog.csdn.net/weixin_46590320/article/details/104962289

版权

echarts 导入SpringBoot 项目使用

@[TOC](echarts 导入SpringBoot 项目使用)
官网下载echarts
echarts的基本使用案例
运行结果图
结束

官网下载echarts

下载链接：点击开始下载

echarts的基本使用案例

前端页面显示 （注意导入jQuery和echarts文件）

<!DOCTYPE html>
<html lang="en"
      xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <!--导入下载的js文件 -->
    <script type="text/javascript" src="/js/eCharts/echarts.min.js"></script>
    <!--导入jquery -->
    <script type="text/javascript" src="/js/jquery/jquery-3.3.1.min.js"></script>
    <title>饼图显示</title>

</head>
<body>
<!--用于生成eCharts实例的容器标签 -->
<div id="eChartsClass" style=" width: 600px;height:400px;"></div>
<!--导入用于显示饼图的js文件 -->
<script type="text/javascript" src="js/eChartsClass.js"></script>
</body>
</html>

相关的js代码，前端发送ajax请求数据，然后在echarts生成的图标上显示

$(function () {
    //获取某学年的学生的学生评价情况
    $.ajax({
        type: "post",
        data:  {"evalDate":"2020-06"},//传到后台的数据，根据自己的需求传入
        url: "/user/getStudentGradeTypeCountList",
        dataType:'json',
        success: function (data) {
            if(data.code==1) {
                eChartsCount(data.list);//调用生成饼状图函数，参数是后台封装的List<?>对象数据
            }else {
                layer.alert("请先登录")
            }
        },
        error: function () {
            layer.alert("操作请求错误，请先登录", function () {
                layer.closeAll();
            });
        }
    });

})
//document.getElementById("eChartsClass")			
//获取你前段页面的DOM
//echarts.init(DOM):		
//创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个ECharts 实例。 
//setOption(Option)
/*设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
*/
function eChartsCount(dataList) {
    var eChartsClass= echarts.init(document.getElementById("eChartsClass")).setOption({
    title:{
        text:"学生综合评级饼状图",
        show:true,
        x:'center',
        y:'top',
        textStyle:{
            color:'#3398db',
            fontStyle:'normal'
        }
    },
    tooltip:{},
    //series 里的data 是饼状图要显示的数据
    /* 数据格式是[{
    			name:"",value:""
    			},{
    			name:"",value:""
    			}]
    			可以直接在后台处理好返回直接使用
    */
    series: {
        name: '学生评价',
        type: 'pie',
        selectedMode: 'single',
        selectedOffset: 30,
        clockwise: true,
        label: {
            fontSize: 18,
            color: '#0f3794'
        },
        labelLine: {
            lineStyle: {
                color: '#0f3794'
            }
        },
        data: (function(){
            var data=[];
            //按照需求的数据格式取出数据
            $.each(dataList,function (index,item) {
                data.push({"name":item.name,"value":item.value})
            })
            return data;
        })(),
        color: ['#3398db']
    }


});


}