You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
517 lines
14 KiB
517 lines
14 KiB
/*大屏*/
|
|
//自调用函数
|
|
//;(function () {
|
|
// // 1、页面一加载就要知道页面宽度计算
|
|
// var setFont = function () {
|
|
// // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
|
|
// var html = document.documentElement // 获取html
|
|
// // 获取宽度
|
|
// var width = html.clientWidth
|
|
|
|
// // 判断
|
|
// if (width < 1024) width = 1024
|
|
// if (width > 1920) width = 1920
|
|
// // 设置html的基准值
|
|
// var fontSize = width / 80 + 'px'
|
|
// // 设置给html
|
|
// html.style.fontSize = fontSize
|
|
// }
|
|
// setFont()
|
|
// // 2、页面改变的时候也需要设置
|
|
// // 尺寸改变事件
|
|
// window.onresize = function () {
|
|
// setFont()
|
|
// }
|
|
//})()
|
|
|
|
;(function () {
|
|
//事件委托
|
|
$('.monitor').on('click', ' a', function () {
|
|
//点击当前的a 加类名 active 他的兄弟删除类名
|
|
$(this).addClass('active').siblings().removeClass('active')
|
|
//获取一一对应的下标
|
|
var index = $(this).index()
|
|
//选取content 然后狗日对应下标的 显示 当前的兄弟.content隐藏
|
|
$('.content').eq(index).show().siblings('.content').hide()
|
|
})
|
|
//滚动
|
|
//原理：把marquee下面的子盒子都复制一遍 加入到marquee中
|
|
// 然后动画向上滚动，滚动到一半重新开始滚动
|
|
//因为选取的是两个marquee 所以要遍历
|
|
$('.monitor .marquee').each(function (index, dom) {
|
|
//将每个 的所有子级都复制一遍
|
|
//var rows = $(dom).children().clone()
|
|
////再将新的到的加入原来的
|
|
//$(dom).append(rows)
|
|
})
|
|
})()
|
|
//;(function () {
|
|
// var myechart = echarts.init($('.pie')[0])
|
|
// option = {
|
|
// // 控制提示
|
|
// tooltip: {
|
|
// // 非轴图形，使用item的意思是放到数据对应图形上触发提示
|
|
// trigger: 'item',
|
|
// // 格式化提示内容：
|
|
// // a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
|
|
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
// },
|
|
// // 控制图表
|
|
// series: [
|
|
// {
|
|
// // 图表名称
|
|
// name: '地区',
|
|
// // 图表类型
|
|
// type: 'pie',
|
|
// // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
|
|
// // 百分比基于 图表DOM容器的半径
|
|
// radius: ['10%', '70%'],
|
|
// // 图表中心位置 left 50% top 50% 距离图表DOM容器
|
|
// center: ['50%', '50%'],
|
|
// // 半径模式，另外一种是 area 面积模式
|
|
// roseType: 'radius',
|
|
// // 数据集 value 数据的值 name 数据的名称
|
|
// data: [
|
|
// { value: 20, name: '云南' },
|
|
// { value: 5, name: '北京' },
|
|
// { value: 15, name: '山东' },
|
|
// { value: 25, name: '河北' },
|
|
// { value: 20, name: '江苏' },
|
|
// { value: 35, name: '浙江' },
|
|
// { value: 30, name: '四川' },
|
|
// { value: 40, name: '湖北' }
|
|
// ],
|
|
// //文字调整
|
|
// label: {
|
|
// fontSize: 10
|
|
// },
|
|
// //引导线
|
|
// labelLine: {
|
|
// length: 8,
|
|
// length2: 10
|
|
// }
|
|
// }
|
|
// ],
|
|
// color: [
|
|
// '#006cff',
|
|
// '#60cda0',
|
|
// '#ed8884',
|
|
// '#ff9f7f',
|
|
// '#0096ff',
|
|
// '#9fe6b8',
|
|
// '#32c5e9',
|
|
// '#1d9dff'
|
|
// ]
|
|
// }
|
|
// myechart.setOption(option)
|
|
// myechart.on('click', function (param) {
|
|
// alert(
|
|
// "click"
|
|
// )
|
|
// setTimeout(function () {
|
|
// location.href = ''
|
|
// }, 20000)
|
|
// })
|
|
//})()
|
|
// 用户
|
|
//;(function () {
|
|
// // 中间省略的数据 准备三项
|
|
// var item = {
|
|
// name: '',
|
|
// value: 1200,
|
|
// // 柱子颜色
|
|
// itemStyle: {
|
|
// color: '#254065'
|
|
// },
|
|
// // 鼠标经过柱子颜色
|
|
// emphasis: {
|
|
// itemStyle: {
|
|
// color: '#254065'
|
|
// }
|
|
// },
|
|
// // 工具提示隐藏
|
|
// tooltip: {
|
|
// extraCssText: 'opacity:0'
|
|
// }
|
|
// }
|
|
// option = {
|
|
// // 工具提示
|
|
// tooltip: {
|
|
// // 触发类型 经过轴触发axis 经过轴触发item
|
|
// trigger: 'item',
|
|
// // 轴触发提示才有效
|
|
// axisPointer: {
|
|
// // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
|
|
// type: 'shadow'
|
|
// }
|
|
// },
|
|
// // 图表边界控制
|
|
// grid: {
|
|
// // 距离 上右下左 的距离
|
|
// left: '0',
|
|
// right: '3%',
|
|
// bottom: '3%',
|
|
// top: '5%',
|
|
// // 大小是否包含文本【类似于boxsizing】
|
|
// containLabel: true,
|
|
// //显示边框
|
|
// show: true,
|
|
// //边框颜色
|
|
// borderColor: 'rgba(0, 240, 255, 0.3)'
|
|
// },
|
|
// // 控制x轴
|
|
// xAxis: [
|
|
// {
|
|
// // 使用类目，必须有data属性
|
|
// type: 'category',
|
|
// // 使用 data 中的数据设为刻度文字
|
|
// data: [
|
|
// '上海',
|
|
// '广州',
|
|
// '北京',
|
|
// '深圳',
|
|
// '合肥',
|
|
// '',
|
|
// '......',
|
|
// '',
|
|
// '杭州',
|
|
// '厦门',
|
|
// '济南',
|
|
// '成都',
|
|
// '重庆'
|
|
// ],
|
|
// // 刻度设置
|
|
// axisTick: {
|
|
// // true意思：图形在刻度中间
|
|
// // false意思：图形在刻度之间
|
|
// alignWithLabel: false,
|
|
// show: false
|
|
// },
|
|
// //文字
|
|
// axisLabel: {
|
|
// color: '#4c9bfd'
|
|
// }
|
|
// }
|
|
// ],
|
|
// // 控制y轴
|
|
// yAxis: [
|
|
// {
|
|
// // 使用数据的值设为刻度文字
|
|
// type: 'value',
|
|
// axisTick: {
|
|
// // true意思：图形在刻度中间
|
|
// // false意思：图形在刻度之间
|
|
// alignWithLabel: false,
|
|
// show: false
|
|
// },
|
|
// //文字
|
|
// axisLabel: {
|
|
// color: '#4c9bfd'
|
|
// },
|
|
// splitLine: {
|
|
// lineStyle: {
|
|
// color: 'rgba(0, 240, 255, 0.3)'
|
|
// }
|
|
// }
|
|
// }
|
|
// ],
|
|
// // 控制x轴
|
|
// series: [
|
|
// {
|
|
// // series配置
|
|
// // 颜色
|
|
// itemStyle: {
|
|
// // 提供的工具函数生成渐变颜色
|
|
// color: new echarts.graphic.LinearGradient(
|
|
// // (x1,y2) 点到点 (x2,y2) 之间进行渐变
|
|
// 0,
|
|
// 0,
|
|
// 0,
|
|
// 1,
|
|
// [
|
|
// { offset: 0, color: '#00fffb' }, // 0 起始颜色
|
|
// { offset: 1, color: '#0061ce' } // 1 结束颜色
|
|
// ]
|
|
// )
|
|
// },
|
|
// // 图表数据名称
|
|
// name: '用户统计',
|
|
// // 图表类型
|
|
// type: 'bar',
|
|
// // 柱子宽度
|
|
// barWidth: '60%',
|
|
// // 数据
|
|
// data: [
|
|
// 2100,
|
|
// 1900,
|
|
// 1700,
|
|
// 1560,
|
|
// 1400,
|
|
// item,
|
|
// item,
|
|
// item,
|
|
// 900,
|
|
// 750,
|
|
// 600,
|
|
// 480,
|
|
// 240
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
// var myechart = echarts.init($('.users .bar')[0])
|
|
// myechart.setOption(option)
|
|
// myechart.on('click', function (param) {
|
|
// alert(
|
|
// " "
|
|
// )
|
|
// setTimeout(function () {
|
|
// location.href = ''
|
|
// }, 20000)
|
|
// })
|
|
//})()
|
|
|
|
////订单
|
|
//;(function () {
|
|
// var data = {
|
|
// day365: { orders: '20,301,987', amount: '99834' },
|
|
// day90: { orders: '301,987', amount: '9834' },
|
|
// day30: { orders: '1,987', amount: '3834' },
|
|
// day1: { orders: '987', amount: '834' }
|
|
// }
|
|
// //点击事件
|
|
// $('.order').on('click', '.filter a', function () {
|
|
// //点击之后加类名
|
|
// $(this).addClass('active').siblings().removeClass('active')
|
|
// // 先获取点击a的 data-key自定义属性
|
|
// var key = $(this).attr('data-key')
|
|
// //获取自定义属性
|
|
// // data{}==>data.shuxing data['shuxing]
|
|
// key = data[key] //
|
|
// $('.order .item h4:eq(0)').text(key.orders)
|
|
// $('.order .item h4:eq(1)').text(key.amount)
|
|
// })
|
|
// //定时器
|
|
// var index = 0
|
|
// var aclick = $('.order a')
|
|
// setInterval(function () {
|
|
// index++
|
|
// if (index > 3) {
|
|
// index = 0
|
|
// }
|
|
// //每san秒调用点击事件
|
|
// aclick.eq(index).click()
|
|
// }, 3000)
|
|
//})()
|
|
//销售
|
|
//;(function () {
|
|
// var option = {
|
|
// //鼠标提示工具
|
|
// tooltip: {
|
|
// trigger: 'axis'
|
|
// },
|
|
// xAxis: {
|
|
// // 类目类型
|
|
// type: 'category',
|
|
// // x轴刻度文字
|
|
// data: [
|
|
// '1月',
|
|
// '2月',
|
|
// '3月',
|
|
// '4月',
|
|
// '5月',
|
|
// '6月',
|
|
// '7月',
|
|
// '8月',
|
|
// '9月',
|
|
// '10月',
|
|
// '11月',
|
|
// '12月'
|
|
// ],
|
|
// axisTick: {
|
|
// show: false //去除刻度线
|
|
// },
|
|
// axisLabel: {
|
|
// color: '#4c9bfd' //文本颜色
|
|
// },
|
|
// axisLine: {
|
|
// show: false //去除轴线
|
|
// },
|
|
// boundaryGap: false //去除轴内间距
|
|
// },
|
|
// yAxis: {
|
|
// // 数据作为刻度文字
|
|
// type: 'value',
|
|
// axisTick: {
|
|
// show: false //去除刻度线
|
|
// },
|
|
// axisLabel: {
|
|
// color: '#4c9bfd' //文本颜色
|
|
// },
|
|
// axisLine: {
|
|
// show: false //去除轴线
|
|
// },
|
|
// boundaryGap: false //去除轴内间距
|
|
// },
|
|
// //图例组件
|
|
// legend: {
|
|
// textStyle: {
|
|
// color: '#4c9bfd' // 图例文字颜色
|
|
// },
|
|
// right: '10%' //距离右边10%
|
|
// },
|
|
// // 设置网格样式
|
|
// grid: {
|
|
// show: true, // 显示边框
|
|
// top: '20%',
|
|
// left: '3%',
|
|
// right: '4%',
|
|
// bottom: '3%',
|
|
// borderColor: '#012f4a', // 边框颜色
|
|
// containLabel: true // 包含刻度文字在内
|
|
// },
|
|
// series: [
|
|
// {
|
|
// name: '预期销售额',
|
|
// // 数据
|
|
// data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
|
|
// // 图表类型
|
|
// type: 'line',
|
|
// // 圆滑连接
|
|
// smooth: true,
|
|
// itemStyle: {
|
|
// color: '#00f2f1' // 线颜色
|
|
// }
|
|
// },
|
|
// {
|
|
// name: '实际销售额',
|
|
// // 数据
|
|
// data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
|
|
// // 图表类型
|
|
// type: 'line',
|
|
// // 圆滑连接
|
|
// smooth: true,
|
|
// itemStyle: {
|
|
// color: '#ed3f35' // 线颜色
|
|
// }
|
|
// }
|
|
// ]
|
|
// }
|
|
// var myechart = echarts.init($('.line')[0])
|
|
// myechart.setOption(option)
|
|
|
|
// //点击效果
|
|
// var 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]
|
|
// ],
|
|
// quarter: [
|
|
// [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
|
|
// [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
|
|
// ],
|
|
// month: [
|
|
// [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
|
|
// [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
|
|
// ],
|
|
// week: [
|
|
// [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
|
|
// [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
|
|
// ]
|
|
// }
|
|
// $('.sales ').on('click', '.caption a', function () {
|
|
// $(this).addClass('active').siblings('a').removeClass('active')
|
|
// //option series data
|
|
// //获取自定义属性值
|
|
// var key = $(this).attr('data-type')
|
|
// //取出对应的值
|
|
// key = data[key]
|
|
// //将值设置到 图表中
|
|
// option.series[0].data = key[0]
|
|
// option.series[1].data = key[1]
|
|
// //再次调用才能在页面显示
|
|
// myechart.setOption(option)
|
|
// })
|
|
// //定时器
|
|
// var index = 0
|
|
// var timer = setInterval(function () {
|
|
// index++
|
|
// if (index > 4) {
|
|
// index = 0
|
|
// }
|
|
// $('.sales .caption a').eq(index).click()
|
|
// }, 2000)
|
|
//})()
|
|
//;(function () {
|
|
// var option = {
|
|
// series: [
|
|
// {
|
|
// type: 'pie',
|
|
// radius: ['130%', '150%'], // 放大图形
|
|
// center: ['50%', '80%'], // 往下移动 套住75%文字
|
|
// label: {
|
|
// show: false
|
|
// },
|
|
// startAngle: 180,
|
|
// hoverOffset: 0, // 鼠标经过不变大
|
|
// data: [
|
|
// {
|
|
// value: 100,
|
|
// itemStyle: {
|
|
// // 颜色渐变#00c9e0->#005fc1
|
|
// color: {
|
|
// type: 'linear',
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 0,
|
|
// y2: 1,
|
|
// colorStops: [
|
|
// { offset: 0, color: '#00c9e0' },
|
|
// { offset: 1, color: '#005fc1' }
|
|
// ]
|
|
// }
|
|
// }
|
|
// },
|
|
// { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d
|
|
|
|
// { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域
|
|
// ]
|
|
// }
|
|
// ]
|
|
// }
|
|
// var myechart = echarts.init($('.gauge')[0])
|
|
// myechart.setOption(option)
|
|
//})()
|
|
//;(function () {
|
|
// var data = [
|
|
// { name: '可爱多', num: '9,086' },
|
|
// { name: '娃哈哈', num: '8,341' },
|
|
// { name: '喜之郎', num: '7,407' },
|
|
// { name: '八喜', num: '6,080' },
|
|
// { name: '小洋人', num: '6,724' },
|
|
// { name: '好多鱼', num: '2,170' }
|
|
// ]
|
|
// $('.inner').on('mouseenter', '.sup li', function () {
|
|
// $(this).addClass('active').siblings().removeClass('active')
|
|
// //获取随机的值 sort方法 是给数组排序 a-b是从小到大
|
|
// //.5-随机0-1的数 可能为正可能为负 排序就会随机
|
|
// var radomData = data.sort(function (a, b) {
|
|
// return 0.5 - Math.random()
|
|
// })
|
|
// var html = ''
|
|
// radomData.forEach(function (item) {
|
|
// html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`
|
|
// })
|
|
// //渲染
|
|
// $('.sub').html(html)
|
|
// })
|
|
// $('.province .sup li').eq(0).mouseenter()
|
|
// var index = 0
|
|
// var timer = setInterval(() => {
|
|
// index++
|
|
// if (index > 5) {
|
|
// index = 0
|
|
// }
|
|
// $('.sup li').eq(index).mouseenter()
|
|
// }, 2000)
|
|
//})()
|