Echarts创建动态图表

最新推荐文章于 2025-01-15 17:15:27 发布

准时长大

最新推荐文章于 2025-01-15 17:15:27 发布

阅读量3.9k

点赞数 1

分类专栏： Echarts 文章标签：动态显示前后台交互 echarts 柱状图饼状图

本文链接：https://blog.youkuaiyun.com/T_james/article/details/84070120

版权

Echarts 专栏收录该内容

1 篇文章

订阅专栏

偶然的机会，发现echarts可以制作比较精美的图表，进而小小学习了一下，也算知道了一些基本的常识，现与大家进行分享。

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

然而我们只是想要用这一项技术单纯的去实现相应的图表展现的功能即可。在这里我将用echarts中的柱状图和饼状图作为例子，连接数据库，为大家展示动态的数据。

一，动态展示柱状图

首先让大家看看整体的效果：

怎么连接数据库我就不详细说了，这边我将后台整体介绍一下。

1.后台新建一张表，共三个字段：id,count name

2.通过sql语句查询出所有的数据，存放在list集合中

3.通过数据的组装，将值以特定的类型反馈给前台进行展示，前台拿到值后解析赋值即可。

------------------------------------------------------------------------------------------------------------------------------------------

现在是后台数据的组装代码

@Override
    public Map<String,Object> queryBarGraphList(){
        //查询出所有柱状图的数据
        List<Bargraph> list = bargraphMapper.queryList();
        log.info("查询出数据库柱状图数据共{}条",list.size());
        //装载查询出的不同的数据
        Map<String,Object> maps = new HashMap<>();
        String [] counts = new String[list.size()];
        String [] names = new String[list.size()];
        int i=0;
        for(Bargraph bargraph:list){
            counts[i] = bargraph.getCount();
            names[i] = bargraph.getName();
            i++;
        }
        maps.put("counts",counts);
        maps.put("names",names);
        return maps;
    }

通过map的形式给到前台，前台分别将值输送到相应的地方

----------------------------------------------------------------------------------------------------------------------------------------

现在是前台数据的展现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript" src="../lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../lib/echarts.min.js"></script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echartjquery-2.1.1.min.jss实例
    var myChart=echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据

    myChart.setOption({
        title:{
            text:'echarts入门示例'
        },
        tooltip:{

        },
        legend:{
            data:['销量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{

        },
        series:[
            {
                name:'销量',
                type:'bar',
                data:[]
            },
        ]
    });


    $.ajax({
        type : 'get',
        url :'/echarts/queryBarGraphList',
        async: false,
        success : function(data){
            myChart.setOption({
                xAxis:{
                    data:data.names
                },
                series:[
                    {
                        name:'销量',
                        data:data.counts
                    },
                ]
            });
        }
    });
</script>
</body>
</html>

注意：哪里需要赋值，就先定义需要赋值的地方为一个数组格式，然后将后台传递过来的值显示在相应的地方即可，事实证明，echarts就是将后台数据进行灵活的展现，借此达到高度可定制的目的。

二：动态展示扇形图

依旧先看下整个的效果图：

这里很难受，这边定义的扇形图的区域名称就是出不来，但是可以出图，这个问题我还是要仔细研究下。

后台代码和上方大同小异，只是前端代码有所改动，这边我就将前端统一代码上一段吧。

-------------------------------------------------------------------------------------------------------------------------------------------------

现在是前台数据的展现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;"></div>
<div id="piemain" style="width: 700px;height:400px;"></div>
<script type="text/javascript" src="../lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../lib/echarts.min.js"></script>
<script type="text/javascript">

    // 基于准备好的dom，初始化echartjquery-2.1.1.min.jss实例
    var myChart=echarts.init(document.getElementById("main"));
    var myChart2=echarts.init(document.getElementById("piemain"));

    // 指定图表的配置项和数据

    myChart.setOption({
        title:{
            text:'echarts入门示例'
        },
        tooltip:{

        },
        legend:{
            data:['销量']
        },
        xAxis:{
            data:[]
        },
        yAxis:{

        },
        series:[
            {
                name:'销量',
                type:'bar',
                data:[]
            },
        ]
    });


    $.ajax({
        type : 'get',
        url :'/echarts/queryBarGraphList',
        async: false,
        success : function(data){
            myChart.setOption({
                xAxis:{
                    data:data.names
                },
                series:[
                    {
                        name:'销量',
                        data:data.counts
                    },
                ]
            });
        }
    });

    myChart2.setOption({
        title : {
            text: '女汉子年龄分布',
            subtext: '独家报道',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} 岁"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'女汉子',
                type:'pie',
                radius : '55%',//饼图的半径大小
                center: ['50%', '60%'],//饼图的位置
                data:[]
            }
        ]
    });

    $.ajax({
        type : 'get',
        url :'/echarts/queryPieImageList',
        async: false,
        success : function(data){
            myChart2.setOption({
                legend: {
                    data: data.valuess
                },
                series:[
                    {
                        data:data.names
                    },
                ]
            });
        }
    });
</script>
</body>
</html>

这边定义了一个peimain的div，将值直接定义进去即可，这边定义的names为50，30，20这样的数字，然后前台拿到后进行内部解析，但是这里为什么值中文显示不出来，希望前端大佬看到后可以为我解惑。

这次算是初步了解了下，知道整体的大致流程，同时也知道了echarts是一款强大的图形化制作工具，等以后真正在项目中实战的时候再继续积累更加充足的技巧。