echarts分组柱状图的前后台处理 带平均线显示
原生的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分组柱状图的前后台处理 带平均线显示的更多相关文章
- echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- Echarts堆积柱状图排序问题
Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...
- SSRS----关于图表参考线（平均线）的添加
在开发报表的时候,遇到了一个问题,客户需要在气泡图上添加水平和竖直两条平均线(结果参考如下图). 个人知识背景 一般添加参考线本身是有一个相关的设置的,但一般都是相对于Y值,即平行于X轴的.用类似的方 ...
- wxPython制作跑monkey工具（python3）-带事件百分比显示界面
一. wxPython制作跑monkey工具(python3)-带事件百分比显示界面 源代码 Run Monkey.py #!/usr/bin/env python import wx import ...
- FileUpload控件实现单按钮图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...
- Asp.net实现同页面内多图片自动上传并带预览显示
FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理: 此方法适合针对有后台生成的图片相关内容,例如购物网站商品展示页面中的封面图片,图片的数量由后台访问数据库,并加载到页面.这种 ...
- 滑动平均线的notebook画法
滑动平均线,本程序解决了如何在matplotlib中使用中文显示,环境python2.7 最好使用 anaconda 环境使用sns似使得图片更加美观,不多说,上代码 import tushare a ...
- EchartJS平均线、最大值、最小值
1.先来看一个没有平均线.最大值.最小值的简单实例 option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigge ...
随机推荐
- “北航Clubs”项目汇报
一.项目展示 二.用户的痛点与需求 1.北航学生,在百团大战之后,很难再有渠道加入社团,了解社团活动,简直如蒙在鼓里! 2.当你周末想参加一些活动,充实一下枯燥的求学生活时,却发现不知道有哪些社团有活 ...
- [buaa-SE-2017]个人作业-回顾
个人作业-回顾 提问题的博客:[buaa-SE-2017]个人作业-Week1 Part1: 问题的解答和分析 1.1 问题:根据书中"除了前20的学校之外,计科和软工没有区别"所 ...
- MySQL课堂练习 20162315
练习内容 1.参考教材相关代码,提交能连接到world的截图(有学号水印) 2.查询world数据库,获得人口超过500万的所有城市的列表. 3.查询world数据库,获得New Jersey州所有城 ...
- 【请仔细核对Git地址】关于代码量排名的说明
1.截至2017年3月14日,1623班级代码统计情况如下: 2.代码量排名是基于码云的git地址统计的,请大家仔细核对以下个人地址,如有问题请及时联系我. 20162301 20162302 201 ...
- GIT理解
以前从来没听过GIT,根本不知道是什么东西.老师突然让注册一个GIT帐号,不知道怎么注册, 真有点不知所措了,又听说是全英文的,感觉也是醉了!登录进去看了看,看的似懂非懂,自己 也不敢妄下定论于是上网 ...
- 作业6 团队项目之（开始第一个Sprint）
一.模仿并超越--类似应用. 五个app:1.四则运算小学堂(500-999次下载 3.57M) 2.小学生算术练习(9000+次下载 232K) 3.小学生加减题生成练习工具(2万-3万次下载 1. ...
- mvc 页面方法学习-RenderBody方法
教程地址:https://docs.microsoft.com/zh-cn/aspnet/mvc/overview/getting-started/introduction/adding-a-view
- Android开发中常见的内存泄露案例以及解决方法总结
1.单例模式引起的内存泄露 由于单例模式的静态特性,使得它的生命周期和我们的应用一样长,如果让单例无限制的持有Activity的强引用就会导致内存泄漏如错误代码示例: public class Use ...
- 6/12 sprint2 看板和燃尽图的更新
- 1014 C语言文法定义与C程序的推导过程
<程序> -> <外部声明> | <程序> <外部声明> <外部声明> -> <函数定义> | <声明> ...