背景：java开发的过程中，需要对数据进行可视化，这样方便客户理解此时的数据状态

语言：java，js，window7，echarts包文件

sample的例子下面的参照

https://www.echartsjs.com/examples/en/editor.html?c=line-sections

html

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta name="viewport" charset="UTF-8"
  5. 	content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  6. <title></title>
  7. <meta name="viewport"
  8. 	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  9. <script th:src="@{jquery/js/jquery-3.2.0.min.js}" type="text/javascript"></script>
  10. <script th:src="@{echarts/js/echarts.js}" type="text/javascript"></script>
  11. <script th:src="@{js/testCharts.js}" type="text/javascript"></script>
  12.  
  13. </head>
  14. <body>
  15. 	<div id="conditions">
  16.  
  17. 		<table>
  18. 			<tr>
  19. 				<td><label>検索条件：</label></td>
  20. 				<td><input type="radio" name="month" id="month"
  21. 					onclick="choseMonthOrDay(this)" /><label>月</label>
  22. 				</td>
  23. 				<td><input type="radio" name="month" id="month"
  24. 					onclick="choseMonthOrDay(this)" /><label>年</label>
  25. 				</td>
  26. 				<td><input type="button" onclick="beforRet()"
  27. 					style="background-color: #3987e4; width: 83px; height: 44px; border: 0;"
  28. 					value="戻る"></input></td>
  29. 			</tr>
  30. 		</table>
  31. 	</div>
  32.  
  33. 	<div id="chart"></div>
  34. 	<!-- 	<div id="chart"></div> -->
  35. </body>
  36. </html>

　　

js

  1. $(document).ready(function() {
  2.  
  3. //	$("#conditions").css("height", $(window).height()*0.1);
  4. //	$("#conditions").css("background-color", "#000000");
  5. //	alert($(window).width())
  6. 	$("#chart").css("height", $(window).height()*0.8);
  7. 	window.onresize = function() {
  8. //		$("#chart").css("height", $(window).height()*0.1);
  9. 		$("#conditions").css("height", $(window).height()*0.8);
  10. 	}
  11.  
  12. 	var dataList
  13. 	$.ajax({
  14. 		url : "/testCharts/selectData",
  15. 		type : 'post',
  16. 		data : {
  17. 			"habitSeq" : "2",
  18. 			"value" : "01"
  19. 		},
  20. 		cache : false,
  21. 		async : true,
  22. 		success : function(data) {
  23. 			dataList = JSON.parse(data);
  24. 			chartsDisplay(dataList)
  25. 		}
  26. 	});
  27. })
  28.  
  29. function chartsDisplay(dataList) {
  30.  
  31. 	if (dataList.length != 0) {
  32. 		var xAxisList = new Array();
  33. 		var yAxisList = new Array();
  34. 		for (var i = 0; i < dataList.length; i++) {
  35. 			xAxisList[i] = (dataList[i]["maxInsDateTime"]);
  36. 			yAxisList[i] = (dataList[i]["totalPrice"]);
  37. 		}
  38. 		var echart = echarts.init(document.getElementById('chart'));
  39. 		var option = {
  40. 			baseOption : {
  41. 				title : {
  42. 					text : '店舗売上状況',
  43. 					subtext : '売上分析'
  44. 				},
  45. 				legend : {
  46. 					data : [ '当月売上', '金額' ]
  47. 				},
  48. 				xAxis : {
  49. 					data : xAxisList
  50. 				// [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
  51. 				},
  52. 				yAxis : {
  53.  
  54. 				},
  55. 				tooltip : {
  56. 					show : true,
  57. 					formatter : '売上:{a}<br />日付:{b}<br />値:{c}'
  58. 				},
  59. 				series : [ {
  60. 					name : '当月売上',
  61. 					type : 'bar',
  62. 					data : yAxisList ,// [ 200, 312, 431, 241, 175, 275,
  63. 											// 369
  64. 					// ],
  65. 					markPoint : {
  66. 						data : [ {
  67. 							type : 'max',
  68. 							name : '最大値'
  69. 						}, {
  70. 							type : 'min',
  71. 							name : '最小値'
  72. 						} ]
  73. 					},
  74. 					markLine : {
  75. 						data : [ {
  76. 							type : 'average',
  77. 							name : '平均値',
  78. 							itemStyle : {
  79. 								normal : {
  80. 									color : 'green'
  81. 								}
  82. 							}
  83. 						} ]
  84. 					}
  85. 				}, {
  86. 					name : '金額',
  87. 					type : 'line',
  88. 					data :  yAxisList , // [ 321, 432, 543, 376, 286, 298,
  89. 											// 400
  90. 					// ],
  91. 					markPoint : {
  92. 						data : [ {
  93. 							type : 'max',
  94. 							name : '最大値'
  95. 						}, {
  96. 							type : 'min',
  97. 							name : '最小値'
  98. 						} ]
  99. 					},
  100. 					markLine : {
  101. 						data : [ {
  102. 							type : 'average',
  103. 							name : '平均値',
  104. 							itemStyle : {
  105. 								normal : {
  106. 									color : 'blue'
  107. 								}
  108. 							}
  109. 						} ]
  110. 					}
  111. 				} ]
  112. 			},
  113. 			media : [ {
  114. 				// 小与1000像素时候响应
  115. 				query : {
  116. 					maxWidth : 1000
  117. 				},
  118. 				option : {
  119. 					title : {
  120. 						show : true,
  121. 						text : '测试一下'
  122. 					}
  123. 				}
  124. 			} ]
  125. 		};
  126. 		// 每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
  127. 		window.onresize = echart.resize*0.8;
  128. 		echart.setOption(option);
  129. 	}
  130.  
  131. }

　　

