${v.seriesName}.${v.name}
${v.value}
`;
})
return html
},
extraCssText: 'border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: '#ffffff',
shadowColor: 'rgba(225,225,225,1)',
shadowBlur: 5
}
}
},
grid: {
top: 70,
bottom: 10,
containLabel: true
},
xAxis: [{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: '{value}',
textStyle: {
color: "#fff",
opacity: 1
}
},
axisLine: {
lineStyle: {
color: "#D9D9D9"
}
},
data: xAxisData
}],
yAxis: [{
type: "value",
//name: '单位：人 ',
axisLabel: {
textStyle: {
color: "#fff"
}
},
nameTextStyle: {
color: "#fff",
fontSize: 12,
lineHeight: 40
},
splitLine: { //网格样式
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)',
width: 1,
type: 'dashed'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}],
series: [{
name: "硕士",
type: "line",
smooth: true,
// showSymbol: false,/
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[0],
shadowBlur: 3,
shadowColor: hexToRgba(color[0], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[0], 0.3)
},
{
offset: 1,
color: hexToRgba(color[0], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[0], 0.1),
shadowBlur: 10
}
},
data: yAxisData1
}, {
name: "博士",
type: "line",
smooth: true,
// showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
shadowBlur: 3,
shadowColor: hexToRgba(color[1], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[1], 0.3)
},
{
offset: 1,
color: hexToRgba(color[1], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[1], 0.1),
shadowBlur: 10
}
},
data: yAxisData2
}, {
name: "本科",
type: "line",
smooth: true,
// showSymbol: false,
symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
shadowBlur: 3,
shadowColor: hexToRgba(color[2], 0.5),
shadowOffsetY: 8
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: hexToRgba(color[2], 0.3)
},
{
offset: 1,
color: hexToRgba(color[2], 0.1)
}
],
false
),
shadowColor: hexToRgba(color[2], 0.1),
shadowBlur: 10
}
},
data: yAxisData3
}
]
};
myChart5 = echarts.init(document.getElementById('playCounts'));
myChart5.setOption(option, true);
myChart5.on("click", function (params) {
console.log(params.name);
});
$(document).ready(function() {
myChart5.resize();
})
window.addEventListener("resize", function() {
myChart5.resize();
});
}
/**
*饼图
*/
function pieChart(data) {
let legend = data.map(v => v.name);
var option = {
color: ['#6328af', '#0090FF', '#36CE9E', '#3a91d2', '#06a0ab', '#86c9f4'],
title: {
text: '本硕博',
left: 'center',
top: '4%',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
show: false,
data: legend,
textStyle: {
color: '#fff'
}
},
toolbox: {
show: true
},
series: [
{
name: '半径模式',
type: 'pie',
radius: [50, 100],
center: ['50%', '50%'],
label: {
show: true
},
emphasis: {
label: {
show: true
}
},
data: data
}
]
};
myChart7 = echarts.init(document.getElementById('playCounts'));
myChart7.setOption(option);
$(document).ready(function() {
myChart7.resize();
})
window.addEventListener("resize", function() {
myChart7.resize();
});
}
/**
* 玫瑰图-地区分布
*/
function roseChart() {
var option = {
color: ['#1d9dff', '#006cff', '#60cda0', '#ed8884', '#8b78f6', '#3a91d2', '#06a0ab', '#86c9f4'],
title: {
text: '地区分布',
left: 'center',
top: '4%',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['北京', '天津', '上海', '深圳', '广州', '厦门', '珠海', '西安'],
textStyle: {
color: '#fff'
}
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '半径模式',
type: 'pie',
radius: [15, 90],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: true
},
emphasis: {
label: {
show: true
}
},
data: [
{ value: 10, name: '北京' },
{ value: 15, name: '天津' },
{ value: 15, name: '上海' },
{ value: 25, name: '深圳' },
{ value: 20, name: '广州' },
{ value: 35, name: '厦门' },
{ value: 30, name: '珠海' },
{ value: 40, name: '西安' }
]
}
]
};
myChart6.setOption(option);
$(document).ready(function() {
myChart6.resize();
})
window.addEventListener("resize", function() {
myChart6.resize();
});
}
/**
*LED液晶屏数字字符效果
*/
function showLEDNumber(value, id) {
var htmlArr = [];
var len = value.length;
for (var i = 0; i < len; i++) {
var number = value.charAt(i);
htmlArr.push('
');
htmlArr.push('
');
htmlArr.push('
');
htmlArr.push('
');
htmlArr.push('
');
htmlArr.push('
');
htmlArr.push('
');
htmlArr.push('
');
htmlArr.push('
');
}
$("#" + id).html(htmlArr.join(""));
}
function clocknum(num, id) {
$('#' + id).empty();
var html = '';
var strarr = num.toString().split('');
var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
for (var i = 0; i < strarr.length; i++) {
if (strarr[i] == '.') {
html += '
'
} else {
var clasname = digit_to_name[strarr[i]];
html += '
' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'
';
}
}
$('#' + id).append(html);
}