报表

97 阅读2分钟

就业情况

var worksdatas = [{

category:'Java方向',

weekdata:[120, 132, 101, 134, 90, 230, 210]

},{

category:'WEB前端',

weekdata:[340, 352, 201, 154, 190, 330, 410]

},{

category:'UI设计',

weekdata:[510, 132, 301, 334, 390, 330, 320]

},{

category:'网络安全',

weekdata:[620, 932, 901, 934, 1290, 1330, 1320]

}]


// 就业情况

function workReportFun() {

// 获取报表区域dom

var reportDom = document.getElementById('businessReport');

// 初始化报表

var workReport = echarts.init(reportDom);

// 准备报表选项option

var color = ['orange','blue','red','#448d0b'];

let datas = worksdatas.map((item,index)=>{

var currentData = {

name:item.category,

type:'line',

symbol:'emptyCircle',

symbolSize:8,

lineStyle:{

color:color[index]

},

smooth:true,

data:item.weekdata

}

return currentData;

})

console.log(datas);

var option = {

xAxis:{

type:'category',

boundaryGap:false,

axisLabel:{

color:'#fff'

},

data:['周一','周二','周三','周四','周五','周六','周日']

},

yAxis:{

type:'value',

axisLabel:{

color:'#fff'

},

splitLine:{

show:true,

lineStyle:{

color:'rgba(255,255,255,0.1)',

type:'dashed'

}

}

},

grid:{

left:'10%',

right:'5%',

top:'5%',

bottom:'12%'

},

tooltip:{

show:true,

type:'axis'

},

//数据列表

series:datas

}

// option写入报表workReport

workReport.setOption(option);

}

校区人数

// 校区人数 20202021
function studentNumber(){

const mychart = echarts.init(document.querySelector("#studentRport"));

option = {

color: ['#3398DB'],

// 设置提示框信息。

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器,坐标轴触发有效

type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

top:'3%',

containLabel: true

},

xAxis: [

{

type: 'category',

data: ['成都', '重庆', '上海', '西安', '武汉', '北京', '深圳'],

axisTick: {

// 居中对齐显示

alignWithLabel: true

},

axisLabel: {

color: "#fff",

fontSize: 14

}

}

],

yAxis: [

{

type: 'value',

// y 轴的文本颜色和字体大小

axisLabel: {

color: "#fff",

fontSize: 14

},

// y轴的分割线颜色

splitLine: {

lineStyle: {

color: "rgba(255,255,255,0.1)"

}

}

}

],

series: [

{

name: '直接访问',

type: 'bar',

barWidth: '40%',

data: [560, 450, 450, 600, 800, 700, 670]

}

]

};

mychart.setOption(option);

}

年龄分布

// 年龄分布

function ageDistribution(){

var ageRadio = document.getElementById('ageRadio');

var myAgeChart = echarts.init(ageRadio);

var option = {

tooltip:{

type:'item',

formatter:'{b}:{c}({d}%)'

},

series:[{

type:'pie',

data:[

{ value: 7700, name: '上海' },

{ value: 6000, name: '北京' },

{ value: 5900, name: '深圳' },

{ value: 4400, name: '广州' },

{ value: 3000, name: '杭州' },

{ value: 2700, name: '成都' },

{ value: 2100, name: '武汉' }

]

}]

}

myAgeChart.setOption(option);

}


环形图

function pcReport(){

var dPAN = document.getElementById('dPAN')

var panReport = echarts.init(dPAN)

var option = {

title:{

text:'d盘',

textStyle:{

color:"#fff",

fontSize:20

}

},

color:['#ff6600','#ccc'],

series: [

{

name: 'Access From',

// silent:true, //取消了silent

//使用emphasis

emphasis:{

disable:false,

scale:false,//不缩放

scaleSize:0,//为了防止失效直接设置为0

},

type: 'pie',

radius: ['60%', '70%'],

label: {

show: false,

position: 'center'

},

data: [

{ value: 1048, name: 'Search Engine' },

{ value: 735, name: 'Direct' },

]

}

]

};

panReport.setOption(option)

}