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 ...
随机推荐
- chown命令详情
基础命令学习目录首页 原文链接:https://www.jb51.net/article/98255.htm chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名 ...
- centos下配置gitosis服务器遇到的困难
这篇博客主要讲的是在centos下配置gitosis遇到的问题. 背景:centos7.2 64 :gitosis2.0 1.困难1 1)产生的问题及原因.gitosis没有安装成功,没有出现fini ...
- TeamWork#3,Week5,Scrum Meeting 11.15
经过最近一段时间的努力,我们调整了爬虫结构,并在继续进行爬虫开发,马上可以进行新爬虫与服务器连接的测试. 成员 已完成 待完成 彭林江 基本完成爬虫结构调整 新爬虫与服务器连接 郝倩 基本完成爬虫结构 ...
- Daily Scrum (2015/11/8)
由于编译大作业临近deadline以及各项选修课即将结课,虽然PM强调软工任务也很紧迫,但是大多数成员表示今天想请假一天.符美潇今天把自己所负责的数据库编码部分和谢金洛的UI进行了对接.在测试过程中发 ...
- 修改MyEclipse工作空间
MyEclipse如何更改工作空间,MyEclipse是java开发常用工具,在开发的过程中我们会经常切换工作空间来切换项目内容,初学者来说有必要讲一下如何切换工作空间 工具/原料 MyEclip ...
- HDU 4418 Time travel 期望dp+dfs+高斯消元
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4418 Time travel Time Limit: 2000/1000 MS (Java/Othe ...
- Internet History, Technology and Security (Week3)
Week3. Welcome to week 3! This is our fourth and final week of History where we make the connection ...
- Python库moviepy
目录 介绍和下载安装 视频截取和拼接 视频加水印
- Eclipse+MySQL+Tomcat web开发安装配置
转载文章: 链接:https://blog.csdn.net/bbyyz01/article/details/78142126 1.Eclipse 这里选择Eclipse集成开发环境. 可以直接在官网 ...
- canvas制作原生的百分比圆形比例等
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...