原生的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分组柱状图的前后台处理 带平均线显示的更多相关文章

  1. echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  2. Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  3. Echarts堆积柱状图排序问题

    Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...

  4. SSRS----关于图表参考线（平均线）的添加

    在开发报表的时候,遇到了一个问题,客户需要在气泡图上添加水平和竖直两条平均线(结果参考如下图). 个人知识背景 一般添加参考线本身是有一个相关的设置的,但一般都是相对于Y值,即平行于X轴的.用类似的方 ...

  5. wxPython制作跑monkey工具（python3）-带事件百分比显示界面

    一. wxPython制作跑monkey工具(python3)-带事件百分比显示界面  源代码 Run Monkey.py #!/usr/bin/env python import wx import ...

  6. FileUpload控件实现单按钮图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

  7. Asp.net实现同页面内多图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: 此方法适合针对有后台生成的图片相关内容,例如购物网站商品展示页面中的封面图片,图片的数量由后台访问数据库,并加载到页面.这种 ...

  8. 滑动平均线的notebook画法

    滑动平均线,本程序解决了如何在matplotlib中使用中文显示,环境python2.7 最好使用 anaconda 环境使用sns似使得图片更加美观,不多说,上代码 import tushare a ...

  9. EchartJS平均线、最大值、最小值

    1.先来看一个没有平均线.最大值.最小值的简单实例 option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigge ...

随机推荐

  1. Java将json字符串转成map

    Map<String, Object> map = (Map<String, Object>) JSONUtils.parse(result)

  2. Notes of Daily Scrum Meeting（11.8）

    Notes of Daily Scrum Meeting(11.8) 预备中开始写代码的第一天,因为大家对Android编程的熟悉程度还是不够,所以工程进行的非常缓慢,有四名队员 开始编写自己的任务, ...

  3. java第一次实验报告

    北京电子科技学院(BESTI) 实    验    报    告 课程名称:java实验      班级:1352         姓名:潘恒      学号:20135209 成绩:         ...

  4. 第二阶段每日站立会议Second Day

    昨天我在手机端安装cpp后进行界面效果测试以及进一步完善 今天对图片显示的大小进行调整 遇到的问题:当图片太小时,显示一块灰色区域,不美观

  5. 1001.A+B Format (20)的感受

    这是提交到Github的object-oriented文件夹里面的代码:https://github.com/sonnypp/object-oriented/tree/master/1001. 一.解 ...

  6. BNUOJ 52305 Around the World 树形dp

    题目链接: https://www.bnuoj.com/v3/problem_show.php?pid=52305 Around the World Time Limit: 20000msMemory ...

  7. 28_数据库_第28天（数据库、表及表数据、SQL语句）_讲义

    今日内容介绍 1.MySQL数据库 2.SQL语句 01数据库概念 A: 什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来, 用户可以对数据库中的数据进行 ...

  8. Java集合技巧

    集合的一些技巧:   需要唯一吗? 需要:Set 需要制定顺序:  需要: TreeSet 不需要:HashSet 但是想要一个和存储一致的顺序(有序):LinkedHashSet 不需要:List ...

  9. 三公网络监督平台APP上线，源代码出售。

  10. profibus总线和profibus dp的区别

    profibus总线和profibus dp的区别:PROFBUS是一种国际性的开放式的现场总线标准,它既可以用于高速并且对于时间苛求的数据传输,也可以用于大范围的复杂通讯场合.PROFBUS-DP是 ...