利用js来画图形（例如：条状图，圆饼图等）
背景：java开发的过程中，需要对数据进行可视化，这样方便客户理解此时的数据状态
语言：java，js，window7，echarts包文件
sample的例子下面的参照
https://www.echartsjs.com/examples/en/editor.html?c=line-sections
html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" charset="UTF-8"
content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script th:src="@{jquery/js/jquery-3.2.0.min.js}" type="text/javascript"></script>
<script th:src="@{echarts/js/echarts.js}" type="text/javascript"></script>
<script th:src="@{js/testCharts.js}" type="text/javascript"></script> </head>
<body>
<div id="conditions"> <table>
<tr>
<td><label>検索条件：</label></td>
<td><input type="radio" name="month" id="month"
onclick="choseMonthOrDay(this)" /><label>月</label>
</td>
<td><input type="radio" name="month" id="month"
onclick="choseMonthOrDay(this)" /><label>年</label>
</td>
<td><input type="button" onclick="beforRet()"
style="background-color: #3987e4; width: 83px; height: 44px; border: 0;"
value="戻る"></input></td>
</tr>
</table>
</div> <div id="chart"></div>
<!-- <div id="chart"></div> -->
</body>
</html>
js
$(document).ready(function() {
// $("#conditions").css("height", $(window).height()*0.1);
// $("#conditions").css("background-color", "#000000");
// alert($(window).width())
$("#chart").css("height", $(window).height()*0.8);
window.onresize = function() {
// $("#chart").css("height", $(window).height()*0.1);
$("#conditions").css("height", $(window).height()*0.8);
}
var dataList
$.ajax({
url : "/testCharts/selectData",
type : 'post',
data : {
"habitSeq" : "2",
"value" : "01"
},
cache : false,
async : true,
success : function(data) {
dataList = JSON.parse(data);
chartsDisplay(dataList)
}
});
})
function chartsDisplay(dataList) {
if (dataList.length != 0) {
var xAxisList = new Array();
var yAxisList = new Array();
for (var i = 0; i < dataList.length; i++) {
xAxisList[i] = (dataList[i]["maxInsDateTime"]);
yAxisList[i] = (dataList[i]["totalPrice"]);
}
var echart = echarts.init(document.getElementById('chart'));
var option = {
baseOption : {
title : {
text : '店舗売上状況',
subtext : '売上分析'
},
legend : {
data : [ '当月売上', '金額' ]
},
xAxis : {
data : xAxisList
// [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
},
yAxis : {
},
tooltip : {
show : true,
formatter : '売上:{a}<br />日付:{b}<br />値:{c}'
},
series : [ {
name : '当月売上',
type : 'bar',
data : yAxisList ,// [ 200, 312, 431, 241, 175, 275,
// 369
// ],
markPoint : {
data : [ {
type : 'max',
name : '最大値'
}, {
type : 'min',
name : '最小値'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均値',
itemStyle : {
normal : {
color : 'green'
}
}
} ]
}
}, {
name : '金額',
type : 'line',
data : yAxisList , // [ 321, 432, 543, 376, 286, 298,
// 400
// ],
markPoint : {
data : [ {
type : 'max',
name : '最大値'
}, {
type : 'min',
name : '最小値'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均値',
itemStyle : {
normal : {
color : 'blue'
}
}
} ]
}
} ]
},
media : [ {
// 小与1000像素时候响应
query : {
maxWidth : 1000
},
option : {
title : {
show : true,
text : '测试一下'
}
}
} ]
};
// 每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
window.onresize = echart.resize*0.8;
echart.setOption(option);
}
}
效果：
’
利用js来画图形（例如：条状图，圆饼图等）的更多相关文章
- HighCharts之2D堆条状图
HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...
- HighCharts之2D条状图
HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...
- Excel 2010高级应用-条状图（五）
Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...
- Flex实现双轴条状图
1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...
- python中matplotlib绘图封装类之折线图、条状图、圆饼图
DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...
- Matplotlib基本图形之饼状图
Matplotlib基本图形之饼状图 饼状图特点: 饼状图显示一个数据系列中各项大小与各项总和的比例饼状图的数据点显示为整个饼状图的百分比 示例代码 import os import time imp ...
- d3.js（v5.7）树状图
一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...
- maplotlib python 玩具绘图 横向纵向条状图
from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...
- MS Chart 条状图【转】
private void Form1_Load(object sender, EventArgs e) { string sql1 = "select 类别,coun ...
随机推荐
- ZOJ - 3265: Strange Game （优化 二分图匹配）
pro:有一个长度为N的数组a[i],要求选择k[i]>0,使得b[i]=a[i]^k[i]%M中出现的不同数最多.N<=200, M<=1e9: sol:a^x%p的个数的有限的, ...
- 异常检测(Anomaly detection): 异常检测算法（应用高斯分布）
估计P(x)的分布--密度估计 我们有m个样本,每个样本有n个特征值,每个特征都分别服从不同的高斯分布,上图中的公式是在假设每个特征都独立的情况下,实际无论每个特征是否独立,这个公式的效果都不错.连乘 ...
- EntityFramework6 学习笔记（三）
你可能要问,我用EF不就为了避免写SQL吗?如果要写SQL我不如直接用ADO.NET得了.话虽然这么说没错,可有些时候使用EF操作数据还是有一些不方便,例如让你根据条件删除一组记录,如果按照正常的流程 ...
- Cogs 739. [网络流24题] 运输问题(费用流)
[网络流24题] 运输问题 ★★ 输入文件:tran.in 输出文件:tran.out 简单对比 时间限制:1 s 内存限制:128 MB «问题描述: «编程任务: 对于给定的m 个仓库和n 个零售 ...
- 表单提交 curl和浏览器方式
表单被提交时,每个表单域都会被Url编码之后才在被发送. 浏览器每次向服务器发送url时,会进行编码,然后web服务器再进行解码. 所以,理论上,curl模拟登陆时,所传参数都必须urlencode一 ...
- C#程序发送POST请求数据中+号丢失解决方案
C#程序把RSA加密后的密码发送到后台总是校验失败,用wireshark抓包检查发现POST发出的密码中的+号都变成了空格.为了正确的发送数据,要用URL转码协议进行转码. 有两个方法进行URL转码 ...
- c++中关于堆和堆栈的区别
在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区. 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量 的存储区.里面的变量通常是局部 ...
- 如何更改sdk版本
- 去除空格JS
$(document).ready(function (){//通用方法去输入框前后空格 $("form").on("change",function () { ...
- 【DataStage】使用Sequence Job报错：CopyOfseq_ld..JobControl (fatal error from @Coordinator): Sequence job (restartable) will abort due to previous unrecoverable errors
错误描述: 在使用Sequence Job加载作业的时候,报了个错,详细错误内容如下: 出现这个错误的原因是由于以下配置问题,Excution action的状态为Run造成. 解决方案: 将Excu ...