Echarts 横向滚动和纵向滚动开发

在这里插入图片描述
有时候我们开发中用到echarts会遇到这种情况，以柱状图为例子，当数据过多，图就会堆叠在一起，看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度，但是若数据达到上百条，这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow:scroll，这确实能解决一些问题，但是若是数据量过少，就会显的非常稀疏，经历过的都懂。

言归正传，以上都不是最佳解决方式，echarts其实已经为我们提供好相应的API配置了，无论是横向滚动还是纵向滚动，dataZoom都能满足。
|—》任意门

以上演示图关键代码说明：

纵向滚动条

 dataZoom: [
                {
                    type: "slider",
                    show: true,//隐藏或显示（true）组件
                    backgroundColor: "rgb(19, 63, 100)", // 组件的背景颜色。
                    fillerColor: "rgb(16, 171, 198)", // 选中范围的填充颜色。
                    borderColor: "rgb(19, 63, 100)", // 边框颜色
                    showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
                    startValue: 0, // 数据窗口范围的起始数值
                    endValue: 5, // 数据窗口范围的结束数值（一页显示多少条数据）
                    yAxisIndex: [0, 1],//控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
                    filterMode: "empty",
                    width: 8, //滚动条高度
                    height: "80%", //滚动条显示位置
                    right: 3, // 距离右边
                    handleSize: 0,//控制手柄的尺寸
                    zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
                    top: "middle",
                },
                {
                    //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
                    type: "inside",
                    yAxisIndex: [0, 1],//控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
                    zoomOnMouseWheel: false, //滚轮是否触发缩放
                    moveOnMouseMove: true, //鼠标移动能否触发平移
                    moveOnMouseWheel: true,//鼠标滚轮能否触发平移
                },
            ],
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

横向滚动条

dataZoom: [
                {
                    type: "slider", //隐藏或显示（true）组件
                    show: true,
                    backgroundColor: "rgb(19, 63, 100)", // 组件的背景颜色。
                    fillerColor: "rgb(16, 171, 198)", // 选中范围的填充颜色。
                    borderColor: "rgb(19, 63, 100)", // 边框颜色
                    showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
                    startValue: 0,
                    endValue: 5,
                    filterMode: "empty",
                    width: "50%", //滚动条高度
                    height: 8, //滚动条显示位置
                    left: "center",
                    zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
                    handleSize: 0, //控制手柄的尺寸
                    bottom: 3, // dataZoom-slider组件离容器下侧的距离
                },
                {
                    //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
                    type: "inside",
                    zoomOnMouseWheel: false, //滚轮是否触发缩放
                    moveOnMouseMove: true, //鼠标滚轮触发滚动
                    moveOnMouseWheel: true,
                },
            ],
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

示范图完整代码

在这里插入图片描述

<!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>Document</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="col">
            <div class="title">纵向滚动条</div>
            <div class="content">
                <div id="verticalScollChartId" style="width: 300px;height: 270px;"></div>
            </div>
        </div>
        <div class="col">
            <div class="title">横向滚动条</div>
            <div class="content">
                <div id="horizontalScollChartId" style="width: 300px;height: 270px;"></div>
            </div>
        </div>
    </div>
