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()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
})
|