原生的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. Ajax中post后台.net MVC中Controller的路径问题。

    今天使用ajax的post方法,去访问mvc的controller,url的传值是 "//ProductCatalog/PostShareInfo",发现无论如何都访问不到. 我实 ...

  2. 实践lnmpde 的安装

    1.先安装apache, yum install httpd 2.安装MySQL rpm -qa | grep mysql       // 这个命令就会查看该操作系统上是否已经安装了mysql数据库 ...

  3. ffmpeg——压缩mav格式音频

    今天偶然帮朋友压缩一个mav格式的音频.开始用压缩码率的方式,mav格式的音频体积一点都没变,查资料需要压缩音频文件的采样率和声道才能压缩mav格式的音频. 压缩要求是:将一个mav格式的音频文件,由 ...

  4. 读取.properties配置文件并保存到另一个.properties文件内

    代码如下 import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.FileOutputSt ...

  5. Daily Scrum (2015/10/28)

    昨天DEV们完成了一部分代码风格的修整.今晚在与其他组进行交流时我们发现我们的代码是需要在服务器上运行的,而且服务器是需要配置的,而且据说需要花一些时间.所以在编写代码之前PM提出我们应该先把服务器搭 ...

  6. 关于rand()函数 转载于其他人

    C++中的rand()函数 分类: 编程语言/ C#/ 文章 C++中产生随机数种子对于初学者一直都很困惑．大家知道,在C中有专门的srand(N)函数可以轻松实现这一功能,然而在C++中则要复杂一些 ...

  7. 福大软工 Alpha 事后诸葛亮

    写在前面 林燊大哥 一路走来,好不容易,终于完结了. 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决的问题 用户在进店之前无法得知店铺的优劣 ...

  8. b5

    吴晓晖(组长) 过去两天完成了哪些任务 完善推荐算法 展示GitHub当日代码/文档签入记录 接下来的计划 推荐算法 还剩下哪些任务 组员:刘帅珍 过去两天完成了哪些任务: 修改原型,整理背景 明日计 ...

  9. 一、SpringBoot热部署

    一.热部署优点: 1.无论本地还是线上都适用 2.无需重启服务器 (1)提高开发.调试效率 (2)提升发布.运维效率.降低运维成本 二.和热加载的区别

  10. MongoDB中的数据导出为excel CSV 文件

    1.打开命令行,进入我们所安装的mongodb路径下的bin文件夹 2.我们采用bin文件夹下的mongoexport方法进行导出, mongoexport -d myDB -c user -f _i ...