//定义图表对象
var myChart1 = null;
var myChart2 = null;
var myChart3 = null;
var myChart4 = null;
var myChart5 = null;
var myChart6 = null;
var myChart7 = null;
$(function(){
industryBar();
changeChart();
ageTrendPie();
skillAcquisitionChart();
playCounts();
roseChart();
moveMapChart();
clocknum(2060,'requiredPeoples'); //执行
clocknum(6990,'supplyPeoples');
/* $(".digits").numScroll({
time:5000
});*/
});
/**
* 柱形图
*/
function industryBar(){
var xAxisData = ['美术学院', '音乐学院', '影视学院', '电商学院', '旅游学院'];
var yAxisData = [200, 300, 300, 900, 1500];
myChart1 = echarts.init(document.getElementById('industryBar')); // 基于准备好的dom,初始化echarts实例
var option = {
title: {
text: '院系报到数据',
left: 'center',
textStyle:{color:'#fff'},
top:'4%',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
top:'20%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: xAxisData,
axisTick: {
alignWithLabel: true
},
axisLabel: { //x轴文字颜色
color: '#fff'
},
axisLine: { //x轴线的颜色
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: { //y轴文字颜色
color: '#fff'
},
axisLine: { //y轴线的颜色
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
},
splitLine: { //网格样式
show: true,
lineStyle:{
color: 'rgba(255,255,255,0.3)',
width: 1,
type: 'dashed'
}
}
}
],
series: [
{
// name: '直接访问',
type: 'bar',
barWidth: '50%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#248ff7'
}, {
offset: 1,
color: '#6851f1'
}]),
barBorderRadius: 11,
}
},
data:yAxisData
}
]
};
myChart1.setOption(option,true); // 使用刚指定的配置项和数据显示图表。
var app = {
currentIndex: -1,
};
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart1.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
myChart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 显示 tooltip
myChart1.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 3000);
$(document).ready(function(){
myChart1.resize();
})
window.addEventListener("resize", function () {
myChart1.resize();
});
}
/**
*折线图
*/
function changeChart(){
myChart2 = echarts.init(document.getElementById('changeLine'));
var option = {
title: {
text: '男女比例',
left: 'center',
textStyle: {color: '#fff'},
top:'4%',
},
grid: {
left: '2%',
right: '4%',
top:'25%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['男', '女'],
textStyle: {color: '#fff'},
right: '4%',
top:'3%',
bottom: '5%',
},
xAxis: {
type: 'category',
data: ['美术学院', '音乐学院', '影视学院', '电商学院', '旅游学院'],
axisLabel: { //x轴文字颜色
color: '#fff'
},
axisLine: { //x轴线的颜色
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
}
},
yAxis: {
type: 'value',
axisLabel: { //x轴文字颜色
color: '#fff'
},
axisLine: { //x轴线的颜色
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
},
splitLine: { //网格样式
show: true,
lineStyle:{
color: 'rgba(255,255,255,0.1)',
width: 1,
type: 'dashed'
}
}
},
color:['#01dee1',"#ed3f35"], //曲线颜色
series: [ {
name: '男',
type: 'line',
data: [47, 50,100, 140, 95, 220, 201,240,230,125,245,202,125],
smooth: true,//平滑曲线
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
},{
name: '女',
type: 'line',
data: [149, 138, 160, 130, 180, 28, 90,60,49,54,28,45],
smooth: true, //平滑曲线
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}]
};
myChart2.setOption(option,true); // 使用刚指定的配置项和数据显示图表。
$(document).ready(function(){
myChart2.resize();
})
window.addEventListener("resize", function () {
myChart2.resize();
});
}
/**
*饼形图
*/
function ageTrendPie(){
myChart3 = echarts.init(document.getElementById('agePie'));
var option = {
title: {
text: '年龄分析',
left: 'center',
textStyle: {color: '#fff'},
top:'4%',
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
grid: {
left: '3%',
right: '4%',
top:'35%',
bottom: '3%'
},
legend: {
orient: 'vertical',
left: 10,
data: ['16岁', '17岁','18岁','19岁','20岁','21岁以上'],
textStyle: {
color: '#fff'
}
},
series: [
{
name: '年龄占比',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
itemStyle: {
normal: {
label:{
show: true,
formatter: '{b} \n ({d}%)'
}
}
},
color:['#10606b','#0696ab','#06a0ab','#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
data: [
{value: 999, name: '16岁'},
{value: 2000, name: '17岁'},
{value: 1548, name: '18岁'},
{value: 1548, name: '19岁'},
{value: 1548, name: '20岁'},
{value: 1548, name: '21岁以上'}
]
}
]
};
myChart3.setOption(option,true); // 使用刚指定的配置项和数据显示图表。
$(document).ready(function(){
myChart3.resize();
})
window.addEventListener("resize", function () {
myChart3.resize();
});
}
/**
*柱形图
*/
function skillAcquisitionChart(){
var cost = [69, 78, 60,34, 70]//本期比上期(大于1按1处理)
var totalCost = [ 100,100, 100, 100,100]//比例综合
var visits = [ 664,793, 610, 350,"39/702"]//本期占总的百分比*100
var grade = ['医务室','保卫处', '组织部','学工部','公寓' ]
var myColor = ['#21BF57','#56D0E3', '#1089E7', '#F8B448','#F57474', ];
var data = {
grade: grade,
cost: cost,
totalCost: totalCost,
visits: visits
};
var option = {
title: {
top: '4%',
left: 'center',
text: '节点报到数据',
textStyle: {
align: 'center',
color:'#fff'
}
},
grid: {
left: '130',
right: '100',
bottom: '20'
},
xAxis: {
show: false,
},
yAxis: {
type: 'category',
axisLabel: {
margin:30,
show: true,
color: '#4DCEF8',
fontSize: 14
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data.grade
},
series: [{//外层边框
type: 'bar',
barGap: '-65%',
label: {
normal: {
show: true,
position: 'right',
color: '#fff',
fontSize: 14,
formatter:
function(param) {
return data.visits[param.dataIndex];
},
}
},
barWidth: '30%',
itemStyle: {
normal: {
borderColor: '#4DCEF8',
borderWidth: 2,
barBorderRadius: 15,
color: 'rgba(102, 102, 102,0)'
},
},
z: 1,
data: data.totalCost,
// data: da
}, {//柱形图占比
type: 'bar',
barGap: '-85%',
barWidth: '21%',
itemStyle: {
normal: {
barBorderRadius: 16,
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
max: 1,
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}%'
}
},
labelLine: {
show: true,
},
z: 2,
data: data.cost,
}]
}
myChart4 = echarts.init(document.getElementById('skillAcquisitionBar'));
myChart4.setOption(option,true);
$(document).ready(function(){
myChart4.resize();
})
window.addEventListener("resize", function () {
myChart4.resize();
});
}
/**
*折线图
*/
function playCounts(){
let bgColor = "#fff";
let color = [
"#0090FF",
"#36CE9E",
"#FFC005",
"#FF515A",
"#8B5CFF",
"#00CA69"
];
let echartData = [{
name: "1",
value1: 100,
value2: 233
},
{
name: "2",
value1: 138,
value2: 233
},
{
name: "3",
value1: 280,
value2: 200
},
{
name: "4",
value1: 173,
value2: 180
},
{
name: "5",
value1: 180,
value2: 199
},
{
name: "6",
value1: 180,
value2: 133
},
{
name: "7",
value1: 180,
value2: 210
},
{
name: "8",
value1: 190,
value2: 150
},
{
name: "9",
value1: 160,
value2: 180
},
{
name: "10",
value1: 230,
value2: 180
},
{
name: "11",
value1: 130,
value2: 100
},
{
name: "12",
value1: 80,
value2: 180
},
];
let xAxisData = echartData.map(v => v.name);
// ["1", "2", "3", "4", "5", "6", "7", "8"]
let yAxisData1 = echartData.map(v => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 = echartData.map(v => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
}
/////////////////////
var option = {
title: {
top: '4%',
left: 'center',
text: '图 ',
textStyle: {
align: 'center',
color:'#fff'
}
},
legend: {
right: 10,
top: 10,
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "axis",
formatter: function(params) {
let html = '';
params.forEach(v => {
console.log(v)
html += `