ECharts柱状图横向展示与DataZoom滑动查看实现

一行注释2026-01-24 13:41

横向柱状图基础配置

介绍ECharts中横向柱状图的基本配置方法，包括xAxis和yAxis的调换、数据格式要求。示例代码片段：

javascript 复制代码

option = {
    xAxis: { type: 'value' }, // 数值轴横向显示
    yAxis: { type: 'category', data: ['A', 'B', 'C'] }, // 类目轴纵向显示
    series: [{ type: 'bar', data: [10, 20, 30] }]
};

处理数据量过大的场景

分析横向柱状图数据过多时的常见问题（如重叠、渲染性能下降）。通过调整barWidth、grid布局或分页加载优化显示。

DataZoom组件集成

详细说明DataZoom的配置参数，包括滑动条模式（slider）和内置缩放（inside）。关键配置示例：

javascript 复制代码

dataZoom: [{
    type: 'slider',
    yAxisIndex: 0, // 控制y轴（横向柱状图的类目轴）
    filterMode: 'filter', // 过滤数据模式
    start: 0, // 初始范围
    end: 50   // 显示50%的数据
}]

DataZoom完整示例

复制代码

dataZoom: [
      {
        id: "dataZoomY",
        yAxisIndex: [0],
        type: "slider",
        show: data.length > 10,
        startValue: Math.max(data.length - 10, 0),
        endValue: data.length - 1,
        width: 6,
        borderColor: "transparent",
        fillerColor: "#dfdfdf",
        zoomLock: true, //禁止缩放
        showDataShadow: false, //是否显示阴影，默认true
        backgroundColor: "#fff",
        showDetail: false, //是否显示详情，默认true
        realtime: true, //实时更新
        zoomOnMouseWheel: false, //鼠标滚轮缩放
        filterMode: "filter", //过滤模式，默认值：'filter'。可选值为：'empty', 'filter'
        handleIcon: "circle", //视觉圆角
        handleStyle: {
          color: "#dfdfdf",
          borderColor: "#dfdfdf"
        },
        handleSize: "100%",
        moveHandleSize: 0,//手柄大小
        brushSelect: false//是否启用框选择，默认开启

      },
      {
        type: "inside",
        yAxisIndex: 0,
        zoomOnMouseWheel: false,//鼠标滚轮缩放
        moveOnMouseMove: true,//是否移动鼠标触发选择框位移，默认开启
        moveOnMouseWheel: true//鼠标滚轮缩放
      }
    ]