Java版ECharts图表库ECharts-Java

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

在echarts中自定义提示框内容
option = {
title : { text: ‘某地区蒸发量和降水量’, subtext: ‘纯属虚构’ }, /** *
tooltip配置项示例 */ /** * tooltip配置项示例 */
//用formatter回调函数显示多项数据内容 tooltip: { trigger: ‘axis’,
formatter: function (params, ticket, callback) { var htmlStr = ”;
for(var i=0;i<params.length;i++){ var param = params[i]; var xName
= param.name;//x轴的名称 var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值 var color = param.color;//图例颜色 if{
htmlStr += xName + ‘<br/>’;//x轴的名称 } htmlStr +='<div>’;
//为了保证和原来的效果一样,这里自己实现了一个点的效果 htmlStr +=
‘<span
style=”margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:’+color+’;”></span>’;
//圆点后面显示的文本 htmlStr += seriesName + ‘:’ + value + ‘笔’;
htmlStr += ‘</div>’; } return htmlStr; } } , legend: {
data:[‘蒸发量’,’降水量’] }, xAxis : [ { type : ‘category’, data :
[‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’]
} ], yAxis : [ { type : ‘value’ } ], series : [ { name:’蒸发量’,
type:’bar’, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6,
20.0, 6.4, 3.3], }, { name:’降水量’, fontSize:48, type:’bar’,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
2.3], } ] }; 异步请求echarts查询
<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>ECharts入门</title> </head>
<body> <!– 引入ECharts和JQuery文件 –> <script
src=’../js/echarts.js’></script> <script
src=”../js/jquery-1.8.3.min.js”></script> <script>
//将集合中的数据保留两位小数 function dataToFixed { var seriesData =
[]; for (var i = 0; i < data.seriesSaleList.length; i++) {
//将销量保留两位小数 var temp = data.seriesSaleList[i].toFixed;
seriesData.push; } return seriesData; } //生成图标的方法 function
generateChart { //基于准备好的DOM,初始化echarts实例 var myChart =
echarts.init(document.getElementById; //指定图表的配置项和数据
myChart.clear(); var option = { title: { text: ‘销售额曲线图’ },
//提示框组件 tooltip: { //坐标轴触发,主要用于柱状图,折线图等 trigger:
‘axis’ }, //数据全部显示 axisLabel: { interval: 0 }, //图例 legend: {
data: [‘销售额’] }, //横轴 xAxis: { data: data.xAxisList }, //纵轴
yAxis: {}, //系列列表。每个系列通过type决定自己的图表类型 series: [ {
name: ‘销售额’, //折线图 type: ‘line’, data: dataToFixed//处理小数点数据
} ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption; }
//buttion调用的方法 function getData() { var start = $.val(); var end =
$.val(); //异步请求 $.post(
“../ordersale/guFindEchartsData.do”,//访问地址 {start: start, end:
end},//携带的参数 function { generateChart; }, “json” ); }
</script> <div align=”center”> <label
for=”start”>开始日期:</label><input type=”date”
value=”2018-08-13″/> <label
for=”end”>结束日期:</label><input type=”date”
value=”2018-08-16″/> <button
onclick=”getData()”>查询</button> </div> <hr>
<!– 为ECharts准备一个具备大小的DOM容器–> <div id=’main’
style=’width: 90%;height:400px;’ align=”center”></div>
</body> </html> echarts data:function写法

—————————————-bar—————————–
function barcount() { var myChart =
echarts.init(document.getElementById(‘jdxgswztj’)); myChart.setOption({
title : { text : ‘?????????’, x:’center’, textStyle : { fontSize : ’28’
} }, tooltip : {textStyle : { fontSize : ’20’ }}, legend : { data : [
/* ‘“`’ */ ] }, xAxis : { data : [], axisLabel:{ textStyle:{
fontSize:20 }} }, yAxis : [{ axisLabel : { formatter: ‘{value}’,
textStyle: { fontSize:20 } } }], series : [ { name : ”,/*““
*/ type : ‘bar’, data : [], textStyle : { fontSize : ’38’ } }],
color : [ “#1397DC”, “#12C1EC”, “#6FE498”, “#E2E2E2”, “#3CB2EF”,
“#71F6F9”, “#3EE486”, “#FFF065” ] }); myChart.showLoading(); var
names = []; //???????????X????? var nums = []; //???????????Y????
$.ajax({ type : “post”, async : true, url : “jdxgswz/jdxtzGsWzCount”,
data : {}, dataType : “json”, success : function { if { for (var i = 0;
i < result.length; i++) { names.push(result[i].xlmc);
//????????????? } for (var i = 0; i < result.length; i++) {
nums.push(result[i].shuliang); //????????????? }
myChart.hideLoading(); //?????? myChart.setOption({ //?????? xAxis : {
data : names }, series : [ { // ???????????? name : ”,/*““*/
data : nums, barWidth: ‘30%’, }] }); } }, error : function {
//?????????? alert(“????????!”); myChart.hideLoading; }
—————-legend显示位置设置————————————-

ECharts-Java项目简介

ECharts是一款功能非常强大的JavaScript图表库,ECharts-Java是ECharts的Java版,用Java代码实现了ECharts的所有图表功能,ECharts中的Json结构也都转换成了Java对象,这样我们使用起来会非常方便,设置也相当灵活。

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构
Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,Pie-饼图,Chord-和弦图等,支持ECharts中的
所有图表。支持所有的Style类,如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支
持多种Data数据类型,一个通用的Data数据,以及PieData,MapData,ScatterData,KData等针对性的数据结构。

你可以使用本项目直接构造一个Option对象,转换为JSON后直接用js设置myChart.setOption(option),或者你也可以在前段构造基本的Option对象,然后使用本项目来构造其中需要的任意某部分的数据,如使用Series支持的图表类型创建Series数据。

项目支持

图表类型

  • Line – 折线(面积)图
  • Bar – 柱状(条形)图
  • Scatter – 散点(气泡)图
  • K – K线图
  • Pie – 饼(圆环)图
  • Radar – 雷达(面积)图
  • Chord – 和弦图
  • Force – 力导向布局图
  • Map – 地图
  • 澳门新葡亰手机版,Gauge – 仪表盘
  • Funnel – 漏斗图
  • Island – 孤岛图(官方未提供,这里只有数据Island对象)