标签：show color var Jienenghuanbao result year 折线图
xml
<select id="jgEcharstList" resultType="com.inspur.zhongtie.gongchengbu.jienenghuanbao.po.Jienenghuanbao" >
select COUNT(JH_TIME) SETT1,COUNT(SJ_TIME) SETT2,YUE
from ZT_GCLY_JNHB_JNJP A
where substr(A.NIAN, 1, 4) = #{year}
GROUP BY YUE
order by YUE asc
</select>
service
public List<Jienenghuanbao> jgEcharstList(String year) {
List<Jienenghuanbao> list1 = this.JienenghuanbaoDao.selectList("com.inspur.zhongtie.gongchenglvyue.Jienenghuanbao.jgEcharstList",year);
List<String> month = new ArrayList<>();
for (int i = 1; i<13; i++){
String yuefen;
if (i<10){
yuefen = year+"-0"+i;
}else{
yuefen = year+"-"+i;
}
month.add(yuefen);
}
for (Jienenghuanbao bean : list1){
String i = bean.getYUE();
String dataMonth;
if (Integer.parseInt(i)<10){
dataMonth = year+"-0"+i;
}else{
dataMonth = year+"-"+i;
}
bean.setYUE(dataMonth);
}
List<Jienenghuanbao> list2 = new ArrayList<>();
for (String s : month) {
Jienenghuanbao echartsP= new Jienenghuanbao();
echartsP.setYUE(s);
echartsP.setSETT1("0");
echartsP.setSETT2("0");
list2.add(echartsP);
}
System.out.println(list1);
System.out.println(list2);
for(Jienenghuanbao bean1 : list1){
for(Jienenghuanbao bean2 : list2){
if (bean1.getYUE().equals(bean2.getYUE())){
bean2.setSETT1(bean1.getSETT1());
bean2.setSETT2(bean1.getSETT2());
}
}
}
return list2;
}
controller
/**
*
* 图表
*
*/
@RequestMapping("/echartsQuery")
@ResponseBody
public List<Jienenghuanbao> jgEchartsQuery(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) {
String year = this.getPara("year");
return this.JienenghuanbaoService.jgEcharstList(year);
}
html
echarst();
/**
* 折线图
*/
function echarst() {
var RenderBarChart = echarts.init(document.getElementById('BrokenLineCharts'));
var type1 = [];
var type2 = [];
var month = [];
var year = $('#years').val();
// var acfr;
// RenderBarChart.showLoading();
$.ajax({
url: '${root!}/Jienenghuanbao/echartsQuery',//地址
type: 'post',//类型
data: {
year: year,
},
async: false,
success: function (result) {
console.log(result);
for (var i in result) {
month.push(result[i].yue);
type1.push(result[i].sett1);
type2.push(result[i].sett2);
}
//图表静态
var option = {
title: {
text: year + '节能减排措施数据统计曲线图',
// subtext: '数据来自西安兰特水电测控技术有限公司',
left: 'center',
align: 'right',
top: '20'
},
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '14%'];
}
},
legend: {
icon: 'rectangle',
data: ['计划完成', '实际时间'],
x: 'left',
right: '48%',
top: '20',
itemWidth: 18,
itemHeight: 10,
padding: [0, 0, 0, 20],
itemHeight: 10,
textStyle: {
fontSize: 12,
color: '#666'
},
icon: "circle"
},
grid: {
//调整整个echars图的大小
top: "28%",
left: '2%',
right: '2%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLabel: {
interval: 0,
rotate: 40
},
axisLine: {
show: false,
lineStyle: {
color: "#666666" //X轴文字颜色
} // 样式
},
data: month
},
yAxis: [{
type: 'value',
name: '总数',
position: 'left',
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
// type: 'dotted',
}
},
// splitArea: { //背景条纹
// show: true,
// areaStyle: {
// color: [
// 'rgba(255,255,255,0)',
// 'rgba(242,243,248,1)'
// ]
// }
//
// },
// min: 0,
// splitNumber: 1,
}],
series: [
{
name: "计划完成",
type: "line",
smooth: true,
symbol: 'circle',
symbolSize: 10,
data: type1,
itemStyle: {
normal: {
color: '#5fbdff',
lineStyle: {
width: 3
}
}
},
label: {
show: true, //开启显示
position: 'top', //在上方显示
// rotate: 20, // 旋转度数
textStyle: { //数值样式
// color: 'black',
fontSize: 11
}
}
},
{
name: "实际时间",
type: "line",
smooth: true,
symbol: 'circle',
symbolSize: 10,
data: type2,
itemStyle: {
normal: {
color: '#ff975f',
lineStyle: {
width: 3
}
}
},
label: {
show: true, //开启显示
position: 'top', //在上方显示
// rotate: 20, // 旋转度数
textStyle: { //数值样式
// color: 'black',
fontSize: 11
}
}
}
]
}
RenderBarChart.setOption(option);
},
//失败/超时
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (textStatus === 'timeout') {
alert('請求超時');
setTimeout(function () {
alert('重新请求');
}, 2000);
}
}
});
// setTimeout(function() {
// RenderBarChart.setOption(option);
// RenderBarChart.hideLoading();
// },1500)
}
标签：show,color,var,Jienenghuanbao,result,year,折线图 来源： https://blog.csdn.net/Theshy08/article/details/115568885
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。