echarts数值过多时X轴滚动显示，拖动一个表控制两个表同时滚动

echarts数值过多时X轴滚动显示，拖动一个表控制两个表同时滚动

// 两个图表都添加下面这个代码
axisPointer: {
            // 设置为 dataZoom，并指定 dataZoom 的 id
            type: 'dataZoom',
            dataZoomId: this.chartId
          },
1
2
3
4
5
6

完整代码

    // 初始化生物多样性
    initBiologyChart() {
      this.biologyChart = this.$echarts.init(document.getElementById(this.chartId))
      var option = {
        xAxis: {
          type: 'category',
          data: this.option.xAxis.data,
          axisPointer: {
            // 设置为 dataZoom，并指定 dataZoom 的 id
            type: 'dataZoom',
            dataZoomId: this.chartId
          },
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          //坐标轴颜色
          axisLine: {
            lineStyle: {
              // background: rgba(186,231,255,0.4);
              color: 'rgba(186,231,255,0.4)',
              width: 2
            }
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 0,
            interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(230,247,255,0.5)"  //坐标轴的文本颜色
          },
        },
        yAxis: {
          name: this.option.yAxis.name,
          type: 'value',
          minInterval: 1,
          min: 0, // 配置 Y 轴刻度最小值
          // max: 40,  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)', //  字体颜色
            fontSize: 12, //  字体大小
            fontWeight: '400',
            //关键代码
            padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(230,247,255,0.2)'],
              width: 1,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            showMaxLabel: false, // 坐标轴不显示最大值
            color: "rgba(230,247,255,0.5)", //刻度线标签颜色
            fontSize: 12,
            // formatter: function (value) {
            //   if (value / 10 % 2 === 1) {
            //     return value;
            //   } else {
            //     return ''
            //   }
            // }
          },

        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '20px',
          right: '20px',
          bottom: '10px',
          top: '25px',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        //滚动条样式
        dataZoom: [

          {

            id: this.chartId,

            type: 'slider',

            show: this.isShowScroll,

            // start: 0,//默认为0

            // end: 50,//默认为100

            startValue: 0, // 从头开始。

            endValue: 4, // 一次性展示6个。

            xAxisIndex: [0],

            handleSize: 0,//滑动条的 左右2个滑动条的大小

            height: 4,//组件高度

            bottom: 0,//右边的距离

            borderColor: "#e3e3e3",

            fillerColor: '#51B7F9',

            borderRadius: 10,

            backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色

            showDataShadow: false,//是否显示数据阴影 默认auto

            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true

            realtime: true, //是否实时更新

            filterMode: 'filter',

            // zlevel: 10,

          },
          //以下重点： 让鼠标滚动从缩放变成移动
          // {

          //   type: 'inside',

          //   xAxisIndex: [0],

          //   zoomOnMouseWheel: false, //滚轮不触发缩放

          //   moveOnMouseMove: true,   //鼠标移动触发平移

          //   moveOnMouseWheel: true,  //鼠标滚轮触发平移

          // },

        ],
        series: [
          {
            data: this.option.series[0].data,
            type: 'bar',
            barWidth: 12, //设置柱子宽度
            color: 'blue',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            },
            label: {  //在柱状图上显示数据
              show: true,
              position: 'top',
              color: '#fff',
              fontWeight: 500,
              fontSize: 14,
            },
            markPoint: {
              symbol: 'rect',
              symbolSize: '15',
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#1A96F9' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#4CECFF' // 100% 处的颜色
                  }
                ]
              },

            },
          },
        ]
      };
      this.biologyChart.setOption(option);
    },
    // 初始化生物多样性背景图
    initBiologyBck() {
      this.bckchart = this.$echarts.init(document.getElementById(this.chartBgId))
      var option = {
        xAxis: {
          type: 'category',
          data: this.option.xAxis.data,
          axisPointer: {
            // 设置为 dataZoom，并指定 dataZoom 的 id
            type: 'dataZoom',
            dataZoomId: this.chartId
          },
          axisLine: {       //x轴显示
            "show": false,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 0,
            interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(0,0,0,0)"  //坐标轴的文本颜色
          },
          //坐标轴颜色
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00bbff',
              width: 2
            }
          },
        },
        yAxis: {
          name: '',
          type: 'value',
          minInterval: 1,
          min: 0, // 配置 Y 轴刻度最小值
          max: Math.ceil(Math.max(...this.option.series[0].data)),  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)',
            fontSize: 16, //  字体大小
            fontWeight: 'bolder',
            //关键代码
            padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: false,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            color: "rgba(255,0,0,0)", //刻度线标签颜色
            fontSize: 12,
          },
        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '20px',
          right: '20px',
          bottom: '10px',
          top: '25px',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        //滚动条样式
        dataZoom: [

          {

            id: this.chartId,

            type: 'slider',

            show: this.isShowScroll,

            // start: 0,//默认为0

            // end: 50,//默认为100

            startValue: 0, // 从头开始。

            endValue: 4, // 一次性展示6个。

            xAxisIndex: [0],

            handleSize: 0,//滑动条的 左右2个滑动条的大小

            height: 4,//组件高度

            bottom: 0,//右边的距离

            borderColor: "#e3e3e3",

            fillerColor: '#51B7F9',

            borderRadius: 10,

            backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色

            showDataShadow: false,//是否显示数据阴影 默认auto

            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true

            realtime: true, //是否实时更新

            filterMode: 'filter',

            // zlevel: 10,

          },
          //以下重点： 让鼠标滚动从缩放变成移动
          // {

          //   type: 'inside',

          //   xAxisIndex: [0],

          //   zoomOnMouseWheel: false, //滚轮不触发缩放

          //   moveOnMouseMove: true,   //鼠标移动触发平移

          //   moveOnMouseWheel: true,  //鼠标滚轮触发平移

          // },

        ],
        series: [
          {
            data: [0, 0, 0, 0, 0],
            type: 'bar',
            barWidth: 40, //设置柱子宽度
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            }
          },

        ]
      };

      this.bckchart.setOption(option);
    },
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
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343