赞
踩
第一章:数据可视化项目基础配置
第二章:数据可视化项目Echarts图表模块
第三章:数据可视化项目数据切换效果模块
// 切换
$(".monitor .tabs").on("click", "a", function() {
$(this).addClass("active").siblings("a").removeClass("active");
// console.log($(this).index());
// 选取对应索引号的content
$(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
});
// 动画
$(".marquee-view .marquee").each(function() {
// console.log($(this));
var rows = $(this).children().clone();
$(this).append(rows);
});
//销售额统计 (function() { 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] ] } // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".line")); // 2. 指定配置和数据 var option = { tooltip: { trigger: "axis" }, // 设置网格样式 grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', show: true, // 显示边框 borderColor: '#012f4a', // 边框颜色 containLabel: true // 包含刻度文字在内 }, // 图例组件 legend: { textStyle: { color: '#4c9bfd' // 图例文字颜色 }, right: '10%' // 距离右边10% }, xAxis: { type: 'category', data: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ], axisTick: { show: false // 去除刻度线 }, axisLabel: { color: '#4c9bfd', // 文本颜色 interval: 0 }, axisLine: { show: false // 去除轴线 }, boundaryGap: false // 去除轴内间距 }, yAxis: { type: 'value', axisTick: { show: false // 去除刻度 }, axisLabel: { color: '#4c9bfd' // 文字颜色 }, splitLine: { lineStyle: { color: '#012f4a' // 分割线颜色 } } }, color: ['#00f2f1', '#ed3f35'], // 图标数据 series: [{ name: '预期销售额', data: data.year[0], type: 'line', smooth: true }, { name: '实际销售额', data: data.year[1], type: 'line', smooth: true } ] }; // 3. 把配置和数据给实例对象 myChart.setOption(option); // 切换 $('.sales').on('click', '.caption a', function() { // 样式 高亮显示 index = $(this).index() - 1; $(this).addClass('active').siblings().removeClass('active') // currData 当前对应的数据 // this.dataset.type 标签上的data-type属性值,对应data中的属性 // console.log(data['year']); var currData = data[this.dataset.type] // 修改图表1的数据 option.series[0].data = currData[0] // 修改图表2的数据 option.series[1].data = currData[1] // 重新设置数据 让图标重新渲染 myChart.setOption(option) }) var as = $(".sales .caption a"); var index = 0; var timer = setInterval(function() { index++; if (index >= 4) index = 0; as.eq(index).click(); }, 1000); // 鼠标经过sales,关闭定时器,离开开启定时器 $(".sales").hover( function() { clearInterval(timer); }, function() { clearInterval(timer); timer = setInterval(function() { index++; if (index >= 4) index = 0; as.eq(index).click(); }, 1000); } ); // 4. 当我们浏览器缩放的时候,图表也等比例缩放 window.addEventListener("resize", function() { // 让我们的图表调用 resize这个方法 myChart.resize(); }); })();
// 订单功能 (function() { // 1. 准备数据 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' } } // 获取显示 订单数量 容器 var $h4Orders = $('.order h4:eq(0)') // 获取显示 金额数量 容器 var $h4Amount = $('.order h4:eq(1)') // 4. 开启定时器切换数据 var index = 0 var $allTab = $('.order .filter a') this.timer = setInterval(function() { index++ if (index >= 4) index = 0 $allTab.eq(index).click() }, 2000) $('.order').on('click', '.filter a', function() { // 2. 点击切换激活样式 index = $(this).index(); console.log($(this).index()); console.log(index); $(this).addClass('active').siblings().removeClass('active') // 3. 点击切换数据 var currdata = data[this.dataset.key] // console.log(data[this.dataset.key]); $h4Orders.html(currdata.orders) $h4Amount.html(currdata.amount) }) })();
//全国热榜 (function() { var hotData = [{ city: '北京', // 城市 sales: '25, 179', // 销售额 flag: true, // 上升还是下降 brands: [ // 品牌种类数据 { name: '可爱多', num: '9,086', flag: true }, { name: '娃哈哈', num: '8,341', flag: true }, { name: '喜之郎', num: '7,407', flag: false }, { name: '八喜', num: '6,080', flag: false }, { name: '小洋人', num: '6,724', flag: false }, { name: '好多鱼', num: '2,170', flag: true }, ] }, { city: '河北', sales: '23,252', flag: false, brands: [ { name: '可爱多', num: '3,457', flag: false }, { name: '娃哈哈', num: '2,124', flag: true }, { name: '喜之郎', num: '8,907', flag: false }, { name: '八喜', num: '6,080', flag: true }, { name: '小洋人', num: '1,724', flag: false }, { name: '好多鱼', num: '1,170', flag: false }, ] }, { city: '上海', sales: '20,760', flag: true, brands: [ { name: '可爱多', num: '2,345', flag: true }, { name: '娃哈哈', num: '7,109', flag: true }, { name: '喜之郎', num: '3,701', flag: false }, { name: '八喜', num: '6,080', flag: false }, { name: '小洋人', num: '2,724', flag: false }, { name: '好多鱼', num: '2,998', flag: true }, ] }, { city: '江苏', sales: '23,252', flag: false, brands: [ { name: '可爱多', num: '2,156', flag: false }, { name: '娃哈哈', num: '2,456', flag: true }, { name: '喜之郎', num: '9,737', flag: true }, { name: '八喜', num: '2,080', flag: true }, { name: '小洋人', num: '8,724', flag: true }, { name: '好多鱼', num: '1,770', flag: false }, ] }, { city: '山东', sales: '20,760', flag: true, brands: [ { name: '可爱多', num: '9,567', flag: true }, { name: '娃哈哈', num: '2,345', flag: false }, { name: '喜之郎', num: '9,037', flag: false }, { name: '八喜', num: '1,080', flag: true }, { name: '小洋人', num: '4,724', flag: false }, { name: '好多鱼', num: '9,999', flag: true }, ] } ] var supHTML = ""; $.each(hotData, function(index, item) { // console.log(item); supHTML += `<li> <span>${item.city}</span> <span> ${item.sales} <s class=${item.flag ? "icon-arrow-up" : "icon-arrow-down"}></s> </span> </li>`; }); $(".sup").html(supHTML); //鼠标经过 启动函数 $(".province .sup").on("mouseenter", "li", function() { index = $(this).index() render($(this)) }) //sup高亮 对应渲染函数 function render(that) { that.addClass('active').siblings().removeClass(); var supHTML = ""; $.each(hotData[that.index()].brands, function(index, item) { // console.log(item); supHTML += `<li> <span>${item.name}</span> <span> ${item.num} <s class=${item.flag ? "icon-arrow-up" : "icon-arrow-down"}></s> </span> </li>`; }); $(".sub").html(supHTML); } // 定时器 var lis = $('.province .sup li') // 第一个默认激活 lis.eq(0).mouseenter() var index = 0; var timer = setInterval(function() { index++; if (index >= 5) index = 0; // lis.eq(index).mouseenter(); render(lis.eq(index)); }, 2000); $(".province .sup").hover( // 鼠标经过事件 function() { clearInterval(timer); }, // 鼠标离开事件 function() { clearInterval(timer); timer = setInterval(function() { index++; if (index >= 5) index = 0; // lis.eq(index).mouseenter(); render(lis.eq(index)); }, 2000); } ); })();
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。