原生的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. nodejs 中jead模板改为ejs

    var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set(' ...

  2. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  3. psp报告

    1.读材料回答问题 (1)回想一下你曾经对计算机专业的畅想.当初你是如何做出选择计算机专业的决定的?你认为过去接触到的课程是否符合你对计算机专业的期待,为什么?你觉得计算机是你喜欢的领域吗,它是你擅长 ...

  4. 20162314 《Program Design & Data Structures》Learning Summary Of The Second Week

    20162314 2017-2018-1 <Program Design & Data Structures>Learning Summary Of The Second Week ...

  5. 07慕课网《进击Node.js基础（一）》HTTP小爬虫

    获取HTML页面 var http = require('http') var url='http://www.imooc.com/learn/348' http.get(url,function(r ...

  6. c#学习路线及目录导航

    一 很久前的想法 转眼间,2018年已经过了四分之一,从我进入学校选择计算机专业到现在工作,已经过去了4年之久了.这一路走来经历了很多的曲折,对软件开发这个职业有了许多新的认识,我主要是从事NET领域 ...

  7. Unity3D游戏开发——收集当前关卡游戏中分散的物件

    运用场景 许多游戏中会有一些供玩家拾起的物件,例如装备.血包.道具等.当玩家与物件进行碰撞后,则会进入仓库. 本篇介绍了简单的碰撞过程. 原理 基本的碰撞机制,用到OnTriggerEnter()碰撞 ...

  8. Hive与Hbase的区别

    1. 两者分别是什么?     Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被 ...

  9. js 函数讲解

    函数 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 概述 函数的声明 函数的重复声明 圆括号运算符,return 语句和递归 第一等公民 函数名的提升 不能 ...

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

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