效果：

’

利用js来画图形（例如：条状图，圆饼图等）的更多相关文章

  1. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  2. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  3. Excel 2010高级应用-条状图（五）

    Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...

  4. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  5. python中matplotlib绘图封装类之折线图、条状图、圆饼图

    DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...

  6. Matplotlib基本图形之饼状图

    Matplotlib基本图形之饼状图 饼状图特点: 饼状图显示一个数据系列中各项大小与各项总和的比例饼状图的数据点显示为整个饼状图的百分比 示例代码 import os import time imp ...

  7. d3.js（v5.7）树状图

    一.新建画布 二.数据处理 三.绘制连接线 图示: 四.绘制节点.文字 图示: 五.总结 path元素:其实就是定义了绘图的坐标点,从哪开始,移动到哪,怎样移动(命令) 具体可百度(或许以后我会总结一 ...

  8. maplotlib python 玩具绘图 横向纵向条状图

    from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...

  9. MS Chart 条状图【转】

    private void Form1_Load(object sender, EventArgs e) {            string sql1 = "select  类别,coun ...

随机推荐

  1. 深入详解JVM内存模型

    JVM内存结构 由上图可以清楚的看到JVM的内存空间分为3大部分: 堆内存 方法区 栈内存 其中栈内存可以再细分为java虚拟机栈和本地方法栈,堆内存可以划分为新生代和老年代,新生代中还可以再次划分为 ...

  2. HTML——MP4视频不能播放

    前言 HTML5中提供了video标签,但是为什么有的MP4视频可以播放,有的不能播放呢? 简介 当然是因为编码的问题咯~ 视频格式 标签属性 DOM参考 HTML 5 视频/音频参考手册 使用 &l ...

  3. 修改idea,webstrom,phpstrom 快捷键double shift 弹出search everywhere

    这个问题很困惑,因为这个功能很好用,查找什么很方便,but! 我用了十年的搜狗输入法,大家都知道搜狗输入法按shift中英文切换很方便,特别在写代码时候...所以就和这个double shift功能冲 ...

  4. 黑马2017年java就业班全套视频教程

    黑马程序员培训班 黑马2017年java就业班全套视频教程 ava学习路线图.pptx等多个文件   - 2019-07-20 10:03     老师分享的资料 - 2019-07-20 10:03 ...

  5. 【比赛题解】CSP2019 简要题解

    D1T1 code 签到题,大家都会. 可以从高位往低位确定,如果遇到 \(1\),则将排名取反一下. 注意要开 unsigned long long. #include <bits/stdc+ ...

  6. 06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作

    上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来,当然这也是为以后的实战作基础准备,基础打牢,我们才能飞速前进. 1.案例说明 我们 ...

  7. LeetCode 837. New 21 Game

    原题链接在这里:https://leetcode.com/problems/new-21-game/ 题目: Alice plays the following game, loosely based ...

  8. Java 用Jackson进行json和object之间的转换（并解决json中存在新增多余字段的问题）

    1.添加jackson库 如果是maven工程,需要在pom.xml中添加jackson的依赖: <dependency>      <groupId>com.fasterxm ...

  9. js解决大文件断点续传

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  10. Mysql 之根据经纬度按距离排序

    一.方式一 st_distance 计算的结果单位是度,需要乘111195(地球半径6371000*PI/180)是将值转化为米. SELECT *, (st_distance(point(lng,l ...