前端实用案例-借助echarts实现内容自动向上轮播

📋 个人简介

💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜
📝 个人主页：馆主阿牛🔥
🎉 支持我：点赞👍+收藏⭐️+留言📝
📣 系列专栏：前端实用小demo🍁
💬格言：要成为光，因为有怕黑的人！🔥

前些天发现了一个比较好的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。

前言

最近正好在做一个项目，需要做一个内容向上轮播的部分，奈何时间原因手写轮播不敢搞，网上也有一些组件，但是看起来不可靠，因此我得另找出路，最近正好在学echarts，有感而发，不知道能不能解决这个问题，经过查询，发现echarts还真的可以搞，现将我的成果分享出来，以后有相同需求拿来用即可。

思路

在这里插入图片描述在echarts官网有很多示例，选择相似的拿来定制就行，我们需要一个横向的柱状图。
接下来就需要自己参照官网的配置项手册来定制

这里面是对所有的options的属性的介绍，一些常见的我们需要记住，其他的需求确定属于那个属性，点开查找看有没有满足需求的属性就行。
好了，接下来说一下我的思路：

先明确需求，要实现内容向上轮播，需要滚动，通过查阅手册，我发现了dataZoom这个属性，可以满足需求

dataZoom: [{
       //滑动条
         yAxisIndex: 0, //这里是从X轴的0刻度开始
         show: false, //是否显示滑动条，不影响使用
         type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 4, // 一次性展示5个。
   },],
1
2
3
4
5
6
7
8

发现这个属性后就需要动态改变startValue和endValue来实现轮播，这时就需要一个定时器来了

//自动滚动
var timeOut = setInterval(()=>{
   
   if (barOption.dataZoom[0].endValue == barOption.series[0].data.length ) {
       barOption.dataZoom[0].endValue = 4;
       barOption.dataZoom[0].startValue = 0;
   } else {
       barOption.dataZoom[0].endValue = barOption.dataZoom[0].endValue + 1;
       barOption.dataZoom[0].startValue = barOption.dataZoom[0].startValue + 1;
   }
   //重新把配置项给实例对象
   barChart.setOption(barOption);
},2000)
1
2
3
4
5
6
7
8
9
10
11
12
13

每一个滚动都需要重新把配置项给实例对象。
完成了向上轮播，我们就需要考虑如何在柱状条里显示内容？
刚开始，我在series属性里的bar柱状图里找到了label属性，这个label属性里有个position属性，可以让内容显示到柱状条里。
在这里插入图片描述
但是，经过我的实验，确实可以将内容放到柱状条里，但只能是数字，因为我们这个柱状图是横的，所以x轴的type是value，所以只能是数字，而且这个数字决定我们的柱状条的长度，我们要将其设置为100，长度拉满。

既然x轴不行，我就将目标转向了y轴，我们的y轴的type是category，内容可以是汉字，因此我在想能否将y轴的刻度标签翻转到柱状条里显示，经过查询配置项手册，发现确实可以。在yAxis里的axisLabel（专门设置刻度标签的属性）里的inside:true可以让y轴的刻度标签显示到柱状图里面，用来做内容显示。到此，我们的两大难点都得到解决。

当我们解决这两点后，运行demo发现还会有点小瑕疵，就是每次加载或者刷新的时候柱状条会有一个从左边到右边变长的动画，我们需要关掉动画，但又要不影响向上轮播，进过查询手册，发现有个动画属性可以关掉初始动画，将初识动画时长设为0即可，即animationDuration: 0。

到此难点全部解决。代码里的其他一些属性想要了解查询手册即可，不在赘述，这个小demo拿来就可以用。

代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{
            width: 500px;
            height: 400px;
            margin: 200px auto;
            border: 1px solid skyblue;
            border-radius: 10%;
        }
    style>
