echarts柱状图实现横向拖动展示数据

最新推荐文章于 2025-01-20 10:55:25 发布

转载最新推荐文章于 2025-01-20 10:55:25 发布 · 8.3k 阅读

35 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/cherylgi/p/13892776.html

文章标签：

#echarts #vue.js #前端

本文介绍如何在ECharts柱状图中处理海量数据的显示问题，通过添加dataZoom组件实现横向滚动条，以便查看全部数据。详细讲解了dataZoom的各种类型和配置，包括美化选项和内部滑动。

在使用echarts柱状图时，如果数据过多，图的显示不会那么直观，有的横坐标会被隐藏，如下图所示：

想实现可以通过横向滚动条拖动展示数据，看了官方文档，实现的效果如下

具体代码：就是添加这个代码就可以了

dataZoom: [
    {
        id: 'dataZoomX',
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'filter'
    },
    {
        id: 'dataZoomY',
        type: 'slider',
        yAxisIndex: [0],
        filterMode: 'empty'
    }
],

官方说明dataZoom 组件就是用于区域缩放，可以关注细节的数据信息，或者概览数据整体

dataZoom 现有三种类型：内置型，滑动条型，框选型。上图的效果选用的是滑动条型dataZoom 组件的具体使用可以参考官方文档 https://echarts.apache.org/zh/option.html#dataZoom

dataZoom: [
    //1.横向使用滚动条
    {
        type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
        show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
        start: 0,//数据窗口范围的起始百分比0-100
        end: 50,//数据窗口范围的结束百分比0-100
        xAxisIndex: [0],// 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
        bottom: -10 //距离底部的距离
    },
    //2.在内部可以横向拖动
    {
        type: 'inside',// 内置于坐标系中
        start: 0,
        end: 30,
        xAxisIndex: [0]
    },
    //3.纵向使用滚动条
    {
        type: 'slider',
        show: true,
        yAxisIndex: [0],//设置组件控制的y轴
        left: '93%',//距离左侧的距离 可以使百分比，也可以是像素 left: '30'（30像素）
        start: 29,
        end: 36
    },
    //4.在内部可以纵向拖动
    {
        type: 'inside',
        yAxisIndex: [0],
        start: 29,
        end: 36
    }
],

如果想美化的话，还可以这样：

        dataZoom:[
            {
                show: true,
                height: 10,
                xAxisIndex: [
                    0
                ],
                filterMode: 'empty',
                bottom: '0%',
                start: 97,
                end: 100,
                handleIcon:'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '100%',
                handleStyle: {
                    color: "#fff"
                },
                textStyle: {
                    color: '#fff'
                },
                borderColor: '#358efb'
            },
            {
                type: 'inside',
                show: true,
                height: 5,
                start: 1,
                end: 35,
            }
        ],

还可以在柱状图中进行滑动：

dataZoom:[
            {
                type: 'slider',
                xAxisIndex: [0],
                height: 10,
                filterMode: 'empty',
                bottom: 0,
                start:0,
                end:50,
                show: true
            },
            {
                type: 'inside',// 内置于坐标系中
                start: 0,
                end: 30,
                xAxisIndex: [0]
            },
        ],