new Vue({ el: '#all', data: function() { return { } }, mounted() { //班级运行情况 this.getData(); this.changeWindow(); }, methods: { // 请求数据 request({ type, url, data = {}, headers = {} }) { return new Promise(resolve => { $.ajax({ type, url, data, headers, success(data) { resolve(data); } }); }); }, changeWindow(){ window.onresize = function () { setTimeout(function () { window.location.reload(); },200) } }, async getData(){ // let {data} = await this.request({ // type: "GET", // data:{ // userid:window.phone, // days:this.days, // }, // url: `${window.url}/api/admin/healthinfo/getnewbloodpressure`, // }) // console.log(data,"xieya"); this.Charts1(); this.charts2(); this.charts3(); this.charts4(); this.charts5(); this.charts6(); this.charts7(); }, Charts1(){ let chartDom = document.getElementById('echarts1'); let myChart = echarts.init(chartDom); let option; // option = { // color: ['#02dcfd',"#f96e00","#0178e9","rgb(255, 230, 88)","#ff01ff","#f9ad12"], // tooltip: { // trigger: 'axis' // }, // legend: { // // data: ['移动能力重度障碍', '握力测量平均值', '中重度失能',"中重度抑郁","营养不良","尿失禁状况"], // data: ["移动能力重度障碍",'中重度失能',"中重度抑郁","营养不良"], // y:"bottom", // textStyle: { // color: '#5380b4' // } // }, // grid: { // left: '1%', // right: '1%', // bottom: '10%', // containLabel: true // }, // xAxis: { // type: 'category', // // boundaryGap:false, // axisLabel: { // textStyle: { // color: '#fff' // }, // }, // splitLine: { // show:true, // lineStyle: { // color: ['#151d3d'] // } // }, // data: ["60以下","60-70岁","70-80岁","80-90岁","90岁以上"] // }, // yAxis : { // show: true, // type : 'value', // axisLabel:{ // formatter:"{value}%", // color: '#fff' // }, // splitLine: { // lineStyle: { // color: ['#151d3d'] // } // }, // }, // series: [ // { // name: '移动能力重度障碍', // smooth:true, // type: 'line', // symbolSize: 1, // data: [2,5,25,60,85], // }, // // { // // name: '握力测量平均值', // // smooth:true, // // type: 'line', // // symbolSize: 1, // // data: [72,56,21,33,11], // // }, // { // name: '中重度失能', // smooth:true, // type: 'line', // symbolSize: 1, // data: [1,6,20,54,90], // }, // { // name: '中重度抑郁', // smooth:true, // type: 'line', // symbolSize: 1, // data: [4,7,30,49,55], // }, // { // name: '营养不良', // smooth:true, // type: 'line', // symbolSize: 1, // data: [3,6,28,40,79], // }, // // { // // name: '尿失禁状况', // // smooth:true, // // type: 'line', // // symbolSize: 1, // // data: [8,12,14,26,91], // // } // ] // }; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { return params[0].name + ":" + params[0].value + "人"; }, }, legend: { show: true, x: 'center', y: 'bottom', textStyle: { color: '#03d1f3' }, data: ['教师'] }, grid: { top:'2%', left: '3%', right: '4%', bottom: '14%', containLabel: true }, xAxis: { show: false, }, yAxis: { type: 'category', data: ['高中', '初中', '小学'], axisLabel: { color: '#03d1f3' }, splitLine: { lineStyle: { color: ['rgba(0,0,0,1)'] } }, }, series: [ { name: '教师', type: 'bar', barWidth: 20, data: [1475, 2010, 3010], //顶部数字展示pzr itemStyle: { emphasis: { barBorderRadius: [0, 100, 0, 100], label: { show: true, position: "right", color: "#fff" } }, normal: { //柱形图圆角,初始化效果 barBorderRadius: [0, 100, 0, 100], // color:new echarts.graphic.LinearGradient( // 0, 0, 1, 0, // [ // {offset: 0, color: '#011135'}, // {offset: 0.5, color: '#01367b'}, // {offset: 1, color: '#0178e9'} // ] // ), color: new echarts.graphic.LinearGradient(1, 1, 0,0, [{ offset: 0, color: '#248ff7' }, { offset: 1, color: 'rgba(22,75,247,0)' }]), label: { show: true, position: "right", color: "#fff" } } }, } ] }; option && myChart.setOption(option); }, charts2(){ let chartDom = document.getElementById('echarts2'); let myChart = echarts.init(chartDom); let option; // option = { // tooltip: { // trigger: 'axis', // axisPointer: { // type: 'shadow' // }, // formatter: function (params) { // return params[0].name+":" + params[0].value+"人"; // }, // }, // legend: { // show:true, // // data: ['2021年'] // }, // grid: { // left: '3%', // right: '4%', // bottom: '3%', // containLabel: true // }, // xAxis: { // show:false, // }, // yAxis: { // type: 'category', // data: ['医护人数','老人干预人数','咨询回复人数','上门随访人数','健康评估人数'], // axisLabel:{ // color: '#03d1f3' // }, // splitLine: { // lineStyle: { // color: ['rgba(0,0,0,1)'] // } // }, // }, // series: [ // { // // name: '2021年', // type: 'bar', // barWidth: 15, // data: [601,15634,30212,23432,16411], // //顶部数字展示pzr // itemStyle: { // emphasis: { // barBorderRadius: [100,100, 100, 100], // label:{ // show:true, // position: "right", // color:"#fff" // } // }, // normal: { // //柱形图圆角,初始化效果 // barBorderRadius:[100,100, 100, 100], // // color:new echarts.graphic.LinearGradient( // // 0, 0, 1, 0, // // [ // // {offset: 0, color: '#011135'}, // // {offset: 0.5, color: '#01367b'}, // // {offset: 1, color: '#0178e9'} // // ] // // ), // color:function(params){ // var colorList1 = new echarts.graphic.LinearGradient( // 0, 0, 1, 0, // [ // {offset: 0, color: '#011135'}, // {offset: 0.5, color: '#01367b'}, // {offset: 1, color: '#0178e9'} // ] // ); // var colorList2 = new echarts.graphic.LinearGradient( // 0, 0, 1, 0, // [ // {offset: 0, color: '#051130'}, // {offset: 0.5, color: '#734a1a'}, // {offset: 1, color: '#f96e00'} // ] // ); // var colorList3 = new echarts.graphic.LinearGradient( // 0, 0, 1, 0, // [ // {offset: 0, color: '#031133'}, // {offset: 0.5, color: '#2a7262'}, // {offset: 1, color: '#45e190'} // ] // ); // var colorList = [colorList1,colorList2,colorList3] // return colorList[params.dataIndex % colorList.length]; // }, // label:{ // show:true, // position: "right", // color:"#fff" // } // } // }, // } // ] // }; option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter: function (params) { return params[0].name + ":" + params[0].value + "%"; }, }, legend: { data: ['教师学历'], x: 'center', //可设定图例在左、右、居中 y: 'top', //可设定图例在上、下、居中 padding: [0, 0, 0, 45], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离] textStyle: { fontSize: 14, //字体大小 color: '#ffffff' //字体颜色 } }, grid: { top:"10%", left: '5%', right: '6%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: ['研究生', '本科', '专科', '高中及以下','其他'], axisTick: { alignWithLabel: true }, axisLabel: { // inside: true,、 textStyle: { color: '#00FFFF' } }, }], yAxis: [{ type: 'value', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { formatter: "{value}%", color: '#fff' }, splitLine: { lineStyle: { color: ['#081868'], } }, }], series: [{ name: '教师学历', type: "bar", barWidth: 40, barGap: "0%", itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#248ff7' }, { offset: 0.5, color: 'rgba(22,75,247,0.5)' }, { offset: 1, color: 'rgba(22,75,247,0)' }]), }, data: [3.1, 73.2, 21.7, 1.2,0.8] }] }; option && myChart.setOption(option); }, charts3(){ var chartDom = document.getElementById('echarts3'); var myChart = echarts.init(chartDom); var option; // option = { // tooltip: { // trigger: 'item', // formatter: function (params) { // return params.data.name+":" + params.data.value+"人"; // }, // }, // series: [ // { // type: 'pie', // radius: ['40%', '50%'], // avoidLabelOverlap: false, // label: { // show: true // }, // itemStyle: { // normal:{ // label:{ // show:true, // textStyle:{color:'#00affd',fontSize:"14"}, // formatter:function(val){ //让series 中的文字进行换行 // return val.name+"\n"+val.percent+"%"; // } // }, // color:function (params) { // var colorList = ["#00f6fe","#f36ff9","#f8b019","#fe6e82","#08b16b"] // return colorList[params.dataIndex % colorList.length]; // }, // labelLine: { // // smooth: true, // length: 30, // length1: 10 // }, // }, // emphasis: { // shadowBlur: 10, // shadowOffsetX: 0, // shadowColor: 'rgba(0, 0, 0, 0.5)', // textColor:'#000' // } // }, // data: [ // {value: 751, name: '60岁以下'}, // {value: 8743, name: '60-70岁'}, // {value: 4835, name: '70-80岁'}, // {value: 1162, name: '80-90岁'}, // {value: 920, name: '90岁以上'} // ] // } // ] // }; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { return params[0].name + ":" + params[0].value + "人"; }, }, legend: { show: true, x: 'center', y: 'bottom', textStyle: { color: '#03d1f3' }, data: ['学生'] }, grid: { top: '2%', left: '3%', right: '4%', bottom: '14%', containLabel: true }, xAxis: { show: false, }, yAxis: { type: 'category', data: ['高中', '初中', '小学'], axisLabel: { color: '#03d1f3' }, splitLine: { lineStyle: { color: ['rgba(0,0,0,1)'] } }, }, series: [ { name: '学生', type: 'bar', barWidth: 20, data: [17915, 30464, 55663], //顶部数字展示pzr itemStyle: { emphasis: { barBorderRadius: [100, 0, 100, 0], label: { show: true, position: "right", color: "#fff" } }, normal: { //柱形图圆角,初始化效果 barBorderRadius: [100, 0, 100, 0], // color:new echarts.graphic.LinearGradient( // 0, 0, 1, 0, // [ // {offset: 0, color: '#011135'}, // {offset: 0.5, color: '#01367b'}, // {offset: 1, color: '#0178e9'} // ] // ), color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#248ff7' }, { offset: 1, color: 'rgba(22,75,247,0)' }]), label: { show: true, position: "right", color: "#fff" } } }, } ] }; option && myChart.setOption(option); }, charts4(){ var chartDom = document.getElementById('echarts4'); var myChart = echarts.init(chartDom); var option; var dataAxis = ['应接种教职工', '实际接种教职工', '应接种学生', '实际接种学生', '确诊总人数', '治愈总人数', '现存确诊人数', '现存确学校']; var data = [23214, 12833, 86723, 82112, 121, 119, 1, 1]; // var yMax = 10000; // var dataShadow = []; // for (var i = 0; i < data.length; i++) { // dataShadow.push(yMax); // } option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: { data: dataAxis, axisLabel: { // inside: true, interval: 0, rotate: 30, //倾斜的程度 textStyle: { color: '#fff' } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 }, yAxis: { type : 'value', max:100000, axisLine: { show: false }, axisTick: { show: false }, axisLabel:{ formatter:"{value}", color: '#fff' }, splitLine: { lineStyle: { color: ['#151d3d'] } }, }, dataZoom: [ { type: 'inside' } ], series: [ { type: 'bar', showBackground: true, stack: '总量', barMinHeight: 30, barWidth: 30, itemStyle: { normal:{ barBorderRadius:[12,12, 12, 12], color: new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#1bc6f5'}, {offset: 0.5, color: '#1dadee'}, {offset: 1, color: '#207ce2'} ] ), label:{ show:true, position: [-1,0], color:"#fff", formatter:`{Circle|}`, rich: { Circle: { height: 19, backgroundColor: { image: 'src/images/circle1.png' } }, } } }, }, emphasis: { itemStyle: { barBorderRadius:[12,12, 12, 12], color: new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#1bc6f5'}, {offset: 0.5, color: '#1dadee'}, {offset: 1, color: '#207ce2'} ] ), } }, data: data } ] }; // Enable data zoom when user click bar. var zoomSize = 4; myChart.on('click', function (params) { // console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); myChart.dispatchAction({ type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] }); }); option && myChart.setOption(option); }, charts5(){ var chartDom = document.getElementById('echarts5'); var myChart = echarts.init(chartDom); var option; option = { title: { text: '总人数', textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} fontSize: 16, color: '#fff', fontWeight: 'bold' }, }, tooltip: { trigger: 'item', // formatter: '{a}
{b} : {c}', formatter: function (params) { return params.data.name.split(" ")[0]+":" + params.data.value+"人"; }, }, series: [ { type: 'pie', radius: ['30%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, selectedMode: 'single', data: [ { value: 5832, name: '男', label: { formatter:function(val){ var str = val.name+val.percent+"%" return str }, rich: { value: { width: 14, align: 'left' } } } }, { value: 11322, name: '女', label: { formatter:function(val){ var str = val.name+val.percent+"%" return str }, rich: { value: { width: 14, align: 'left' } } } } ], itemStyle: { normal:{ color:function (params) { var colorList = ["#59adff","#258aed","#006fdd"] return colorList[params.dataIndex % colorList.length]; }, labelLine: { smooth: true, length: 2, length1: 1 }, label:{ textStyle:{color:'#00affd',fontSize:"14"}, } }, emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', textColor:'#000' } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; option && myChart.setOption(option); }, charts6 () { var chartDom = document.getElementById('echarts6'); var myChart = echarts.init(chartDom); var option; option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'cross', // 默认为直线,可选为:'line' | 'shadow' label: { backgroundColor: '#040c30' } }, formatter: function (params) { return params[0].name + ":" + params[0].value + "人"; }, }, legend: { data: ['历年在校生人数'], textStyle: { fontSize: 14, //字体大小 color: '#ffffff' //字体颜色 } }, toolbox: { feature: { saveAsImage: {} } }, grid: { top:"14%", left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['2015-2016年', '2016-2017年', '2017-2018年', '2018-2019年', '2019-2020年'], axisLabel: { textStyle: { color: '#fff' }, }, } ], yAxis: [ { type: 'value', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { formatter: "{value}人", color: '#fff' }, splitLine: { lineStyle: { color: ['#ffffff'], } }, } ], color: ["rgba(80,141,255,1)"], series: [ { name: '历年在校生人数', type: 'line', stack: 'Total', areaStyle: { normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(80,141,255,0.7)' }, { offset: .34, color: 'rgba(56,155,255,0.45)' }, { offset: 1, color: 'rgba(38,197,254,0.00)' }]) } }, emphasis: { focus: 'series' }, data: [21381, 28617, 32114, 26688, 29766] }, ] }; option && myChart.setOption(option); }, charts7 () { var chartDom = document.getElementById('echarts7'); var myChart = echarts.init(chartDom); var option; option = { title: { text: '各校学生人数分布图', textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} fontSize: 16, color: '#fff', fontWeight:'bold' }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { return params[0].name+":" + params[0].value+"人"; }, }, legend: { show:true, // data: ['2021年'] }, grid: { top:"10%", left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { show:false, }, yAxis: { type: 'category', data: ['第四小学','第二小学','第一小学','第一中学','实验中学'], axisLabel:{ color: '#03d1f3', fontSize: 14, }, splitLine: { lineStyle: { color: ['rgba(0,0,0,1)'] } }, }, series: [ { // name: '2021年', type: 'bar', barWidth: 20, data: [892, 1623, 2675,2318,1294], //顶部数字展示pzr itemStyle: { emphasis: { barBorderRadius: [0,100, 100, 0], label:{ show:true, position: "right", color:"#fff" } }, normal: { //柱形图圆角,初始化效果 barBorderRadius:[0,100, 100, 0], // color:new echarts.graphic.LinearGradient( // 0, 0, 1, 0, // [ // {offset: 0, color: '#011135'}, // {offset: 0.5, color: '#01367b'}, // {offset: 1, color: '#0178e9'} // ] // ), color:function(params){ var colorList1 = new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 1, color: '#0178e9'} ] ); var colorList2 = new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 1, color: '#f96e00'} ] ); var colorList3 = new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 1, color: '#45e190'} ] ); var colorList = [colorList1,colorList2,colorList3] return colorList[params.dataIndex % colorList.length]; }, label:{ show:true, position: "right", color:"#fff" } } }, } ] }; option && myChart.setOption(option); } } })