1.首先在页面中放入一个<div id="container"></div>
2.使用js渲染出饼图
var dom = document.getElementById("container");//获取到dom节点
var myChart = echarts.init(dom);//将echarts初始化到dom
myChart.showLoading();//显示
myChart.setOption({
title : {//图表标题
text: '答案选择分布图',
x:'center'//居中
},
tooltip : {//鼠标放上去是否提示
trigger: 'item',//
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {//工具栏
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {//图例组件
bottom: 10,
left: 'center',
data: []
},
series : [//系列列表。每个系列通过 type 决定自己的图表类型
{
name: '访问来源',
type: 'pie',//饼图
radius : '55%',
center: ['50%', '60%'],
data:[],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
// 异步加载数据
$.get('#(ctx)/admin/invest/echart_data1/#(id)').done(function (data) {
myChart.hideLoading();
// 填入数据
myChart.setOption({
series: [{
name: '答案选择人数',
data: data.distributeList
}],
legend: {
data:data.distributeList.name
}
});
});
//此时需要后端返回JSON数据
{
"countList": [
{
"name": "①.[233]",
"value": "1"
},
{
"name": "②.[33232]",
"value": "1"
}
],
"distributeList": [
{
"name": "①.[233]",
"value": "505f"
},
{
"name": "②.[33232]",
"value": "50"
}
]
}
此时会选择1：拼json，2.新建对象，存储信息，最后使用JSONUtil进行转换
这里选择第二种：
AnswerVO vo = new AnswerVO();
List<AnwerItemVO> countList = new ArrayList<>(); //答案选择分布
List<AnwerItemVO> distributeList = new ArrayList<>(); //答案人数分布
public class AnswerVO {
private List<AnwerItemVO> countList;
private List<AnwerItemVO> distributeList ;
}
public class AnwerItemVO {
private String name ;
private String value ;
}
countList.add(new AnwerItemVO("有答案",r.getInt("input")+""));
countList.add(new AnwerItemVO("无答案",NumberUtil.sub(r.getInt("sum_input"),r.getInt("input")) +""));
distributeList.add(new AnwerItemVO("有答案",r.getInt("input")+""));
distributeList.add(new AnwerItemVO("无答案",NumberUtil.sub(r.getInt("sum_input"),r.getInt("input")) +""));
vo.setCountList(countList);
vo.setDistributeList(distributeList);
controller里面
Integer id = getParaToInt(0);
AnswerVO rows = investService.getChoiceData(id);
renderJson(JSONUtil.toJsonPrettyStr(rows));
