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

系列文章目录

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

---

---

监控区域-效果

切换功能：

• 绑定 标签页点击 事件
• 当前容器加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();
    });
1
2
3
4
5
6
7

动画功能：

• 实现思路：
  • 先克隆列表，追加在后面
  • 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);
    });
1
2
3
4
5
6

销售统计( 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();
    });
})();
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

订单区域（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 = 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)
    })


})();
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
32
33
34
35
36
37

热销排行（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);
        }
    );
})();
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136