JS echarts饼图legend位置调整到左侧垂直居中

要将 Echarts 饼图的 legend 位置调整到左侧垂直居中，可以通过设置 Echarts 相应的配置项来实现。具体操作如下：

1. 在 Echarts 的 option 中添加 legend 配置项，设置 orient 为 'vertical'，并设置 left 和 top 分别为 'left' 和 'center'，如下所示：

option = {
  // 其他配置项
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'center',
  },
  // 其他配置项
}

2. 这样就可以将 legend 的位置设置为左侧垂直居中了。如果还需要调整 legend 的样式，可以在 legend 中添加相应的配置项，例如 textStyle 来设置文字样式。完整的配置项如下：

option = {
  // 其他配置项
  legend: {
    orient: 'vertical',
    left: 'left',
    top: 'center',
    textStyle: {
      color: '#333',
      fontSize: 14,
    },
  },
  // 其他配置项
}

相关问题

echarts饼图 legend滚动

在 ECharts 中，如果饼图的图例过多，可以使用 legend 的滚动功能来展示更多的图例项。下面是一个示例代码，展示了如何在 ECharts 中使用滚动图例：

// 引入 ECharts
import echarts from 'echarts';

// 初始化图表实例
const chart = echarts.init(document.getElementById('chart'));

// 配置数据
const data = [
  { name: '类别1', value: 100 },
  { name: '类别2', value: 200 },
  { name: '类别3', value: 300 },  // 更多数据...
];

// 配置图表选项
const option = {
  legend: {
    type: 'scroll', // 设置为滚动图例
    orient: 'vertical', // 图例的布局方向
    right: 10, // 图例距离容器右侧的距离
    top: 20, // 图例距离容器顶部的距离
    bottom: 20, // 图例距离容器底部的距离
    data: data.map(item => item.name), // 图例的数据项
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: data,
    },
  ],
};

// 渲染图表
chart.setOption(option);

在上述代码中，通过 `type: 'scroll'` 将图例设置为滚动类型，可以根据实际情况调整其它配置项，如布局方向 (`orient`)、位置 (`right`、`top`、`bottom`) 和数据项 (`data`)。

希望以上信息对您有所帮助！如有更多问题，请随时提问。

echarts饼图legend 行高

Echarts是一个基于JavaScript的开源可视化库，用于构建交互式的图表和数据可视化界面。饼图是Echarts中的一种常见图表类型，用于展示数据的占比关系。

在Echarts中，可以通过legend配置项来设置饼图的图例（legend）。图例是用来标识不同数据系列的颜色和名称的组件，通常位于图表的边缘或底部。

要设置饼图图例的行高，可以使用legend.itemHeight配置项。该配置项用于设置图例每一行的高度，单位为像素（px）。默认情况下，行高为14px。

以下是设置饼图图例行高的示例代码：

option = {
    legend: {
        itemHeight: 20,  // 设置图例行高为20px
        // 其他图例配置项...
    },
    // 其他配置项...
};

通过将itemHeight设置为所需的行高值，可以自定义饼图图例的行高。