</body>
<script>
    // 纵向
    const verticalScollChart = echarts.init(document.getElementById('verticalScollChartId'));
    getVerticalScrollOption()
    // 获取纵向option
    function getVerticalScrollOption() {
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: { show: false },
            grid: {
                top: 20,
                left: 30,
                right: 40,
                bottom: 30,
                containLabel: false
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: "#1F2535",
                    },
                },
                axisLabel: {
                    fontSize: 10,
                    color: "#fff",
                },
                axisTick: {
                    show: true,
                },
                minInterval: 1,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgb(58,88,120)",
                    },
                },
            },
            yAxis: [{
                type: "category",
                axisLabel: {
                    color: "#fff",
                    fontSize: 10,
                    lineHeight: 14,
                    interval: 0,
                    textStyle: {
                        align: "left",
                    },
                    margin: 20, //刻度标签与轴线之间的距离。
                },
                axisLine: {
                    lineStyle: {
                        color: "rgb(58,88,120)",
                    },
                },
                axisTick: {
                    show: false,
                },
                data: ['a类', 'b类', 'c类', 'd类', 'e类', 'f类', 'g类', 'h类', 'i类', 'j类', 'k类', 'l类'],
            },
            {
                type: "category",
                axisLabel: {
                    color: "#fff",
                    fontSize: 10,
                    interval: 0,
                    margin: 5,
                },
                axisLine: {
                    lineStyle: {
                        color: "rgb(58,88,120)",
                    },
                },
                axisTick: {
                    show: false,
                },
                data: ['a公司', 'b公司', 'c公司', 'd公司', 'e公司', 'f公司', 'g公司', 'h公司', 'i公司', 'j公司', 'k公司', 'l公司'],
            }],
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    barWidth: 12,
                    itemStyle: {
                        color: 'rgba(82, 248, 215, 0.8)'
                    },
                    data: [15, 20, 25, 56, 25, 25, 37, 27, 47, 18, 26, 44],
                },
                {
                    name: '2012',
                    type: 'bar',
                    yAxisIndex: 1,
                    barWidth: 12,
                    itemStyle: {
                        color: 'rgba(255, 255, 0, 0.8)'
                    },
                    data: [10, 15, 20, 55, 21, 24, 30, 23, 42, 10, 21, 23]
                },
            ],
            dataZoom: [
                {
                    type: "slider",
                    show: true,//隐藏或显示（true）组件
                    backgroundColor: "rgb(19, 63, 100)", // 组件的背景颜色。
                    fillerColor: "rgb(16, 171, 198)", // 选中范围的填充颜色。
                    borderColor: "rgb(19, 63, 100)", // 边框颜色
                    showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
                    startValue: 0, // 数据窗口范围的起始数值
                    endValue: 5, // 数据窗口范围的结束数值（一页显示多少条数据）
                    yAxisIndex: [0, 1],//控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
                    filterMode: "empty",
                    width: 8, //滚动条高度
                    height: "80%", //滚动条显示位置
                    right: 3, // 距离右边
                    handleSize: 0,//控制手柄的尺寸
                    zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
                    top: "middle",
                },
                {
                    //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
                    type: "inside",
                    yAxisIndex: [0, 1],//控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
                    zoomOnMouseWheel: false, //滚轮是否触发缩放
                    moveOnMouseMove: true, //鼠标移动能否触发平移
                    moveOnMouseWheel: true,//鼠标滚轮能否触发平移
                },
            ],
        };

        option && verticalScollChart.setOption(option);
    }
    // 横向
    const horizontalScollChart = echarts.init(document.getElementById('horizontalScollChartId'));
    getHorizontalScrollOption()
    // 获取横向option
    function getHorizontalScrollOption() {
        const option = {
            legend: { show: false },
            grid: {
                top: 20,
                left: 30,
                right: 20,
                bottom: 30,
                containLabel: false
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    lineStyle: {
                        color: "#1F2535",
                    },
                },
                axisLabel: {
                    fontSize: 10,
                    color: "#fff",
                },
                axisTick: {
                    show: true,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgb(58,88,120)",
                    },
                },
                data: ['A市', 'B市', 'C市', 'D市', 'E市', 'F市', 'G市', 'H市', 'I市', 'J市', 'K市', 'L市']
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false, // 是否显示分隔线
                },
                axisLabel: {
                    color: "#fff",
                    fontSize: 10,
                    lineHeight: 14,
                    interval: 0,
                },
                axisLine: { // 是否显示坐标轴轴线
                    lineStyle: {
                        color: "rgb(58,88,120)",
                    },
                },
                axisTick: {
                    show: false, // 是否显示坐标轴刻度。
                },
            },
            series: [
                {
                    type: 'bar',
                    barWidth: 12,
                    itemStyle: {
                        color: 'rgba(82, 248, 215, 0.6)'
                    },
                    data: [15, 20, 25, 56, 25, 25, 37, 27, 47, 18, 26, 44],
                }
            ],
            dataZoom: [
                {
                    type: "slider", //隐藏或显示（true）组件
                    show: true,
                    backgroundColor: "rgb(19, 63, 100)", // 组件的背景颜色。
                    fillerColor: "rgb(16, 171, 198)", // 选中范围的填充颜色。
                    borderColor: "rgb(19, 63, 100)", // 边框颜色
                    showDetail: false, //是否显示detail，即拖拽时候显示详细数值信息
                    startValue: 0,
                    endValue: 5,
                    filterMode: "empty",
                    width: "50%", //滚动条高度
                    height: 8, //滚动条显示位置
                    left: "center",
                    zoomLoxk: true, // 是否锁定选择区域（或叫做数据窗口）的大小
                    handleSize: 0, //控制手柄的尺寸
                    bottom: 3, // dataZoom-slider组件离容器下侧的距离
                },
                {
                    //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
                    type: "inside",
                    zoomOnMouseWheel: false, //滚轮是否触发缩放
                    moveOnMouseMove: true, //鼠标滚轮触发滚动
                    moveOnMouseWheel: true,
                },
            ],
        };

        option && horizontalScollChart.setOption(option);
    }
</script>
<style>
    .container {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .title {
        font-size: 18px;
        line-height: 30px;
        font-size: 600;
        height: 30px;
    }

    .col {
        height: 300px;
        width: 300px;
    }

    .content {
        background-color: rgba(0, 0, 0, .85);
        height: calc(100% - 30px);
        position: relative;
    }
</style>

</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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287

相关阅读:
python *和**的用法
 如何关联分段代码表生成统计报表
 MySQL——七、MySQL备份恢复
 基于Http协议实现网络爬虫读取数据
 vue2+elementUI 仿照SPC开发CPK分析工具
 不同设备的请求头信息UserAgent，Headers
SpringBoot原理篇
 求数据流中的中位数问题
 嵌入式系统开发笔记108：IO的使用方法与面向对象程序设计
 pytest测试框架搭建
原文地址：https://blog.csdn.net/sinat_28071063/article/details/125391449