怎么用java编写echarts代码
2个回答
展开全部
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 stub
String titleText=year+"用电详情";
//创建option
Option option = new Option();
//设置title
option.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;
}
一种是前台用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 stub
String titleText=year+"用电详情";
//创建option
Option option = new Option();
//设置title
option.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;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询