|
|
$(window).load(function () { $(".loading").fadeOut() })
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
echarts_1();
|
|
|
echarts_2();
|
|
|
echarts_3();
|
|
|
|
|
|
var total = 560;
|
|
|
zb1(total, 240);
|
|
|
zb2(total, 240);
|
|
|
zb3(total, 40);
|
|
|
zb4(total, 40);
|
|
|
|
|
|
$('.marquee').liMarquee({
|
|
|
direction: 'up',//身上滚动
|
|
|
runshort: true,//内容不足时不滚动
|
|
|
scrollamount: 20//速度
|
|
|
});
|
|
|
|
|
|
/*3D标签云*/
|
|
|
tagcloud({
|
|
|
selector: ".tagcloud", //元素选择器
|
|
|
fontsize: 6, //基本字体大小, 单位px
|
|
|
radius: 40, //滚动半径, 单位px 页面宽度和高度的五分之一
|
|
|
mspeed: "slow", //滚动最大速度, 取值: slow, normal(默认), fast
|
|
|
ispeed: "slow", //滚动初速度, 取值: slow, normal(默认), fast
|
|
|
direction: 0, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
|
|
|
keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
function echarts_1() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('echarts_1'));
|
|
|
|
|
|
var data = [
|
|
|
{ value: 400, name: '空闲' },
|
|
|
{ value: 150, name: '占用' },
|
|
|
{ value: 10, name: '维修' },
|
|
|
|
|
|
];
|
|
|
|
|
|
option = {
|
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: "{b}: <br/>{c} ({d}%)"
|
|
|
},
|
|
|
color: ['#20b9cf', '#2089cf', '#205bcf'],
|
|
|
legend: { //图例组件，颜色和名字
|
|
|
x: '60%',
|
|
|
y: 'center',
|
|
|
orient: 'vertical',
|
|
|
itemGap: 12, //图例每项之间的间隔
|
|
|
itemWidth: 10,
|
|
|
itemHeight: 10,
|
|
|
icon: 'rect',
|
|
|
data: data,
|
|
|
textStyle: {
|
|
|
color: [],
|
|
|
fontStyle: 'normal',
|
|
|
fontFamily: '微软雅黑',
|
|
|
fontSize: 20,
|
|
|
}
|
|
|
},
|
|
|
series: [{
|
|
|
name: '各占比例',
|
|
|
type: 'pie',
|
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
|
minAngle: 20, //最小的扇区角度（0 ~ 360）
|
|
|
center: ['30%', '50%'], //饼图的中心（圆心）坐标
|
|
|
radius: [30, 70], //饼图的半径
|
|
|
// avoidLabelOverlap: true, ////是否启用防止标签重叠
|
|
|
itemStyle: { //图形样式
|
|
|
normal: {
|
|
|
borderColor: 'transparent',
|
|
|
borderWidth: 2,
|
|
|
},
|
|
|
},
|
|
|
label: { //标签的位置
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: 'inside', //标签的位置
|
|
|
formatter: "{c} : {d}%",
|
|
|
textStyle: {
|
|
|
color: '#fff',
|
|
|
}
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontWeight: 'bold'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
data: data
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function echarts_2() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('echarts_2'));
|
|
|
|
|
|
var xData = function () {
|
|
|
var data = ['星期一', '星期二', '星期三', '星期四', '星期四五', '星期六', '星期天'];
|
|
|
|
|
|
return data;
|
|
|
}();
|
|
|
|
|
|
var data = [700, 650, 450, 750, 600, 800, 900]
|
|
|
|
|
|
option = {
|
|
|
// backgroundColor: "#141f56",
|
|
|
|
|
|
tooltip: {
|
|
|
show: "true",
|
|
|
trigger: 'item',
|
|
|
backgroundColor: 'rgba(0,0,0,0.4)', // 背景
|
|
|
padding: [8, 10], //内边距
|
|
|
// extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
|
formatter: function (params) {
|
|
|
if (params.seriesName != "") {
|
|
|
return params.name + ' ： ' + params.value + ' kW·h ';
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
borderWidth: 0,
|
|
|
top: 20,
|
|
|
bottom: 35,
|
|
|
left: 40,
|
|
|
right: 10,
|
|
|
textStyle: {
|
|
|
color: "#fff"
|
|
|
}
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,0.2)',
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
inside: false,
|
|
|
textStyle: {
|
|
|
color: '#bac0c0',
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: '12',
|
|
|
},
|
|
|
},
|
|
|
data: xData,
|
|
|
}],
|
|
|
yAxis: {
|
|
|
min: 10,
|
|
|
type: 'value',
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,0.2)',
|
|
|
}
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,0.1)',
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
color: '#bac0c0',
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: '12',
|
|
|
},
|
|
|
formatter: '{value}',
|
|
|
},
|
|
|
},
|
|
|
series: [{
|
|
|
type: 'bar',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
color: '#00c0e9'
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
color: '#3b73cf'
|
|
|
}]),
|
|
|
barBorderRadius: 50,
|
|
|
borderWidth: 0,
|
|
|
},
|
|
|
emphasis: {
|
|
|
shadowBlur: 15,
|
|
|
shadowColor: 'rgba(105,123, 214, 0.7)'
|
|
|
}
|
|
|
},
|
|
|
zlevel: 2,
|
|
|
barWidth: '20%',
|
|
|
data: data,
|
|
|
}]
|
|
|
}
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
}
|
|
|
function echarts_3() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('echarts_3'));
|
|
|
|
|
|
var xData = function () {
|
|
|
var data = ['星期一', '星期二', '星期三', '星期四', '星期四五', '星期六', '星期天'];
|
|
|
|
|
|
return data;
|
|
|
}();
|
|
|
|
|
|
var data = [120, 200, 150, 180, 140, 220, 250]
|
|
|
|
|
|
option = {
|
|
|
// backgroundColor: "#141f56",
|
|
|
|
|
|
tooltip: {
|
|
|
show: "true",
|
|
|
trigger: 'item',
|
|
|
backgroundColor: 'rgba(0,0,0,0.4)', // 背景
|
|
|
padding: [8, 10], //内边距
|
|
|
// extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
|
formatter: function (params) {
|
|
|
if (params.seriesName != "") {
|
|
|
return params.name + ' ： ' + params.value + ' kW·h ';
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
borderWidth: 0,
|
|
|
top: 20,
|
|
|
bottom: 35,
|
|
|
left: 40,
|
|
|
right: 10,
|
|
|
textStyle: {
|
|
|
color: "#fff"
|
|
|
}
|
|
|
},
|
|
|
xAxis: [{
|
|
|
type: 'category',
|
|
|
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,.1)',
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
inside: false,
|
|
|
textStyle: {
|
|
|
color: 'rgba(255,255,255,.7)',
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: '12',
|
|
|
},
|
|
|
},
|
|
|
data: xData,
|
|
|
}],
|
|
|
yAxis: {
|
|
|
min: 10,
|
|
|
type: 'value',
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,.1)',
|
|
|
}
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: 'rgba(255,255,255,0.1)',
|
|
|
}
|
|
|
},
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
color: 'rgba(255,255,255,.6)',
|
|
|
fontWeight: 'normal',
|
|
|
fontSize: '12',
|
|
|
},
|
|
|
formatter: '{value}',
|
|
|
},
|
|
|
},
|
|
|
series: [{
|
|
|
type: 'bar',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
color: '#fccb05'
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
color: '#f5804d'
|
|
|
}]),
|
|
|
barBorderRadius: 50,
|
|
|
borderWidth: 0,
|
|
|
},
|
|
|
emphasis: {
|
|
|
shadowBlur: 15,
|
|
|
shadowColor: 'rgba(105,123, 214, 0.7)'
|
|
|
}
|
|
|
},
|
|
|
zlevel: 2,
|
|
|
barWidth: '20%',
|
|
|
data: data,
|
|
|
}]
|
|
|
}
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function zb1(total, val) {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('zb1'));
|
|
|
option = {
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
radius: ['60%', '70%'],
|
|
|
color: '#49bcf7',
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'center'
|
|
|
}
|
|
|
},
|
|
|
data: [{
|
|
|
value: val,
|
|
|
name: '男厕比例',
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: Math.round(val / total * 100) + '%',
|
|
|
textStyle: {
|
|
|
fontSize: 30,
|
|
|
color: '#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: total,
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: function (params) {
|
|
|
return '男厕比例'
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: '#aaa',
|
|
|
fontSize: 16
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'rgba(255,255,255,.2)'
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
}]
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
}
|
|
|
function zb2(total, val) {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('zb2'));
|
|
|
option = {
|
|
|
//animation: false,
|
|
|
series: [{
|
|
|
type: 'pie',
|
|
|
radius: ['60%', '70%'],
|
|
|
color: '#49bcf7',
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'center'
|
|
|
}
|
|
|
},
|
|
|
data: [{
|
|
|
value: val,
|
|
|
name: '女厕比例',
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: Math.round(val / total * 100) + '%',
|
|
|
textStyle: {
|
|
|
fontSize: 24,
|
|
|
color: '#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
value: total,
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: function (params) {
|
|
|
return '女厕比例'
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: '#aaa',
|
|
|
fontSize: 16
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'rgba(255,255,255,.2)'
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
}]
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
}
|
|
|
function zb3(total, val) {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('zb3'));
|
|
|
option = {
|
|
|
series: [{
|
|
|
|
|
|
type: 'pie',
|
|
|
radius: ['60%', '70%'],
|
|
|
color: '#62c98d',
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'center'
|
|
|
}
|
|
|
},
|
|
|
data: [{
|
|
|
value: val,
|
|
|
name: '童厕比例',
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: Math.round(val / total * 100) + '%',
|
|
|
textStyle: {
|
|
|
fontSize: 24,
|
|
|
color: '#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
value: total,
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: function (params) {
|
|
|
return '童厕比例'
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: '#aaa',
|
|
|
fontSize: 16
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'rgba(255,255,255,.2)'
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
}]
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
}
|
|
|
function zb4(total, val) {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('zb4'));
|
|
|
option = {
|
|
|
series: [{
|
|
|
|
|
|
type: 'pie',
|
|
|
radius: ['60%', '70%'],
|
|
|
color: '#29d08a',
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'center'
|
|
|
}
|
|
|
},
|
|
|
data: [{
|
|
|
value: val,
|
|
|
name: '残疾厕比例',
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: Math.round(val / total * 100) + '%',
|
|
|
textStyle: {
|
|
|
fontSize: 24,
|
|
|
color: '#fff',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}, {
|
|
|
value: total,
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: function (params) {
|
|
|
return '残疾厕所比例'
|
|
|
},
|
|
|
textStyle: {
|
|
|
color: '#aaa',
|
|
|
fontSize: 16
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: 'rgba(255,255,255,.2)'
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
}]
|
|
|
}]
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
window.addEventListener("resize", function () {
|
|
|
myChart.resize();
|
|
|
});
|
|
|
} |