echarts Java编写

echarts实现有两种方式:
一种是前台用js实现
另一种是后台使用Java编写转换成json数据
现在学习的是使用java来编写
使用java编写echarts
首先，下载echarts Java类库
地址:http://git.oschina.net/free/ECharts

echarts的主结构都是由option创建，其它都是在option的基础上添加进去

Java代码:

public Option userPowerOption(List<PsmUsePower> list, String year) {// TODO Auto-generated method stubString titleText=year+"用电详情";//创建optionOption option = new Option();//设置titleoption.title().setX("14");option.title().setY("10");option.title(titleText);option.title().textStyle().fontFamily("方正兰亭黑简体").fontSize(16).color("rgb(51, 51, 51)").fontWeight("400");//设置副标题option.title().setSubtext("单位:(kw·h)");option.title().subtextStyle().fontFamily("方正兰亭黑简体").color("rgb(51, 51, 51)").fontWeight("400");//设置坐标系网格option.grid().x("40").x2("40").y("60").y2("30");option.grid().backgroundColor("rgb(248, 252, 248)");//设置悬浮提示框option.tooltip().trigger(Trigger.axis);String formaString ="function(params){"+ "var res1 = '时间 : ' +params[0].name+'<br/>';"+ "var res2 = res1 +  params[3].seriesName + ' : ' + params[3].value+' kw·h'+'<br/>';"+ "var res3=res2+params[1].seriesName +':' +params[1].value+'kw·h'+'<br/>';"+ "var res4=res3+params[2].seriesName +':' +params[2].value+'kw·h'+'<br/>';"+ "var res5=res4+params[0].seriesName +':' +params[0].value+'kw·h';"+ "return res5}";option.tooltip().formatter(formaString);option.tooltip().axisPointer().type(PointerType.shadow);//设置图例option.legend().setX("350");option.legend().setY("14");option.legend("月总用电量","月参考用电量","月偏差电量","月参考偏差电量");option.legend().textStyle().fontFamily("方正兰亭黑简体").fontWeight("400").color("rgb(51, 51, 51)");option.legend().formatter("function(name){"+ "return name+'(kw·h)'}");option.legend().x("90").y("35");//设置工具箱,切换线性，柱状图option.toolbox().show(true).feature(new MagicType(Magic.line, Magic.bar), new MagicType(Magic.line, Magic.bar), Tool.saveAsImage).padding(10,50,5,5);//设置类目轴 x轴CategoryAxis categoryAxis = new CategoryAxis();categoryAxis.data("1月份","2月份","3月份","4月份","5月份","6月份","7月份","8月份","9月份","10月份","11月份","12月份");categoryAxis.axisLabel().textStyle().fontFamily("方正兰亭黑简体").color("rgb(130, 130, 130)");categoryAxis.boundaryGap(true);categoryAxis.axisLine().lineStyle().width(1).color("rgb(176, 176, 176)");categoryAxis.axisTick().lineStyle().color("rgb(176, 176, 176)");option.xAxis(categoryAxis);//设置值轴ValueAxis valueAxis = new ValueAxis();valueAxis.splitLine().show(false);valueAxis.axisLine().lineStyle().width(1);valueAxis.axisLabel().textStyle().fontFamily("方正兰亭黑简体").color("rgb(130, 130, 130)");option.yAxis(valueAxis);//默认设置饼图Bar bar1 = new Bar("月总用电量");//叠加图显示，对于同一列叠加图的stack相同bar1.stack("总量");bar1.itemStyle().normal().color("rgb(255, 134, 26)").areaStyle().typeDefault().color("rgba(255, 134, 26,0.5)");bar1.data(123.0, 143.9, 172.0, 123.2, 125.6, 176.7, 135.6, 162.2, 92.6, 120.0,163.4, 134.3);bar1.barCategoryGap("40%");Bar bar2 = new Bar("月参考用电量");bar2.stack("参考");bar2.itemStyle().normal().color("rgb(34, 137, 196)").areaStyle().typeDefault().color("rgba(34, 137, 196,0.5)");bar2.data(110.0, 123.9, 102.0, 113.2, 105.6, 136.7, 115.6, 122.2, 102.6, 130.0,123.4, 104.3);bar2.barCategoryGap("40%");Bar bar3 = new Bar ("月偏差电量");bar3.stack("总量");bar3.itemStyle().normal().color("rgb(215, 38, 59)").areaStyle().typeDefault().color("rgba(215, 38, 59,0.5)");bar3.data(7.0, 6.9, 8.0, 7.2, 5.6, 6.7, 5.6, 2.2, 2.6, 7.0,3.4, 4.3);Bar bar4 = new Bar ("月参考偏差电量");bar4.stack("参考");bar4.itemStyle().normal().color("rgb(215, 38, 59)").areaStyle().typeDefault().color("rgba(215, 38, 59,0.5)");bar4.data(7.0, 6.9, 8.0, 7.2, 5.6, 6.7, 5.6, 2.2, 2.6, 7.0,3.4, 4.3);option.series(bar1,bar2,bar3,bar4);return option;}

现在我们需要把option类型的值转换成json数据，Javaecharts类库也提供了其转换工具类
String optionStr= GsonUtil.format(csUserPowerOptionService.userPowerOption(userPowerList, year));

现在只需在前台得到此json数据，然后把它在一个空白处显示出来

前端做的工作有如下几步:
1.引入echarts的js开发包
2.准备一个具备长宽的Dom
3.使用echarts的init()初始化此echarts实例
4.使用setOption把其json数据传进去

js代码；

//echarts加载
function echartsLoad(data){//路径配置 require.config({ paths:{ echarts: 'http://'+getLocalPath()+'/resource/script-lib/echarts'} });//设置主要样式 require( ['echarts','echarts/theme/default',   //加载主题'echarts/chart/line',       //加载需要的图形    按需加载'echarts/chart/bar'],//图标数据对象初始化function (ec,theme){var bidEcharts=document.getElementById("ec_echars");var BidChart=ec.init(bidEcharts,theme);if (data == "error") {EnergyAnalyzeChart.showLoading({text : "中标电量数据读取错误",effect : "bar",textStyle : {fontSize : 20,color : "red"}});} else {//设置数据BidChart.setOption(eval('(' + data + ')'));}// 多窗口自适应window.addEventListener("resize", function() {BidChart.resize();});});}

echarts Java编写相关推荐

java编写代码用什么_如何学习用Java编写代码：为什么要学习以及从哪里开始
java编写代码用什么 by John Selawsky 约翰·塞劳斯基(John Selawsky) 如何学习用Java编写代码:为什么要学习以及从哪里开始 (How to learn to cod ...
java培训教程分享：Java编写软件代码自动提示功能
本期的java培训教程分享主要是介绍的java编写软件代码的一个自动提示功能,很多零基础和初学java的同学们对这一块还不是很了解,Eclipse for android 实现代码自动提示智能提示功能 ...
【项目展示】一个有点难度的猜数字小游戏（Java编写）
(声明:本文部分图片来自网络,如有侵权请联系,将第一时间删除或更换图片) 本文目录 1.前言 2.规格说明 3.源代码 4.运行结果 5.感想 1.前言我在自己的博客里上传了一些本科时编过.最近又改 ...
Java编写的五子棋小游戏
看书的时候看到一个不完整的Java编写的一个五子棋小游戏,为了恢复一下编程能力刚刚把这个小程序完成了. 实现的功能很简单,两人对下五子棋,程序自动回判断输赢.在ubuntu下搞得,没有装什么高端的输入 ...
java编写词法分析器
词法分析器就是通过扫描一段程序判断是否是关键字.标识符.常数.分界符.运算符.一般分为一符一种和经典五中: 这里我用的是经典五中,此词法分析器是用java编写的: /* 保留字|关键字:1 操作符|运 ...
【使用Java编写的B*算法】
使用XP系统之家Java编写的B*算法 package rpg.stage.path; import java.util.ArrayList; import java.util.HashSet; im ...
java编写存钱_用Java编写一个简单的存款
package desposit.money; public class DespositMoney { public static void main(String[] args) { Custom ...
java applet 记事本_jsb java编写的安卓app记事本程序，适合app初学者 Applet 243万源代码下载- www.pudn.com...
文件名称: jsb下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 86 KB 上传时间: 2015-08-25 下载次数: 0 提供者: dr 详细说明:j ...
java 输入方程,用java 编写一程序,求解一元二次方程：aX2+bX+c=0.参数a、b及c从命令行做参数输入 java...
题目: 用java 编写一程序,求解一元二次方程:aX2+bX+c=0.参数a.b及c从命令行做参数输入 java 答案参考: 以下程序在jdk5.0测试通过 import java.util.Sca ...

echarts Java编写

echarts Java编写相关推荐

最新文章

热门文章