饼图html页面
$.ajax({
url: "/questionnaire/queryQuestionResult",
type: "post",
dataType: "json",
data: {
"questionId":questionId,
"type":"pie"
},
success: function(rs) {
console.info(rs);
var valueList = [];
for (var i=0;i<rs.optionNameList.length;i++) {
var obj = new Object();
obj.name = rs.optionNameList[i];
obj.value = rs.optionSelectCountList[i];
valueList.push(obj);
}
var optionSelectCountList = rs.optionSelectCountList;
var myChart = echarts.init(document.getElementById("chart"));
myChart.setOption({
title : {
text: rs.questionName,
x:'center',
top: '5px'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
// formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true,
right: '20px',
feature: {
dataView: {
show: true,
readOnly: true,//自定义数据视图窗口按钮时，该属性必须为true
lang:['','关闭'],//自定义的数据视图按钮
optionToContent: function (opt) {//格式化数据视图样式，以表格显示
var legendData = opt.legend[0].data; //坐标数据
var series = opt.series; //折线图数据
var tdHeads = '<td style="padding: 0 10px">选项</td>'; //表头
var tdBodys = ''; //数据
series.forEach(function (item) {
//组装表头
tdHeads += '<td style="padding: 0 10px">人数</td>';
});
var table = '<table border="1" style="width:100%;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>'+tdHeads+'</tr>';
for (var i = 0, l = legendData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
//组装表数据
tdBodys += '<td>'+ series[j].data[i].value +'</td>';
}
table += '<tr><td style="padding: 0 10px;width: 80%;">'+ legendData[i] +'</td>'+tdBodys+'</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
saveAsImage: {show: true}
}
},
legend: {
orient: 'vertical',
left: 'left',
top: '30px',
data: rs.optionNameList,
formatter : function(params){//格式化类目格式
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 8;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
calculable : true,
series : [
{
name: rs.questionName,
type: 'pie',
minAngle: 5, //最小扇区角度，防止某个值过小导致扇区太小
avoidLabelOverlap: true, //是否启用防止标签重叠策略
radius: '55%',
center: ['60%', '60%'],
data: valueList,
label: {
normal: {
formatter : function(e){//格式化扇形中每个扇叶的文字格式
var newStr=" ";
var start,end;
var name_len=e.name.length; //每个内容名称的长度
var max_name=8; //每行最多显示的字数
var new_row = Math.ceil(name_len / max_name); // 最多能显示几行，向上取整比如2.1就是3行
if(name_len>max_name){ //如果长度大于每行最多显示的字数
for(var i=0;i<new_row;i++){ //循环次数就是行数
var old=''; //每次截取的字符
start=i*max_name; //截取的起点
end=start+max_name; //截取的终点
if(i==new_row-1){ //最后一行就不换行了
old=e.name.substring(start);
}else{
old=e.name.substring(start,end)+"\n";
}
newStr+=old; //拼接字符串
}
}else{ //如果小于每行最多显示的字数就返回原来的字符串
newStr=e.name;
}
return newStr;
}
}
}
}
]
},true);
}
})
页面效果
柱形图html
$.ajax({
url: "/questionnaire/queryQuestionResult",
type: "post",
dataType: "json",
data: {
"questionId":questionId,
"type":"bar"
},
success: function(rs) {
var myChart = echarts.init(document.getElementById("chart"));
myChart.setOption({
title: {
x: 'center',
text: rs.questionName,
top: '5px'
},
tooltip: {
trigger: 'item'
},
calculable: true,
grid: {
borderWidth: 0,
y: 80,
y2: 60,
bottom: "22%"
},
xAxis: [
{
type: 'category',
show: true,
name: '选项',
nameLocation: 'end',
data: rs.optionNameList,
axisLabel : {//坐标轴刻度标签的相关设置。
formatter : function(params){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 6;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
}
}
],
yAxis: [
{
type: 'value',
name: '人数',
}
],
toolbox: {
show: true,
right: '20px',
feature: {
dataView: {
show: true,
readOnly: true,
lang:['','关闭'],
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data; //坐标数据
var series = opt.series; //折线图数据
var tdHeads = '<td style="padding: 0 10px">选项</td>'; //表头
var tdBodys = ''; //数据
series.forEach(function (item) {
//组装表头
tdHeads += '<td style="padding: 0 10px">人数</td>';
});
var table = '<table border="1" style="width:100%;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>'+tdHeads+'</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
//组装表数据
tdBodys += '<td>'+ series[j].data[i] +'</td>';
}
table += '<tr><td style="padding: 0 10px;width: 80%">'+ axisData[i] +'</td>'+tdBodys+'</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
saveAsImage: {show: true}
}
},
series: [
{
name: rs.questionName,
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',
// formatter:'{b}\n{c}'
}
}
},
data: rs.optionSelectCountList,
}
]
})
}
})
页面效果
java后台
Map<String,Object> result = new HashMap<>();
ZoneQuestionnaireQuestion question = zoneQuestionnaireQuestionDao.selectByPrimaryKey(questionId);
result.put("questionName",question.getQuestionName());
List<ZoneQuestionnaireOption> optionList = zoneQuestionnaireOptionDao.queryQuestionnaireOptionByQuestionId(questionId);
List<String> optionNameList = new ArrayList<>();
List<Integer> optionSelectCountList = new ArrayList<>();
for (int i=0; i<optionList.size(); i++) {
optionNameList.add("选项"+(i+1)+":"+optionList.get(i).getQuestionnaireOptionContent());
optionSelectCountList.add(optionList.get(i).getSelectCount());
}
result.put("optionNameList",optionNameList);
result.put("optionSelectCountList",optionSelectCountList);
return result;