前端 - Echarts矩形树图如何设置从左到右显示?

Question

图一:

图二:

图一是实现的矩形树图, 图二是目标的矩形树图, 使用Echarts实现的, 默认是根据值大小从上到下的, 如何设置成图二那种从左到右呀

Answer 1

在 Echarts 中，要实现矩形树图从左到右的显示，你需要调整 series 配置项中的 layout 属性。默认情况下，layout 属性可能设置为 'vertical'，导致从上到下的布局。要改为从左到右的布局，你应该设置 layout 为 'horizontal'。

以下是一个简化的示例代码，展示了如何设置矩形树图从左到右显示：

option = {    series: [{        type: 'tree',        data: [...], // 你的数据        top: '1%',        left: '7%',        bottom: '1%',        right: '20%',        symbolSize: 7,        label: {            position: 'left',            verticalAlign: 'middle',            align: 'right',            fontSize: 9        },        leaves: {            label: {                position: 'right',                verticalAlign: 'middle',                align: 'left'            }        },        expandAndCollapse: true,        animationDuration: 550,        animationDurationUpdate: 750,        layout: 'horizontal', // 这里设置为水平布局    }]};

注意，除了设置 layout 为 'horizontal' 之外，你可能还需要调整其他配置项，如 label 的位置和对齐方式，以确保标签正确显示。上述代码只是一个基本的示例，你可能需要根据你的具体需求进行调整。