RCP框架使用Echarts图表_rcpstyle-优快云博客

RCP框架使用Echarts图表

首先引入echarts的js
rcp框架内部包含了此js,只需要引入rcp相关js时加上参数 chart=1

<script type="text/javascript" src="../../bi-core/rcp-init.js?chart=1"></script>

html中echarts相关部分

<div id="table" rcpStyle="layout:BorderLayout;position:center;">
	<div id="eacharts" rcpStyle="layout:BorderLayout;position:north;" style="height:300px;"></div>
</div>

js中echarts相关部分

	refreshChartData:function(){
		var self = this;
		if(self.initCount<3) return;
		var currRow = this.dsIndexList.getCurrentRow();
		var indexCode = this.dsIndexList.getData(currRow, "indexCode");
		var periods = this.comboPeriods.getValue();

		var countryName = self.comboCountry.getValue();
		self.cs.invoke("getChartData",{indexCode:indexCode,periods:periods,countryName:countryName},function(result){
			if(result.error) return alert(result.error);
			self.refreshChart(result);
		});
	},
	refreshChart : function(result){
		var legendList = result.legendList, axisList = result.axisList, seriesMap = result.seriesMap;
		if(this.myChart==null){
			this.myChart = echarts.init($("#eacharts")[0]);
		}else{
			this.myChart.clear();
		}
		var seriesList = [];
		for(var i=0;i<legendList.length;i++){
			var countryName = legendList[i];
			seriesList.push({name: countryName,type: 'line',data: seriesMap[countryName]});
		}
		var option = {
			    title: {
			        text: ''
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data: legendList
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: axisList
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series:seriesList
		};
		this.myChart.setOption(option);
	},

例子是一个折线图。
主要设置的值有三个
legendList 是图例名称的数组比如这几条折线代表的是语文成绩、数学成绩等
axisList 横坐标名比如时间
seriesList 数值比如语文成绩具体的值

legendList是一个数组，axisList也是一个数组，seriesList是一个map集合的数组.
数据在这举个例子：

legendList=['邮件营销', '联盟广告']
axisList=['周一', '周二', '周三', '周四', '周五', '周六', '周日']
seriesList=
[
 {name: '邮件营销',type: 'line',data: [120, 132, 101, 134, 90, 230, 210]},
 {name: '联盟广告', type: 'line',data: [220, 182, 191, 234, 290, 330, 310]} 
]

其中是有一定对应关系的，
legendList的值对应着seriesList里的name
axisList.size()对应着seriesList里面data.size()

后端相关部分

public Map<?,?> getChartData(Map<?,?> paramMap){
	Object indexCode = paramMap.get("indexCode");
	Object periods = paramMap.get("periods");
	Object countryName = paramMap.get("countryName");
	String sql = " SELECT A.COUNTRY_NAME_CHN,B.TAB_YEAR,B.VALUE FROM GPE_MACRO_COUNTRY A,GPE_MACRO_COUNTRY_GDP B "
			   + "  WHERE A.COUNTRY_SHORT=B.COUNTRY_SHORT AND B.INDEX_CODE = ? ";
	if(!CheckUtil.isEmpty((String)periods)){
		sql += " AND " + SqlUtil.getStringForSqlIn("B.TAB_YEAR", Arrays.asList(periods.toString().split(",")), true);
	}
	if(!CheckUtil.isEmpty((String)countryName)){
		sql += " AND " + SqlUtil.getStringForSqlIn("A.COUNTRY_NAME", Arrays.asList(countryName.toString().split(",")), true);
	}
	sql += " ORDER BY A.COUNTRY_NAME_CHN,B.TAB_YEAR ";
	try {
		List<Object[]> dataList = MetaDB.queryList(sql, new Object[]{indexCode});
		List<Object> legendList = new ArrayList<Object>();
		List<Object> axisList = new ArrayList<Object>();
		Map<Object,List<Object>> seriesMap = new HashMap<Object,List<Object>>();
		if(dataList!=null&&dataList.size()>0){
			for(int i=0;i<dataList.size();i++){
				Object[] rowData = dataList.get(i);
				Object countyName = rowData[0], tabYear = rowData[1], value = rowData[2];
				List<Object> seriesData = legendList.contains(countyName) ? seriesMap.get(countyName) : new ArrayList<Object>();
				seriesData.add(value);
				seriesMap.put(countyName, seriesData);
				if(!legendList.contains(countyName)) legendList.add(countyName);
				if(!axisList.contains(tabYear)) axisList.add(tabYear);
			}
		}
		return DataUtil.toMap("legendList", legendList, "axisList", axisList, "seriesMap", seriesMap);
	} catch (DataException e) {
		e.printStackTrace();
		return DataUtil.error(e.getMessage());
	}
}