382 lines
8.5 KiB
JavaScript
382 lines
8.5 KiB
JavaScript
$(function () {
|
||
//1. 复制一份list标签里面的li, 为css滚动动画提供
|
||
$('.monitor .content').each(function () {
|
||
$(this).find('ul').append($(this).find('ul').children('li').clone())
|
||
});
|
||
|
||
//2. 故障监控按键点击切换
|
||
$('.monitor .tabs').on('click', 'a', function () {
|
||
//2.0 添加移除active类名
|
||
$(this).addClass('active').siblings().remove('active')
|
||
|
||
//2.1 找到下标
|
||
let index = $(this).index()
|
||
|
||
//2.2 设置对应content显示
|
||
$('.monitor .content').eq(index).show().siblings('.content').hide()
|
||
});
|
||
|
||
// 3. 添加饼状图
|
||
(function () {
|
||
let mychart = echarts.init($('.site .pie')[0])
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
},
|
||
series: [{
|
||
name: '面积模式',
|
||
type: 'pie',
|
||
radius: ['5%', '60 %'],
|
||
labelLine: {
|
||
// 连接扇形图线长
|
||
length: 3,
|
||
// 连接文字线长
|
||
length2: 3,
|
||
},
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
data: [{
|
||
value: 10,
|
||
name: 'rose1'
|
||
},
|
||
{
|
||
value: 5,
|
||
name: 'rose2'
|
||
},
|
||
{
|
||
value: 15,
|
||
name: 'rose3'
|
||
},
|
||
{
|
||
value: 25,
|
||
name: 'rose4'
|
||
},
|
||
{
|
||
value: 20,
|
||
name: 'rose5'
|
||
},
|
||
{
|
||
value: 35,
|
||
name: 'rose6'
|
||
},
|
||
{
|
||
value: 30,
|
||
name: 'rose7'
|
||
},
|
||
{
|
||
value: 40,
|
||
name: 'rose8'
|
||
}
|
||
]
|
||
}]
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
mychart.setOption(option)
|
||
})();
|
||
|
||
//4.添加柱状图
|
||
(function () {
|
||
let mychart = echarts.init($('.user .bar')[0])
|
||
|
||
let item = {
|
||
value: 1200,
|
||
itemStyle: {
|
||
color: '#254065'
|
||
},
|
||
// 设置提示弹出框的样式
|
||
tooltip: {
|
||
// 这个可以设置整个框的样式
|
||
// extraCssText: 'opacity:0'
|
||
trigger: 'none'
|
||
},
|
||
// 设置鼠标移上时柱状条的背景色
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: '#254065'
|
||
}
|
||
}
|
||
}
|
||
|
||
let option = {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: 'red' // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: 'blue' // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
top: '5%',
|
||
bottom: '5%',
|
||
containLabel: true,
|
||
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLabel: {
|
||
color: '#4c9bfd'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#68d8fe'
|
||
}
|
||
}
|
||
}],
|
||
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#4c9bfd'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: ['#68d8fe']
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#68d8fe'
|
||
}
|
||
}
|
||
}],
|
||
|
||
series: [{
|
||
|
||
name: '设备数量',
|
||
|
||
type: 'bar',
|
||
|
||
barWidth: '50%',
|
||
|
||
data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
|
||
}]
|
||
|
||
}
|
||
|
||
mychart.setOption(option)
|
||
|
||
})();
|
||
|
||
//5.订单量统计
|
||
//5.1 造一个假的订单数据
|
||
let orderData = [{
|
||
num: 3650000,
|
||
money: 36500000
|
||
},
|
||
{
|
||
num: 90000,
|
||
money: 900000
|
||
},
|
||
{
|
||
num: 30000,
|
||
money: 300000
|
||
},
|
||
{
|
||
num: 2400,
|
||
money: 24000
|
||
}
|
||
];
|
||
|
||
(function () {
|
||
//设置初始下标
|
||
let index = 0
|
||
|
||
//5.2 绑定鼠标点击事件
|
||
$('.order .tabs').on('click', 'a', function () {
|
||
//修改类名
|
||
$(this).addClass('active').siblings().removeClass('active')
|
||
//找到下标
|
||
let temp = $(this).index()
|
||
index = temp
|
||
//修改元素内容为对应下标的数组数据
|
||
$('.order .data .item .order_orders').text(orderData[temp]['num'])
|
||
$('.order .data .item .order_count').text(orderData[temp]['money'])
|
||
})
|
||
|
||
//开始自动执行一次
|
||
$('.order .tabs a').eq(index).click()
|
||
|
||
//自动轮播
|
||
let timeId = setInterval(function () {
|
||
index++
|
||
if (index == $('.order .tabs a').length) {
|
||
index = 0
|
||
}
|
||
$('.order .tabs a').eq(index).click()
|
||
}, 5000)
|
||
|
||
|
||
})();
|
||
|
||
//6.销售统计
|
||
(function () {
|
||
|
||
//造一个假的数据
|
||
let data = {
|
||
year: [
|
||
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
|
||
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
|
||
['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||
],
|
||
quarter: [
|
||
[230, 750, 120, 970],
|
||
[430, 310, 60, 230],
|
||
['春', '夏', '秋', '冬']
|
||
],
|
||
month: [
|
||
[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36, 34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36, 34, 87, 32, 76, 98, 12, 32],
|
||
[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98, 56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98, 56, 43, 98, 21, 56, 87, 43],
|
||
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
||
],
|
||
week: [
|
||
[43, 73, 62, 54, 91, 54, 66],
|
||
[32, 54, 34, 87, 32, 45, 76],
|
||
['星期1', '星期2', '星期3', '星期4', '星期5', '星期6', '星期日']
|
||
]
|
||
}
|
||
|
||
//画图
|
||
let mychart = echarts.init($('.sales .line')[0])
|
||
|
||
let option = {
|
||
legend: {
|
||
data: ['预期销售额', '实际销售额度'],
|
||
textStyle: {
|
||
color: '#4c9bfd'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '20%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
color: "#4c9bfd",
|
||
interval: 0
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#68d8fe'
|
||
}
|
||
},
|
||
data: data.year[2],
|
||
boundaryGap: false,
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: "#4c9bfd"
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#68d8fe'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: ['#68d8fe']
|
||
}
|
||
},
|
||
},
|
||
color: ['yellow', 'red'],
|
||
series: [{
|
||
name: '预期销售额',
|
||
data: data.year[0],
|
||
type: 'line',
|
||
smooth: true,
|
||
|
||
},
|
||
{
|
||
name: '实际销售额度',
|
||
data: data.year[1],
|
||
type: 'line',
|
||
smooth: true,
|
||
},
|
||
]
|
||
}
|
||
|
||
mychart.setOption(option)
|
||
|
||
//起始下标
|
||
let index = 0
|
||
|
||
//点击事件
|
||
$('.sales .caption').on('click', 'a', function () {
|
||
//修改class
|
||
$(this).addClass('active').siblings('a').removeClass('active')
|
||
//更改index
|
||
index = $(this).index() - 1 //兄弟里还有一个h2
|
||
//获取当前的自定义属性
|
||
let current = $(this).data('type')
|
||
//更改option里面的数据
|
||
option.series[0].data = data[current][0]
|
||
option.series[1].data = data[current][1]
|
||
option.xAxis.data = data[current][2]
|
||
//重新渲染图形
|
||
mychart.setOption(option)
|
||
})
|
||
|
||
|
||
//定时器轮播
|
||
let timeId
|
||
|
||
function slideshow() {
|
||
timeId = setInterval(function () {
|
||
index++
|
||
if (index == $('.sales .caption a').length) {
|
||
index = 0
|
||
}
|
||
$('.sales .caption a').eq(index).click()
|
||
}, 5000);
|
||
}
|
||
|
||
slideshow()
|
||
|
||
//鼠标悬停停止轮播
|
||
$('.sales').on('mouseenter', function () {
|
||
clearInterval(timeId)
|
||
})
|
||
|
||
//鼠标移开继续轮播
|
||
$('.sales').on('mouseleave', function () {
|
||
slideshow()
|
||
})
|
||
|
||
})();
|
||
|
||
}) |