1.首先在頁面中放入一個<div id="container"></div>
2.使用js渲染出餅圖
var dom = document.getElementById("container");//獲取到dom節(jié)點
var myChart = echarts.init(dom);//將echarts初始化到dom
myChart.showLoading();//顯示
? ? myChart.setOption({
? ? title : {//圖表標題
? ? ? ? text: '答案選擇分布圖',
? ? ? ? x:'center'//居中
? ? },
? ? tooltip : {//鼠標放上去是否提示
? ? ? ? trigger: 'item',//
? ? ? ? formatter: "{a} <br/> : {c} (u0z1t8os%)"
? ? },
? ? 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));
