|
|
@@ -0,0 +1,650 @@
|
|
|
+//自调用函数
|
|
|
+(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();
|
|
|
+ }
|
|
|
+})();
|
|
|
+$.get('https://linggong.jinjianghc.com/mainapp.php/screen/index', (res) => {
|
|
|
+ init(res.data)
|
|
|
+})
|
|
|
+
|
|
|
+function init(data) {
|
|
|
+ $('.broker_total').text(data.broker_total);
|
|
|
+ $('.comjobs_total').text(data.comjobs_total);
|
|
|
+ $('.company_total').text(data.company_total);
|
|
|
+ $('.people_man').text(data.people_man);
|
|
|
+ $('.people_total').text(data.people_total);
|
|
|
+ $('.people_woman').text(data.people_woman);
|
|
|
+ $('.train').text(data.train);
|
|
|
+ $('.train_join').text(data.train_join);
|
|
|
+ this.geo(data);
|
|
|
+ this.monitor(data);
|
|
|
+ this.pie(data);
|
|
|
+ this.user(data);
|
|
|
+ this.order(data);
|
|
|
+ this.sale(data);
|
|
|
+ this.gauge(data);
|
|
|
+ this.province(data);
|
|
|
+}
|
|
|
+
|
|
|
+function geo(data) {
|
|
|
+ let community = data.community;
|
|
|
+ let other = 0;
|
|
|
+ let max = 0; //最大人数
|
|
|
+ community = community.map((item) => {
|
|
|
+ if (item.name == '其他') {
|
|
|
+ other += item.count;
|
|
|
+ } else if (item.count > max) {
|
|
|
+ max = item.count;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ value: item.count
|
|
|
+ };
|
|
|
+ });
|
|
|
+ community.push({
|
|
|
+ name: '泉州出口加工区',
|
|
|
+ value: 0
|
|
|
+ });
|
|
|
+ community.push({
|
|
|
+ name: '安平开发区',
|
|
|
+ value: 0
|
|
|
+ });
|
|
|
+ var myecharts = echarts.init($('.map .geo')[0])
|
|
|
+
|
|
|
+ // $.get('https://geo.datav.aliyun.com/areas_v3/bound/350582.json', result => {
|
|
|
+ $.get('js/350582.json', result => {
|
|
|
+ // 注册 echarts 地图
|
|
|
+ echarts.registerMap('jinjiang', result);
|
|
|
+ var option = {
|
|
|
+ backgroundColor: '#080a20',
|
|
|
+ title: {
|
|
|
+ text: '其他地区：' + other + ' (人)',
|
|
|
+ // subtext: '其他地区：' + community[community.length - 1].count,
|
|
|
+ left: 'left',
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{b}<br/>{c} (人)'
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ min: 0,
|
|
|
+ max: max,
|
|
|
+ text: ['多', '少'],
|
|
|
+ realtime: true,
|
|
|
+ calculable: true,
|
|
|
+ color: '#fff',
|
|
|
+ inRange: {
|
|
|
+ color: ['#142957', '#0b1c2d']
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'map',
|
|
|
+ map: 'jinjiang',
|
|
|
+ zoom: 1.2,
|
|
|
+ roam: true,
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ // rippleEffect: {
|
|
|
+ // brushType: 'stroke'
|
|
|
+ // },
|
|
|
+ symbolSize: function(val, params) {
|
|
|
+ return 8;
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: '#142957',
|
|
|
+ borderColor: '#0692a4'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: '#0b1c2d'
|
|
|
+ },
|
|
|
+ data: community,
|
|
|
+ nameMap: {
|
|
|
+ '晋江市经济开发区': '经济开发区'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myecharts.setOption(option);
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function monitor(data) {
|
|
|
+ //事件委托
|
|
|
+ // $('.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();
|
|
|
+ // });
|
|
|
+ //填充数据
|
|
|
+ let comjobs = data.comjobs;
|
|
|
+ var html = '';
|
|
|
+ comjobs.forEach(function(item) {
|
|
|
+ html += `<div class="row">`;
|
|
|
+ html += `<span class="col">${item.title}</span>`;
|
|
|
+ html += `<span class="col">${item.company}</span>`;
|
|
|
+ html += `<span class="col">${item.salary || '面谈'}</span>`;
|
|
|
+ html += `<span class="icon-dot"></span>`;
|
|
|
+ html += `</div>`;
|
|
|
+ });
|
|
|
+ //渲染
|
|
|
+ $('.monitor .marquee').html(html);
|
|
|
+ //滚动
|
|
|
+ //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
|
|
|
+ // 然后动画向上滚动，滚动到一半重新开始滚动
|
|
|
+ //因为选取的是两个marquee 所以要遍历
|
|
|
+ // $('.monitor .marquee').each(function (index, dom) {
|
|
|
+ // //将每个 的所有子级都复制一遍
|
|
|
+ // var rows = $(dom).children().clone();
|
|
|
+ // //再将新的到的加入原来的
|
|
|
+ // $(dom).append(rows);
|
|
|
+ // });
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function pie(data) {
|
|
|
+ let eduction = data.eduction;
|
|
|
+ let unknown = 0;
|
|
|
+ let total = 0;
|
|
|
+ eduction.map((item, index) => {
|
|
|
+ if (item.name == '未知') {
|
|
|
+ unknown += item.count;
|
|
|
+ eduction.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ total += item.count;
|
|
|
+ item.value = item.count;
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ $('.edu-unknown').text(unknown);
|
|
|
+ $('.edu-total').text(total);
|
|
|
+ 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: eduction,
|
|
|
+ //文字调整
|
|
|
+ label: {
|
|
|
+ fontSize: 10
|
|
|
+ },
|
|
|
+ //引导线
|
|
|
+ labelLine: {
|
|
|
+ length: 8,
|
|
|
+ length2: 10
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
|
|
|
+ };
|
|
|
+ myechart.setOption(option);
|
|
|
+}
|
|
|
+// 用户
|
|
|
+function user(data) {
|
|
|
+ let cate = data.cate;
|
|
|
+ let titleArr = [];
|
|
|
+ let countArr = [];
|
|
|
+ let total = 0;
|
|
|
+ let count = cate.length;
|
|
|
+ // 中间省略的数据 准备三项
|
|
|
+ var hiddenItem = {
|
|
|
+ name: '',
|
|
|
+ value: 10,
|
|
|
+ // 柱子颜色
|
|
|
+ itemStyle: {
|
|
|
+ color: '#254065'
|
|
|
+ },
|
|
|
+ // 鼠标经过柱子颜色
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ color: '#254065'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 工具提示隐藏
|
|
|
+ tooltip: {
|
|
|
+ extraCssText: 'opacity:0'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ cate.forEach((item, index) => {
|
|
|
+ if (index < 5 || index + 5 >= count) {
|
|
|
+ titleArr.push(item.title)
|
|
|
+ countArr.push(item.count)
|
|
|
+ } else if (count > 10 && index == 5) {
|
|
|
+ //随机三个
|
|
|
+ let arr = []
|
|
|
+ for (let i = 5; i < count - 5; i++) {
|
|
|
+ arr.push(i)
|
|
|
+ }
|
|
|
+ let randomArr = [];
|
|
|
+ while (randomArr.length < 3) {
|
|
|
+ let temp = (Math.random() * arr.length) >> 0;
|
|
|
+ randomArr.push(arr.splice(temp, 1)[0]);
|
|
|
+ }
|
|
|
+ randomArr.forEach((randomIndex) => {
|
|
|
+ titleArr.push(cate[randomIndex].title)
|
|
|
+ countArr.push(cate[randomIndex].count)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ total += item.count
|
|
|
+ });
|
|
|
+ $('.cate-count').text(count)
|
|
|
+ $('.cate-total').text(total)
|
|
|
+
|
|
|
+ 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: titleArr,
|
|
|
+ // 刻度设置
|
|
|
+ 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: countArr
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ var myechart = echarts.init($('.users .bar')[0]);
|
|
|
+ myechart.setOption(option);
|
|
|
+}
|
|
|
+
|
|
|
+//订单
|
|
|
+function order(data) {
|
|
|
+ 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 sale(data) {
|
|
|
+ let user_month = data.user_month;
|
|
|
+ let titleArr = [];
|
|
|
+ let countArr = [];
|
|
|
+ user_month.forEach((item, index) => {
|
|
|
+ titleArr.push(item.name)
|
|
|
+ countArr.push(item.count)
|
|
|
+ });
|
|
|
+ var option = {
|
|
|
+ //鼠标提示工具
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ // 类目类型
|
|
|
+ type: 'category',
|
|
|
+ // x轴刻度文字
|
|
|
+ data: titleArr,
|
|
|
+ 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: countArr,
|
|
|
+ // 图表类型
|
|
|
+ type: 'line',
|
|
|
+ // 圆滑连接
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00f2f1' // 线颜色
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ 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 gauge(data) {
|
|
|
+ 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 province(data) {
|
|
|
+ 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);
|
|
|
+}
|
jiangzixin
