原生的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. Tree - AdaBoost with sklearn source code

    In the previous post we addressed some issue of decision tree, including instability, lack of smooth ...

  2. traceroute命令详解

    基础命令学习目录首页 原文链接:https://www.cnblogs.com/peida/archive/2013/03/07/2947326.html 通过traceroute我们可以知道信息从你 ...

  3. pairwork（黄敬博12061156和黄伟龙12061172）

    结对编程: 结对编程的优缺点: 优点: 1.相互督促,共同为了完成目标而努力: 2.节省时间,通过将疑难问题分开解决,共同讨论,实现了更高效的时间利用率: 3.能力互补,提高代码的质量,同时也提高了测 ...

  4. iOS开发学习-资源打包

    图片是被放到Images.xcassets中 1.部署版本在>=iOS8的时候,打包的资源包中的图片会被放到Assets.car 图片被压缩: 2.部署版本在<iOS8的时候,打包的资源包 ...

  5. Task 7 买书最低价格问题

    任务: 书店针对<哈利波特>系列书籍进行促销活动,一共5卷,用编号0.1.2.3.4表示,单独一卷售价8元, 具体折扣如下所示: 本数    折扣 2         5% 3       ...

  6. beta冲刺（5/7)

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4 ...

  7. 第三次作业— C++计算器项目的初始部分

    作业题目: C++计算器项目的初始部分 仓库 代码: Scan.h #ifndef SCAN_H #define SCAN_H #include<string> #include<i ...

  8. 《TCP/IP 详解 卷1：协议》第 11 章：名称解析和域名系统

    引言 到目前为止,我们使用 IP 地址来研究参与网络的主机.对于大众来说,这些地址太繁琐且难以记忆.为了使用如 TCP 和 IP 等协议,主机名称通过名为名称解析(name resolution)的过 ...

  9. CXGRID用法（取行、列值；定位选中某行等等）[转]

    Delphi Cxgrid获取选中行列,排序规则,当前正在编辑的单元格内的值 cxGrid1DBTableView1.Controller.FocusedRowIndex 当前行号 cxGrid1DB ...

  10. java中为什么要进行对象序列化？

    序列化其实很好理解,假如你现在做一个项目,项目是分工合作的,并且你喝其他小组成员不在同一个城市,那么你要如何把你写的那些类给其他小组成员呢?这个时候就要用到序列化了,简单的说:序列化就是将内存中的类或 ...