原生的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. 多线程分段下载研究的python实现（一）

    我一直对下载文件比较感兴趣.现在我下载文件大部分是用迅雷,但迅雷也有一些不如意的地方,内存占用大,一些不必要的功能太多,不可定制.尤其是最后一点.现在有些下载对useragent,cookie,aut ...

  2. Python基础_eval(),exec(),globals(),locals(),compile()

    转发:http://www.cnblogs.com/yyds/p/6276746.html 1. eval函数 函数的作用: 计算指定表达式的值.也就是说它要执行的Python代码只能是单个运算表达式 ...

  3. babel无法编译？

    ECMAScript 6(ES6)的发展或者说普及之快可以说是难以想象的,对很多人来说ECMAScript 5(ES5)都还普及呢.现代浏览器对ES6新特新或多或少的有些支持,但支持度不高,所以要想在 ...

  4. Linux安装软件包

    今天在坐公交的路上看到一遍文章感觉还不错,先收集了.原文链接 Linux安装软件包

  5. 2018软工实践—Beta冲刺(2)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Beta 冲鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调组内工作 修改前端界面 展示GitHub当日代码/文档签入记录(组内 ...

  6. Unity控件ScrollView使用问题记录

    Unity版本:5.6.2 控件Scroll View由4部分组成,如图: 1.含有Scroll Rect组件的根节点:Scroll View 2.含有Mask组件的节点:Viewport 3.所有内 ...

  7. Linux上多次restore Tensorflow模型报错

    环境:python3,tensotflow 在恢复了预先训练好的模型进行预测时,第一次是能够成功执行的,但我多次restore模型时,出现了以下问题: 1.ValueError: Variable c ...

  8. C++获取private的变量-偷走private

    private提供了对数据的封装,使得private成员只能被类自身的成员函数以及类的友元访问,其他的函数或者类想要访问private成员只能通过该类所提供的set和get的方法进行访问, 或者返回其 ...

  9. 二叉查找树ADT--C语言描述

    首先给出此ADT的声明: struct TreeNode; typedef struct TreeNode *Position; typedef struct TreeNode *SearchTree ...

  10. Appium 服务关键字（转）

    来源: https://github.com/appium/appium/blob/master/docs/cn/writing-running-appium/caps.cn.md#appium-服务 ...