head>
<body>
    <div class="box">div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">script>
    <script>
         // 1.实例化对象
        var barChart = echarts.init(document.querySelector(".box"));
        // 2.指定数据
        var barOption = {
            // 关掉图例
            legend: {
                show: false,
            },
            // 关掉鼠标滑过的提示 
            tooltip: {
                show:false
            },
            // 图表距离轴线的位置
            grid: {
                left: "3%",
                right: "4%",
                top: "5%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: {
                type: "value",
                //坐标轴两边留白策略
                boundaryGap: true,
                //是否显示坐标轴刻度
                axisTick: { show: false },
                //坐标轴线线的颜色
                axisLine: {
                    show: false,
                },
                // 关掉x轴的汉字（刻度标签）
                axisLabel: {
                    show: false,
                },
                //是否显示网格线。默认数值轴显示
                splitLine: {
                    show: false,
                },
            },
            dataZoom: [{
                //滑动条
                yAxisIndex: 0, //这里是从X轴的0刻度开始
                show: false, //是否显示滑动条，不影响使用
                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 4, // 一次性展示5个。
            },],
            yAxis: {
                type: "category",
                inverse: true, //是否是反向坐标轴
                axisLabel: {
                    show: true,
                    // 让y轴的刻度标签显示到柱状图里面，用来做内容显示
                    inside:true,
                    fontSize:14,
                    lineHeight:20,
                    // 文字颜色
                    color:"rgb(225, 117, 135)",
                    width:330,
                    overflow: "break"  //文字溢出换行
                },
                //是否显示分隔线。默认数值轴显示
                splitLine: {
                    show: false,
                },
                // 不显示标签刻度
                axisTick: {
                    show: false
                },
                //坐标轴线
                axisLine: {
                    show: false
                },
                // y轴刻度标签内容， 这里就是我们要展示的内容，按要求替换就可以
                data:["我爱阿牛","阿牛最帅","阿牛好棒","aniu","阿牛阿牛","阿牛~~~","阿牛呕吼","爱你"]
            },
            series: [{
                type: "bar",
                barWidth: "65%",
                // x轴的数据，100表示长度拉满,y轴里data的长度决定这里有几个100
                data: [100, 100, 100, 100, 100,100,100,100],
                itemStyle:{
                    // 柱子的颜色
                    color:"rgba(141,162,223,0.3)",
                    borderRadius:20

                }
            },],
            animation: true,
            // 将初始动画的时长关掉
            animationDuration: 0,
        };
        // 3.把配置项给实例对象
        barChart.setOption(barOption);
        
        // 让图表跟随屏幕自动的去适应，这一块是为自适应做的
        window.addEventListener("resize", function() {
            barChart.resize();
        });
        //自动滚动
        var timeOut = setInterval(()=>{
               // 如果轮播完了则回到开始
            if (barOption.dataZoom[0].endValue == barOption.series[0].data.length ) {
                barOption.dataZoom[0].endValue = 4;
                barOption.dataZoom[0].startValue = 0;
            } else {
                barOption.dataZoom[0].endValue = barOption.dataZoom[0].endValue + 1;
                barOption.dataZoom[0].startValue = barOption.dataZoom[0].startValue + 1;
            }
            //重新把配置项给实例对象
            barChart.setOption(barOption);
        },2000)
    script>
body>
html>
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

同时，我也写好了ajax前端向后端请求数据的接口，每次请求获得数据后
将其给option.yAxis.data,然后重新把配置项给实例对象（setOption）

//获取数据
function getBarData2(){
    $.ajax({
        url: "/getBarData2",
        type:"POST",
        success: function(data) {
            barOption.yAxis.data=data.data;
            barChart.setOption(barOption);
        },
        error: function(xhr, type, errorThrown) {

        }
    })
};
getBarData2();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果动图

请添加图片描述

结语

将这个小demo用在了项目中，项目已经完工，之后会将项目开源出来，敬请期待！
项目地址：https://gitee.com/aniu-666/project
项目拿走不谢，还请给个star💖

相关阅读:
【IPython的使用技巧】
大数据之Hadoop_Yarn的基本介绍,及入门程序的书写
 [PyTorch][chapter 56][GAN 代码实现]
红帽系列操作系统安全更新 —— 筑梦之路
 使用树莓派搭建文件共享服务器-samba服务器
 推荐一款管理系统专用低代码工具，一天开发一个系统不是梦
 解决ModuleNotFoundError: No module named ‘tensorboardX‘问题
 cc2530用中断程序控制led灯亮灭
 2022年第一季度保险服务数字化跟踪分析
 离散连续系统仿真（汽车自动停车系统和弹跳球运动模型） matlab
原文地址：https://blog.csdn.net/qq_57421630/article/details/125749758

前端实用案例-借助echarts实现内容自动向上轮播

📋 个人简介

目录

前言

思路

代码

结果动图

结语