bar3D 自定义柱子宽度（厚度）

ZXand618

发布于 2022-04-10 10:05:45

5050

发布于 2022-04-10 10:05:45

文章被收录于专栏：ZXand618的ECharts之旅

最近发现 ECharts Galley 里有一条评论，问 bar3D 如何自定义柱子粗细（配置项手册里没有）。

我用二维柱图的经验尝试了下，「barGap」，发现不行

默认似乎是根据 grid3D 的尺寸自适应的，也就是 grid3D.boxWidth、grid3D.boxDepth 这两个配置项，除以对应轴数据的长度，再留出一定间隔（后来确认到是留 30%，跟二维柱图的默认方式相同）

但是以往经验告诉我，配置项手册通常是 ECharts 功能的子集（没错，ECharts 就是这么的强大而低调，哈哈哈~），于是去源码里搜索了下 grid3D 和 bar3D 相关的内容，有了如下收获：

var barSize = seriesModel.get('barSize');
if (barSize == null) {
    var size = coordSys.size;
    var barWidth;
    var barDepth;
    var xAxis = coordSys.getAxis('x');
    var yAxis = coordSys.getAxis('y');

    if (xAxis.type === 'category') {
        barWidth = xAxis.getBandWidth() * 0.7;
    }
    else {
        // PENDING
        barWidth = Math.round(size[0] / Math.sqrt(data.count())) * 0.6;
    }
    if (yAxis.type === 'category') {
        barDepth = yAxis.getBandWidth() * 0.7;
    }
    else {
        barDepth = Math.round(size[1] / Math.sqrt(data.count())) * 0.6;
    }
    barSize = [barWidth, barDepth];
}
else if (!__WEBPACK_IMPORTED_MODULE_0_echarts_lib_echarts___default.a.util.isArray(barSize)) {
    barSize = [barSize, barSize];
}

所以结论是，可以自定义，通过配置项 series[i]-bar3D.barSize，可传入单个数值或这样的数组 [1, 1] （是绝对值，试了不能传百分比）

测试效果如下：