系列文章目录

第一章：数据可视化项目基础配置
第二章：数据可视化项目Echarts图表模块
第三章：数据可视化项目数据切换效果模块

文章目录

系列文章目录
监控区域-效果
- 切换功能：
- 动画功能：
销售统计( sales )-切换效果
- 实现步骤：
订单区域（order）-效果
- 实现步骤：
热销排行（top）-效果
- 实现思路：

监控区域-效果

切换功能：

绑定标签页点击事件
当前容器加active其他容器移除active
index对应的内容容器显示其他容器隐藏

   // 切换$(".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 占满剩余高度，溢出隐藏
  - 绝对定位，top 1.6rem bottom 0
  - 宽度100%，溢出隐藏
- 使用animation实现动画
- 使用 translateY 向上位移 50%
- 动画时间15s，匀速播放，循环执行。

   // 动画$(".marquee-view .marquee").each(function() {// console.log($(this));var rows = $(this).children().clone();$(this).append(rows);});

销售统计( sales )-切换效果

实现步骤：

准备切换需要依赖的数据 4组
绑定点击事件
- 切换激活 tab 的样式
- 切换图表依赖的数据（重新渲染图表）
开启定时器，进行切换，鼠标经过sales停止定时器，离开开启定时器

//销售额统计
(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();});
})();

订单区域（order）-效果

实现步骤：

提前准备数据
点击后切tab激活样式
点击后切换数据内容
开启定时器动态切换数据

// 订单功能
(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 = 0var $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)})})();

热销排行（top）-效果

实现思路：

准备后台返回的真实数据
利用数据渲染各省热销模块 sup 模块 (拼接html格式字符串，进行渲染)
当鼠标进入 tab 的时候
- 激活当前的tab样式，删除其他tab的样式
- 渲染各省热销 sub 模块 (拼接html格式字符串，进行渲染)
默认激活第一个tab的效果
开启定时器，按依次切换

//全国热榜
(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);});
})();

数据可视化项目【三】数据切换效果模块相关推荐

数据可视化项目【一】基础配置
系列文章目录第一章:数据可视化项目基础配置第二章:数据可视化项目Echarts图表模块第三章:数据可视化项目数据切换效果模块文章目录系列文章目录项目介绍: 项目展示: 技术分析: 基础布局 ...
数据可视化项目知识点以及代码演示
DAY01-可视化项目项目介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出.我们引入 ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
数据可视化（三）基于 Graphviz 实现程序化绘图
2019独角兽企业重金招聘Python工程师标准>>> 前言我之前在几篇文章新一代Ntopng网络流量监控-可视化和架构分析. 数据可视化(一)思维利器 OmniGraffle 绘 ...
echarts数据可视化项目经验积累
echarts数据可视化项目经验积累 echarts图表在初始化时可以在mounted中. // An highlighted block mounted() {this.myChart = this ...
丽水数据可视化设计价格_大数据可视化项目报价模板
项目系统需求需求内容单价数量单位合计 1 系统方案设计 1. 整合分析项目需求和特性,制作需求文档: 进行软件产品界面(信息架构.操作逻辑.功能.用户体验等) 的交互策划,并输出产 ...
ECharts数据可视化项目-大屏数据可视化【持续更新中】
ECharts数据可视化项目-大屏数据可视化[持续更新中] 文章目录 ECharts数据可视化项目-大屏数据可视化[持续更新中] 一. 数据可视化ECharts使用二.技术栈三.数据可视化四.可 ...
数据可视化项目落地复盘
近期落地了工作中的数据可视化项目,今天原创复盘下这中间的历程. 在复盘前,首先一个问题:数据可视化到底是不是一个需求? 提出这个问题的原因: 数据可视化只是让数据更直观,是数据的另一种展现形式.这种形 ...
Hadoop+hive+flask+echarts大数据可视化项目之hive环境搭建与系统数据的分析思路
Hadoop+hive+flask+echarts大数据可视化项目(四) --------------hive环境搭建与系统数据的分析思路---------------- 关注过Hadoop+hive ...

数据可视化项目【三】数据切换效果模块

系列文章目录

文章目录

监控区域-效果

切换功能：

动画功能：

销售统计( sales )-切换效果

实现步骤：

订单区域（order）-效果

实现步骤：

热销排行（top）-效果

实现思路：

数据可视化项目【三】数据切换效果模块相关推荐

最新文章

热门文章