Model模型:
/**
* element of Echarts series
* 通用的,若有其他的图表可以另外新建Model
*/
public class EchartModel {
private String name;//系列名称
private String type;//图表类型:'line'(折线图)|'bar'(柱状图)|'scatter'(散点图)|'k'(K线图) |'pie'(饼图)|'radar'(雷达图)|'chord'(和弦图)|'force'(力导向布局图)|'map'(地图)
private int yAxisIndex;//左右Y轴:0左、1右
private List<Object> data;//数据
public EchartModel() {
}
public EchartModel(String name, String type,
int yAxisIndex) {
this.name = name;
this.type = type;
this.yAxisIndex = yAxisIndex;
}
public EchartModel(String name, String type,
int yAxisIndex, List<Object> data) {
this.name = name;
this.type = type;
this.yAxisIndex = yAxisIndex;
this.data = data;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public int getyAxisIndex() {
return yAxisIndex;
}
public void setyAxisIndex(int yAxisIndex) {
this.yAxisIndex = yAxisIndex;
}
public List<Object> getData() {
return data;
}
public void setData(List<Object> data) {
this.data = data;
}
}
控制器:
@RequestMapping(value = "/common/datacenter/nationalindustries/getData")
@ResponseBody
protected Map<String, Object> getData(@ModelAttribute CeDataCocalconsumeNationalindustriesModel queryModel,
HttpServletResponse response) throws ServletException, IOException, ParseException {
Map<String, Object> resultMap = new HashMap<String, Object>();
queryModel.setOrderBy(" t.gatherTime desc");//时间降序、
List<CeDataCocalconsumeNationalindustries> resultList = ceDataCocalconsumeNationalindustriesManager.listQuery(queryModel);//年度gdp结果集
List<String> legendList = new ArrayList<String>();//图表外条件集
List<String> yearList = new ArrayList<String>();//年份集
List<EchartModel> echartSeriesList = new ArrayList<EchartModel>();//echars传输的数据集
legendList.add("煤炭消费总量(万吨)");
legendList.add("工业煤炭消费总量(万吨)");
legendList.add("采掘业煤炭消费总量(万吨)");
int legendIndex = 0;
echartSeriesList.add(new EchartModel(legendList.get(legendIndex++), "bar", 0, new ArrayList<Object>()));
echartSeriesList.add(new EchartModel(legendList.get(legendIndex++), "bar", 0, new ArrayList<Object>()));
echartSeriesList.add(new EchartModel(legendList.get(legendIndex++), "bar", 0, new ArrayList<Object>()));
for (CeDataCocalconsumeNationalindustries result : resultList) {
String year = result.getGatherTime()+"";
if (yearList.indexOf(year) == -1) {
yearList.add(0, year);//因时间降序 时间集循环填入数据
}
legendIndex = 0;
echartSeriesList.get(legendIndex++).getData().add(0, result.getConsumeSum()==null ? 0 : result.getConsumeSum());
echartSeriesList.get(legendIndex++).getData().add(0, result.getConsumeIndustry()==null ? 0 : result.getConsumeIndustry());
echartSeriesList.get(legendIndex++).getData().add(0, result.getConsumeMine()==null ? 0D : result.getConsumeMine());
}
resultMap.put("legendDatas", legendList);
resultMap.put("gatherTimes", yearList);
resultMap.put("echartSeries", echartSeriesList);
StringBuffer sb = new StringBuffer();
sb.append("{"lend": "+MyJsonTools.toJson(legendList)+","companyName":" +MyJsonTools.toJson(gatherTimeList)+ ","data":" +MyJsonTools.toJson(echartSeriesList)+"}");
request.setAttribute("resultList", resultList);
response.getWriter().println(sb);
}
jsp:
(1)引入echarts插件
<script src="${rootUrl}js/echarts/build/dist/echarts.js"></script>
<script type="text/javascript" src="${rootUrl}js/echarts/build/dist/chart/main.js"></script>
(2)摆放处
<div class="row p-r-20 p-l-20">
<div id="main" style="height:400px;"></div>
</div>
js:
<script type="text/javascript">
$(function() {
$.ajaxSetup({cache:false});
$('#listManage').taiji();
require.config({
paths:{
echarts: "${rootUrl}js/echarts/build/dist",
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map',
'echarts/theme/macarons'
],
function (ec) {
var chart = document.getElementById('main');
var echart = ec.init(chart);
echart.showLoading({
text: '正在努力加载中...'
});
var categories = [];
var values = [];
var y2 = [];
var lend = [];
option = {
grid :{
y:30,
y2:80
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
y:'bottom',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data:[]
}
],
yAxis : [
{
name :'',
type : 'value'
}
],
series :[]
};
echart.setOption(option);
echart.hideLoading();
$.post("${rootUrl}app/datacenter/benchmarking/duibiao/jituan/getLineData",
{
month : $("#month").val(), //传到后天的参数
type :$("#db").val()
},
function (json){
var msg = eval("(" + json + ")");
var option = echart.getOption();
var c = msg.companyName;
for (var i in c) {
option.xAxis[0].data[i]=c[i];
}
var lend= msg.lend;
for (var i in lend) {
option.legend.data[i]=msg.lend[i];
option.series[i]={name:msg.data[i].name,type:'line',data:msg.data[i].data};
}
if("发电标准煤耗" == msg.lend){
option.yAxis[0] = {name:'克/千瓦时',type:'value'};
}
if("煤折标煤单价" == msg.lend){
option.yAxis[0] = {name:'元/吨',type:'value'};
}
if("入厂标煤单价涨幅" == msg.lend){
option.yAxis[0] = {name:'元/吨',type:'value'};
}
if("发电耗用标煤量" == msg.lend){
option.yAxis[0] = {name:'吨',type:'value'};
}
echart.setOption(option,true);
});
$('#listManage').taiji();
$("#dcQueryBtn").click(function (){
// 同步执行
$.ajaxSettings.async = false;
$.post("${rootUrl}app/datacenter/benchmarking/duibiao/jituan/getLineData",
{
month : $("#month").val(),
type :$("#db").val()
},
function (json) {
var msg = eval("(" + json + ")");
var option = echart.getOption();
option.xAxis[0].data=[]; //对x轴数据进行清空 option.series[0]={};
option.series=[]; //对数据进行清空
option.legend.data=[];
var c = msg.companyName;
for (var i in c) {
option.xAxis[0].data[i]=c[i]; //这里需要写明x0轴的第几个数据
}
var lend= msg.lend;
for (var i in lend) {
option.legend.data[i]=msg.lend[i];
option.series[i]={name:msg.data[i].name,type:'line',data:msg.data[i].data};
}
if("发电标准煤耗" == msg.lend){
option.yAxis[0] = {name:'克/千瓦时',type:'value'};
}
if("煤折标煤单价" == msg.lend){
option.yAxis[0] = {name:'元/吨',type:'value'};
}
if("入厂标煤单价涨幅" == msg.lend){
option.yAxis[0] = {name:'元/吨',type:'value'};
}
if("发电耗用标煤量" == msg.lend){
option.yAxis[0] = {name:'吨',type:'value'};
}
echart.setOption(option,true);
$("#listForm").submit();
});
});
}
);
});
</script>
option.legend.data=[];