$(document).ready(function () { //辅助决策 人口统计 默认数据 - 低保人群情况统计 var isLoading = true; var temp = new Object(); var array = new Array(); temp.diBao = array; array.push({ "jdId" : 170387468639, "jdName" : "锦程街道办事处", "rkNumber" : 0, "fsNumber" : 0, "jzNumber" : 0, "zbNumber" : 0, "zcNumber" : 0 }); array.push({ "jdId" : 172291278969, "jdName" : "东风街道办事处", "rkNumber" : 0, "fsNumber" : 0, "jzNumber" : 0, "zbNumber" : 0, "zcNumber" : 0 }); array.push({ "jdId" : 288313983755, "jdName" : "富民街道办事处", "rkNumber" : 0, "fsNumber" : 0, "jzNumber" : 0, "zbNumber" : 0, "zcNumber" : 0 }); array.push({ "jdId" : 288313983756, "jdName" : "前程街道办事处", "rkNumber" : 0, "fsNumber" : 0, "jzNumber" : 0, "zbNumber" : 0, "zcNumber" : 0 }); diBao(temp, isLoading); var obj = new Object(); $.ajax({ url : prefix + "/queryRenKouDiBao", method : 'post', data : obj, success : function (e) { if(e.code == 0){ e.diBao = $.parseJSON(e.diBao); isLoading = false; diBao(e, isLoading); } } }); }); function diBao(e, isLoading){ var diBao = e.diBao; var series = new Array(); var colors0 = ['#177c3d', '#1c86b2', '#3043f2', '#3414d9']; var colors1 = ['#2dc94a', '#00ffcc', '#30b9f2', '#5519ff']; for (var i = 0; i < diBao.length; i++) { series.push({ data: [diBao[i].zbNumber, diBao[i].zcNumber, diBao[i].jzNumber, diBao[i].fsNumber], type: 'bar', name: diBao[i].jdName, itemStyle: { //上方显示数值 normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'white', fontSize: 11 } }, color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: colors0[i] }, { offset: 1, color: colors1[i] }]), } } }); } var chartDom = document.getElementById('echarts_dbrk'); var myChart = echarts.init(chartDom); if(!isLoading){ myChart.on("click", function (e) { openDialog_diBao(e.dataIndex); }); } var option; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, show: true, }, grid: { // borderWidth: 1, top: '10%', left: '8%', right: '5%', bottom: '20%' }, xAxis: { type: 'category', data: ['重病数', '重残数', '集中供养数', '分散供养数'], axisLabel: { show: true, color: '#00cdef' }, axisLine: { show: true, lineStyle: { color: '#00cdef' } } }, yAxis: { axisLine: { lineStyle: { color: '#00cdef' } }, splitLine: { show: false }, type: 'value' }, series: series }; option && myChart.setOption(option); } function openDialog_diBao(index) {//弹出对话框 console.log(index+"=index") var url = prefix + "/rktj/dbrqqktj/" + index; var title; switch (index){ case 0: title = '低保人群情况统计 - 重病'; break; case 1: title = '低保人群情况统计 - 重残'; break; case 2: title = '低保人群情况统计 - 集中供养'; break; case 3: title = '低保人群情况统计 - 分散供养'; break; } $.modal.openDetailFull(title, url, 1200); }