echarts Java编写

最新推荐文章于 2024-08-10 07:49:01 发布

strong_yu

最新推荐文章于 2024-08-10 07:49:01 发布

阅读量6.1k

点赞数 1

分类专栏：工作

本文链接：https://blog.csdn.net/strong_yu/article/details/53156092

版权

工作专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
	
	}

现在我们需要把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();
			});
		 });
    }