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 = { tooltip: { trigger: 'item', }, color: ['#12b7f5', '#FFC800'], series: [{ type: 'pie', // legendHoverLink: false, // hoverAnimation: false, avoidLabelOverlap: false, // silent: true, radius: ['50%', '70%'], center: ['50%', '50%'], //饼图的位置 labelLine: { normal: { show: false } }, 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 = { tooltip: { trigger: 'item', }, color: ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'], series: [{ type: 'pie', // legendHoverLink: false, // hoverAnimation: false, avoidLabelOverlap: false, radius: ['50%', '70%'], center: ['50%', '50%'], //饼图的位置 labelLine: { normal: { show: false } }, 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(nameArr, rateArr, colorList, year) { serviceChart = echarts.init(document.getElementById('serviceChart')); var serviceOptions = { // 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, interval: 0, textStyle: { color: '#333', fontSize: 14, }, // formatter: function(val) { // if(val.length > 4) { // return val.substring(0, 4) + '…' // } else { // return val // } // }, }, splitArea: { show: false }, splitLine: { show: false }, data: nameArr }], yAxis: [{ type: 'value', show: false, 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, barMinHeight: 1, label: { normal: { show: true, position: 'top', formatter: '{c}%', textStyle: { color: '#333', fontSize: 14, }, } }, itemStyle: { normal: { color: function(params) { return colorList[params.dataIndex]; }, } }, data: rateArr }] }; if(year != "2016") { serviceOptions.dataZoom = [{ type: 'inside', orient: 'horizontal', filterMode: 'none', zoomLock: true, zoomOnMouseWheel: false, preventDefaultMouseMove: true, xAxisIndex: 0, start: 0, end: 40 },{ show: false, start: 0, end: 40, type: 'slider', zoomLock: true, }] } serviceChart.clear(); serviceChart.setOption(serviceOptions); } //性别情况 function sexData(femaleData, maleData) { sexChart = echarts.init(document.getElementById('sexChart')); var sexOptions = { tooltip: { trigger: 'item', }, color: ['#12B7F5', '#FB5DAB'], series: [{ type: 'pie', // legendHoverLink: false, // hoverAnimation: false, avoidLabelOverlap: false, radius: ['50%', '70%'], center: ['50%', '50%'], //饼图的位置 labelLine: { normal: { show: false } }, 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(); }