echarts分组柱状图的前后台处理

Posted 2021-02-06 libin6505

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts分组柱状图的前后台处理相关的知识，希望对你有一定的参考价值。

原生的echarts使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        哈哈哈
        <div id="chartmain" style="width:600px; height: 400px;"></div>
    </body>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script>
        var option = {
        
            title:{text:‘嘿嘿‘},
            tooltip: {
                trigger: ‘axis‘,
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
                }
            },
            legend: {
                data: [‘百度‘, ‘谷歌‘, ‘必应‘]
            },
            xAxis: [{
                type: ‘category‘,
                data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘]
            }],
            yAxis: [{
                type: ‘value‘
            }],
            series: [
                {
                    name: ‘百度‘,
                    type: ‘bar‘,
                    data: [620, 732, 701, 734],
                },
                {
                    name: ‘谷歌‘,
                    type: ‘bar‘,
                    data: [120, 132, 101, 134],
                    //markLine: {
                    //    symbol: ‘none‘,
                    //    data: [{          
                    //        type: ‘average‘,
                    //        name: ‘平均值‘
                    //    }]
                    //},
                },
                {
                    name: ‘必应‘,
                    type: ‘bar‘,
                    data: [60, 72, 71, 74, 190]
                }
            ]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById(‘chartmain‘));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</html>

前台封装方法后的js:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        哈哈哈
        <div id="chartmain" style="width:600px; height: 400px;"></div>
    </body>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script>
    
    drawGroupChart("chartmain");
    
    //画分组柱状图方法
    function  drawGroupChart(domId){
        
        var title = "嘿嘿1";
        var xA =  [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘];
        var legendData = [‘百度‘, ‘谷歌‘, ‘必应‘];
        
        //[620, 732, 701, 734] 是x轴上每一组bar上的第一个柱子的数据的值的集合
        //[120, 132, 101, 134] 是x轴上每一组bar上的第二个柱子的数据的值的集合
        //所以，每一个小集合中数据的顺序都要和xA中的数据顺序对应，整个大集合中数据的顺序要和legendData对应
        var dataList = [[620, 732, 701, 734],[120, 132, 101, 134],[60, 72, 71, 74, 190]];
        
        var ss = [];
        $.each(legendData,function(i,v){
            
            var o = {
                    name:v,
                    type: ‘bar‘,
                    data: dataList[i]
            };
            
            ss.push(o);
        });
        
    
        var option = {
            title:{text:title},
            tooltip: {
                trigger: ‘axis‘,
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
                }
            },
            legend: {
                data: legendData
            },
            xAxis: [{
                type: ‘category‘,
                data: xA
            }],
            yAxis: [{
                type: ‘value‘
            }],
            series:  ss
                /* [
                {
                    name: ‘百度‘,
                    type: ‘bar‘,
                    data: [620, 732, 701, 734],
                },
                {
                    name: ‘谷歌‘,
                    type: ‘bar‘,
                    data: [120, 132, 101, 134],
                },
                {
                    name: ‘必应‘,
                    type: ‘bar‘,
                    data: [60, 72, 71, 74, 190]
                }
            ] */
        };
        //初始化echarts实例
        //var myChart = echarts.init(document.getElementById(‘chartmain‘));
        var myChart = echarts.init(document.getElementById(domId));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    }
        
    </script>
</html>

对应java后台的dto;

package com.pojo;

import java.util.List;

public class EchartsDto {
    
    //标题
    private String title;
    
    //x轴名称集合
    private List<String> xA;
    
    //普通柱状图时使用数据  eg：[] 一个ArrayList
    private Object data;
    
    //分组柱状图时使用数据    eg：dataList = [[],[],[]] 可以用大list里面套小list
    private Object dataList;
    
    //分类名称集合（每一组中每个bar的名称 集合）
    private List<String> legendData;
}

以上是关于echarts分组柱状图的前后台处理的主要内容，如果未能解决你的问题，请参考以下文章

Echarts怎么在柱状图的顶部加数据显示