var labelBottom = { normal: { label: { show: false, }, labelLine: { show: false } } }; var jiaoFeiChart = null, healthChart = null, serviceChart = null, sexChart = null, ageChart = null; //缴费情况 function jiaoFeiData(yiJiaoFeiData, weiJiaoFeiData) { jiaoFeiChart = echarts.init(document.getElementById('jiaoFeiChart')); var jiaoFeiOptions = { color: ['#12b7f5', '#FFC800'], series: [{ type: 'pie', legendHoverLink: false, hoverAnimation: false, avoidLabelOverlap: false, radius: ['50%', '70%'], center: ['50%', '50%'], //饼图的位置 data: [{ name: '已缴费人数', value: yiJiaoFeiData, itemStyle: { normal: { label: { show: false, }, labelLine: { show: false } } } }, { name: '未缴费人数', value: weiJiaoFeiData, itemStyle: { normal: { label: { show: true, position: 'center', color: '#666', formatter: function(params) { return '缴费情况\n分析'; } }, labelLine: { show: false } } } } ] }] }; jiaoFeiChart.clear(); jiaoFeiChart.setOption(jiaoFeiOptions); } //健康分布 function healthData(jkrqdata, hbrqdata, gwrqdata, hfqrqdata, wbzdata) { healthChart = echarts.init(document.getElementById('healthChart')); var healthOptions = { color: ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'], series: [{ type: 'pie', legendHoverLink: false, hoverAnimation: false, avoidLabelOverlap: false, radius: ['50%', '70%'], center: ['25%', '50%'], //饼图的位置 data: [{ name: '健康人群', value: jkrqdata, itemStyle: { normal: { label: { show: true, position: 'center', color: '#666', formatter: function(params) { return '健康分布\n分析'; } }, labelLine: { show: false } } } }, { name: '患病人群', value: hbrqdata, itemStyle: labelBottom }, { name: '高危人群', value: gwrqdata, itemStyle: labelBottom }, { name: '恢复期人群', value: hfqrqdata, itemStyle: labelBottom }, { name: '未标注', value: wbzdata, itemStyle: labelBottom } ] }] }; healthChart.clear(); healthChart.setOption(healthOptions); } //服务分布 function serviceData(arr) { serviceChart = echarts.init(document.getElementById('serviceChart')); var serviceOptions = option = { calculable: true, grid: { y: 25, y2: 30, x: 20, x2: 20, borderColor: '#ffffff' }, xAxis: [{ type: 'category', axisLine: { show: true, lineStyle: { color: '#dcdcdc', width: 1 } }, axisTick: { show: false }, axisLabel: { show: true, color: '#666' }, splitArea: { show: false }, splitLine: { show: false }, data: ['普通人群', '老年人', '高血压', '糖尿病'] }], yAxis: [{ type: 'value', axisLine: { show: true, lineStyle: { color: '#dcdcdc', width: 1 } }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: false }, splitLine: { show: false }, axisLabel: { show: false } }], series: [{ name: '服务分布比例', type: 'bar', barWidth: 20, itemStyle: { normal: { color: function(params) { var colorList = ['#12B7F5', '#61eb41', '#CD67FD', '#fb5dab']; return colorList[params.dataIndex] }, label: { show: true, position: 'top', color: '#666', formatter: function(params) { return params.value + '%'; } }, barBorderRadius: 0 } }, data: arr }] }; serviceChart.clear(); serviceChart.setOption(serviceOptions); } //性别情况 function sexData(femaleData, maleData) { sexChart = echarts.init(document.getElementById('sexChart')); var sexOptions = { color: ['#12B7F5', '#FB5DAB'], series: [{ type: 'pie', legendHoverLink: false, hoverAnimation: false, avoidLabelOverlap: false, radius: ['50%', '70%'], center: ['50%', '50%'], //饼图的位置 data: [{ name: '男性', value: maleData, itemStyle: { normal: { label: { show: true, position: 'center', color: '#666', formatter: function(params) { return '性别情况\n分析'; } }, labelLine: { show: false } } } }, { name: '女性', value: femaleData, itemStyle: labelBottom } ] }] }; sexChart.clear(); sexChart.setOption(sexOptions); } //年龄分布 function ageData(arr) { ageChart = echarts.init(document.getElementById('ageChart')); var ageOptions = { calculable: true, grid: { y: 25, y2: 30, x: 20, x2: 20, borderColor: '#ffffff' }, xAxis: [{ type: 'category', axisLine: { show: true, lineStyle: { color: '#dcdcdc', width: 1 } }, axisTick: { show: false }, axisLabel: { show: true, color: '#666' }, splitArea: { show: false }, splitLine: { show: false }, data: ['0-6岁', '7-18岁', '19-30岁', '31-50岁', '51-64岁', '65岁以上'] }], yAxis: [{ type: 'value', axisLine: { show: true, lineStyle: { color: '#dcdcdc', width: 1 } }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: false }, splitLine: { show: false }, axisLabel: { show: false } }], series: [{ name: '年龄分布比例', type: 'bar', barWidth: 40, itemStyle: { normal: { color: function(params) { var colorList = ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41', '#909090']; return colorList[params.dataIndex] }, label: { show: true, position: 'top', formatter: function(params) { return params.value; } }, barBorderRadius: 0 } }, data: arr }] }; ageChart.clear(); ageChart.setOption(ageOptions); } window.onresize = function() { jiaoFeiChart.resize(); healthChart.resize(); serviceChart.resize(); sexChart.resize(); ageChart.resize(); }